React Native - How to debug javascript code better? - javascript

I am using React Native 0.13. Currently I have an Android emulator in which I can preview the application. I work in OSX Yosemite. In a lot of cases nothing happens when I click on a button or link and it is due to some error in javascript, but I do not get any error message anywhere, so it becomes very hard to solve the problem. For console logging I use:
adb logcat *:S ReactNative:V ReactNativeJS:V
Which displays the console.log outputs, but it doesn't give me the exact errors when the code breaks.
Can someone suggest me a good way of debugging and how to get the error output to work?

Best way to debug JS code is by using Chrome devtools. You can enter the mode when JS code is executed remotely in chrome tab, and then use normal chrome tools to do step through debugging. To do so you'd need to open react-native dev menu and select "debug in chrome" (see this link for more detailed instructions). Then in chrome you can open dev console with alt + ⌘ + j, go to "sources" tab and use ⌘ + p to navigate to some specific JS file. Then place breakpoints there etc...
If you want to debug java code, the easiest way is to have Android Studio launch your app. Then you can run your app with debugger attached (with ctr + d) or use "Attach debugger to Android process" button from the launch menu and selecting your running app from the menu. Then you can place breakpoints in Android Studio for the java code.

Related

Opening Chromium DevTools in production builds of Electron apps without source code or build process

Is there a way to open devtools on production builds of Electron that were packaged and distributed to you?
For instance, I'd like to poke around Slack's app. I know that it's built in Electron, and I'd like to open devtools to see how some parts of it are built.
On macOS I've tried:
ELECTRON_ENV=development /Applications/Slack.app/Contents/MacOS/Slack --debug --auto-open-devtools-for-tabs
as well as the usual key combination of Cmd+Option+I and checking for debug menus/views.
None of these seem to make a difference.
Note that there are already a few solutions that recommend you do it programmatically by injecting:
remote.BrowserWindow.getFocusedWindow().webContents.openDevTools()
However I can't do that because I don't have access to the source code or the original build process. Is there a way to trigger devtools externally?
The most promising way I've seen so far is remote-debugging-port but I'm not sure it works with production builds.
The way to do this without third-party code is indeed using the --remote-debugging-port flag.
Using Signal as an example, take the following steps:
start the application from the CLI
signal-desktop --remote-debugging-port
Open the debugging URL in a Google Chrome browser (in this case http://localhost:39733/), this will open a page with the app name on it .
Click the to open a screen were you can click around to use the app and see output in the devtools
Alternatively, you can open chrome://inspect/#devices in the Google Chrome browser and click "inspect" (underneath the app name) to open the same window

console.log not work in Samsung Tizen TV Emulator (web app)

I am trying to debug my web app with Tizen IDE + Emulator, but console does not work. When I run my app with the 'Debug as...' option it launches the app and the inspector opens correctly but the console tab is empty and I cannot run any JavaScript command in the console (as suggested here https://stackoverflow.com/a/37845599/3199735). Console output in the IDE is also empty. I tested this with the Basic TV app template, so there is no JavaScript code which disables console. I also tested the 'sdb dlog' command, but it just gives me an error.
I'm using the latest SDK and IDE.
Mac OSX 10.11.6
Tizen SDK
Version : 2.4.0_Rev8
You can find same posts with screenshots from Samsung's forums
Samsung Tizen TV SDK provides Web Inspector as debugging tool. Google chrome is required to be installed to perform such debug Operation. You can check the functionalities provided in this document.
a) Run the tizen project using Debug As-> Tizen Web Application. When you will debug the project on emulator, the Web Inspector (Debugging tool for Tizen SDK) will open in a separate window.
b) Go to the Source tab and enable Debugging :
c) You can also set breakpoints and debug stepping into line of codes. Click on the bottom tab to see the console. You can also check the console from console tab and also the IDE.
Otherwise, You can also Run As > Tizen Web Simulator Application (Samsung TV)
Then Click on the Inspect Icon & check the console tab.
One workaround would be to create your own logger area in your app and list what is printed using a custom log function :\

Open browser not working in WebStorm

I use WebStorm 10.0.4 on Windows 7.
I have a single page Angular application that I am working on in WebStorm. Up to this point I have always been able to preview my built app in Chrome using WebStorm's "Open in Browser" feature.
This morning however, the problem started. Every time I try to open up my project's index file in the browser, the page becomes unresponsive and eventually Chrome prompts me to kill the page. I cant even open developer tools.
Anyone have any idea why this may be happening?

the script debugger failed to connect to the target process. Adebugger is already attached

Windonws 7 64-bit and VS2010
In F12 developer tools for IE11 on Windonws 7 64-bit and VS2010, when I click the Debugger tool icon or press Ctrl + 3 to open the tool, I'm not able to debug my java-script files.
When I click the Debugger tool icon, i'm presented with the message in the screenshot above & I can't see the javacsript files my current page calls, so I'm unable to debug my javascript code.
Any one knows why I could be getting this message? I have tried everything mentioned at the following link with out success. VS2010 and IE10 Attaching the Script debugger to process iexplore.exe failed
I was encountering this problem with VS 2012 & Win 7 and also VS2013 and Win8.1:
Perplexed for half a day, looking up things online, finally figured it out myself.
Learn the difference between these in Visual Studio: F5 vs (Ctr+Shift+W)
F5 will engage VS debugger and you will get the:
"The script debugger failed to connect to the target process. A debugger is already attached"
when using the F12 Developer Tool in I.E. 11 or whatever version.
However, if you use the V.S. command: View in Browser(Ctrl+Shift+W) this will run the script and allow I.E's script debugger(F12 Dev Tool) to engage and work.
The easier way for me was:
Run project(F5) in Firefox (or any other browser, not IE).
Copy adress.
Close Firefox (project will keep running, atleast did in myn).
Open IE and input address manually (ex: http://localhost:58100/) by pasting what you copied in '2.'.
IE Debugger should work at this point.
You should use ctrl+F5 instead of F5 so your application runs without debugging
I see this post is referred to Windonws 7 64-bit and VS2010, but I am using Windows 10 32 bit and VS Professional 2012 along with IE 11. I got the same message as shown in screenshot:
IE 11 Error message
How I resolved this problem(after starting Debugging):
went to debug tab in VS
then windows
select processes
There you will see two processes attached one will be "IIS" and second will be "IE.exe" with description "script". Detach the second one and then hit F12 in IE where your code is running.
When I did iisreset from command prompt, I could resolve this issue.
Open CMD in admin mode -> type IISRESET -> enter

How can I debug a Firefox extension with Firebug?

I'm trying to use Firebug to debug a JavaScript file in an extension I've added to Fx 4.
Can anyone tell me how to do it? I can only see website scripts.
Use Chromebug it's firebug for extension development, witch will give you the full ability to inspect debug firefox it self and all firefox extension as if it's a webpage :)
1- install the latest version from here: http://getfirebug.com/releases/chromebug/
2- Winkey+R to open run then type firefox.exe -chromebug this will run firefox with chromebug
3- for more information visit http://getfirebug.com/wiki/index.php/Chromebug
Please see MDN - Building An Extension - Debugging Extensions, which shows what tools Firefox provides you with to natively debug extension, also take a look at Dive Into Greasemonkey - Debugging User Scripts (PDF, p.13) which is aimed more specifically at your request.
Other than that, see How to debug a Greasemonkey script with the Firebug extension?
On Firefox 19 or later, it's possible to use the built-in JS debugger on the browser itself. Go to about:config and set the following two prefs:
devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true
After you restart the browser, you can access the Browser Debugger through Tools > Web Developer > Browser Toolbox.
(note that you must accept the incoming connection)
See more at: https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript#JavaScript_Debugger
In the bottom right hand corner there should be a little Firebug icon. Single or double click to open then you see some tabs at the top. Click the "Console" tab for real time debugging, or the "SCript" tab to view the scripts that have been loaded. Note, you can also load CSS and HTML through Firebug, use the "Viewer" icon to view HTML code on the page in real time.

Categories