I have React app running locally on localhost:3000. I configured VSCode to debug app in MS Edge and Google Chrome also. I can launch browsers from VSCode debugger. Sometimes I launch Chrome and sometimes Edge. But the problem is with browser extensions. Launched browsers have resetted settings, and no extensions are present, for example React Developer Tools. I want to inspect React Components from this extension. Now I must launch manually browser card with url localhost:3000 and inspect components, but I haven't debugger attached for inspecting breakpoints in the same time.
Related
I want to add react devtools to Safari browser
I didn't find a way to install it
I want to see the react sign on the websites made by react
Thank you
I think what you are looking for is the react-devtools chrome extension?
React-devtools is a standalone package that runs independently.
The chrome extension hooks it up for convenience in chrome.
Safari doesn't have an extension right now (legacy reasons).
If you really need to hook it up, it should not be hard to port it to safari since it's API's are now supposedly as open and similar as chrome's.
Starting with MacOS 13.0 Ventura and Safari 16.1, developers can now build and distribute Extensions for Safari Web Inspector, just like they do with Safari as a whole through the App Store.
It is now hopefully a matter of time before Facebook or someone else builds and distributes React Dev Tools for Safari.
Reference: Adding a web development tool to Safari Web Inspector
The chrome inspect device doesnot list out the mobile application developed using react native.
I tried the react native chrome extensions but it didnt worked for me.
chrome://inspect/#devices
Is there any steps to that has to followed to inspect the react native apps?
You should active Remote JS Debugging from Developer Menu. to access Developer menu:
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).
I would recommend using React Native Debugger, which gives you a Chrome inspector but it is built specifically with features for React Native.
https://github.com/jhen0409/react-native-debugger
I am using visual studio code IDE to develop react native app and am not using expo library.
Before that I was working on the android studio, debugging in that is straightforward and simple.
Now for react-native, I wanted to know how to debug my app using visual studio code IDE?
If you want to debug the app in VS Code itself, like in other IDEs. Then on approach can be to follow the following steps:
Install React Native Tools Extension (provided by Microsoft) to VS Code.
This is a nice add on to VS Code's capabilities for React Native.
Then go to Debug option from left menu and click on Add Configuration.
If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.
Now if already have Launch configuration added, then you can click on Add Configuration button then you will see more options related to React Native.
You can add configurations for React Native: Attach to Packager, React Native: Debug to Android, React Native: Debug to iOS in your launch.json file. It is present in .vscode folder.
Then add your breakpoints in code. Now suppose you already have your app running on emulator then you can choose option Attach to Packager.
Then on emulator or device open developer options (Ctrl + M for Windows + Android) and click on Debug JS Remotely.
Now your breakpoints should be working. Similarly if your app wasn't working already then you can go for Debug Android or Debug iOS accordingly.
Step1: Open app Setting in your mobile by shaking your mobile or by typing this command in your machine if your running android.
adb shell input keyevent 82
Step2: Select Debug JS Remotely which is the second option.
Step3: In your Browser type Url http://localhost:8081/debugger-ui/
Step4: Again Open App Setting by shaking or running the command shown in step 1 and select Reload option which is first option
Now You can get all console logs in the browser and also you can debug your app remotely by putting breakpoints and analyze the values step by step.
I have a very small Ionic app I've been working on (just a couple angular routes/views). When I run it using "ionic serve", the app loads in my browser as expected. However, when I upload it using "ionic upload" and view it in the Ionic View app, it appears as though none of my javascript works, or my routes are not working.
How can I debug this issue? Are there build tools to detect errors or anything along those lines?
As #Keval says if you're running Android you can debug on-the-fly using Chrome
enable Developer options on your device (Settings > About, then find Build number and keep tapping it...yes really!)
In Developer options, enable USB debugging checkbox
plug in with a USB cable
run your app on the device.
At some point your device will then show a popup requiring you to accept debug commands from the remote computer, click Accept. If it doesn't appear the first time, unplug and replug usually fixes it
head to chrome://inspect in desktop Chrome, and click inspect under your device
A new Chrome window will open with all the juicy abilities you need - inspect code, set breakpoints, look at network speeds, access the console and so on
You can also do this on iOS via Safari http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
I had the same issue recently. The problem was that I stored my Ionic views NOT in /templates folder.
Please, check, maybe my answer will be useful for you.
I am running an AngularJS project as a Hawtio plugin and this is deployed in Karaf (as a subcomponent of JBoss Fuse ESB) as a packaged war placed in the deploy folder of Fuse. When I try to debug in Chrome Dev Tools, I have trouble debugging (setting watches, breakpoints, etc.) my JavaScript source codes as these are not visible in the Sources tab. Additionally, my console.logs in my source files do not appear in the Console of Chrome Dev Tools as well as on the Hawtio console.
Is anyone have an idea how to do this?
Thanks.
So for logging, create an instance of Logger in your plugin:
var log = Logging.Logger.get("MyPlugin");
log.debug("Yay, I've got a logger!");
Though console.log normally is captured by the above. You may need to set hawtio's logging to 'Debug' in the preferences if you're not seeing any logs in the console.
It's difficult to deal with breakpoints with an external plugin as dynamically loaded scripts aren't treated the same way in chrome, however you can manually set a breakpoint by putting:
debugger;
in your .js file, see Set a javascript breakpoint in code - in chrome?