I cannot figure out how to debug my simple extension. Script (a content script) loads (because the first console.log call shows in the tab's console) but then nothing. There's no error what so ever and no second console.log call.
My question is not about solving my code issue (there surely is one, if only firefox would tell me where), it's about finding the place where warnings/errors about the add-on are in firefox (like 'sdfsdf has no object property ...')
about:debugging is no help, the console it can open shows some errors (example: 'Error: Service "domainInfo" is not available. Make sure it appears in the "requiresServices" property of the module's background where is it used.') that have nothing to do with what I'm trying to do (I can tell from the source and nature of errors)
// start of file
console.log('I AM LOADING');
// simple DOM manipulation code here...
console.log('I AM LOADED');
// end of file
The content scripts are supposed to be debugged with the DevTools instance attached to the web page.
However, as you noticed, the errors in the content script are not reported in the tab's Web Console due to a bug. (As of Firefox 70.)
As a workaround you can:
use try..catch with logging,
check the Browser Console (which does show error in the content script)
use the Debugger's "pause on exceptions" option.
Related
I am getting a little desperate here: Almost every time I try to use the Firefox browser tools (FF 66.0.3 on Mac, but has been the same in previous versions) to inspect an element, when selecting any page element to show its code in the inspector, the inspector switches to the javascript debugger, marks an error in the jquery.min.js file (complete first line of three) and causes the browser to hang, i.e. I can still scroll the window, but more or less nothing else (for example no reload, no clicking a link would work etc.)
The debugger shows Error: Permission denied to access property "nodeName". I am doing nothing special, I just use the inspector and try to select any element on the page.
The crazy thing is that this happens on most websites, even here on Stackoverflow, so I suppose some particular browser setting must cause this.
I know this is a vague description and therefore a bit off-topic, but I'd be very grateful for any hints how I could fix this.
You most probably have the "Pause on exceptions" and "Pause on caught exceptions" options set to on:
These will cause the debugger to pause javascript execution whenever an exception is thrown, even though the exception has been caught e.g by a try catch block, like many test codes use.
You can un-toggle these to enjoy a more natural experience or click the play icon to resume the javascript.
I can't remember the last time I had Firebug completely working, but I now have a strong need for it. I'm trying to catch some particularly deceptive JavaScript errors using console debugging and debugger; statements.
For one thing, both Chrome and IE are very easily able to stop upon any JavaScript error - either inside a try/catch, or not. With Firebug, in no unusual circumstances does it simply print the error to the console and continue on. The pause icon on the Console tab is already enabled (tried in both states).
Furthermore, the debugger; statement doesn't do a thing - Firebug completely ignores it in any circumstance.
I can add breakpoints to code files, though that doesn't help my situation. At the moment, even IE10's debugging tools are far more useful to me. I've tried reinstalling Firebug, resetting my settings, and even reverting back to Firebug version 1.11.1. Does anyone have any suggestions?
I'm currently (trying) to develop an app with Worklight Studio 5.0.6 and Dojo (Mobile) 1.8.3. I have a really hard time to to find a proper method for debugging. After waiting 5-10 minutes for the build an deploy-process on the server, an error usually looks like this in the Chrome debugger:
How am I supposed to track down this error in MY source? The whole stack trace consists entirely of Dojo code which generates an absolutely useless error message after 20 abstraction layers.
Seriously, how do you guys handle this in real life? What methods do you use for debugging Dojo-driven apps in the browser?
spyro
For dojo.parse errors, I find it useful to pause the Chrome debugger on all exceptions (the purple icon on your screenshot, should be blue). You usally get more details about the cause of the error, the name of the DOM node being parsed, etc. in the first exception being raised.
Rémi.
Debugging dojo based application should be the same as debugging any javascript application.
Usually I will follow these steps:
add console.log() somewhere in code: this is fast and most of time this is enough.
set breakpoint in debugger: if step 1 is not enough, you can base on error information to set breakpoint before error line, then step in or step out.
comment out recently changes: for some error which is hard to find the error line, for example, parse error in your case, the good way is comment out your recently changes one by one till back to your last working version. Or, return to your last working version, then add code back one by one.
Create a simple application to reproduce the error : if your application is very complicate and it is hard for you to follow above methods, you can try to create a new application which mimics your current application but with simple logics and try to reproduce the error.
Based on experience : Some errors, for example, extra ',' in the end of array which works at chrome and firefox, will report a nonsense error information at IE. Debug these kinds of errors is very difficult, you can base on your experience or do a google search.
Did you provide isDebug: true in your dojoConfig? Also, try to see if the same occurs in other browsers.
Update: I recently discovered that there are issues with Google Chrome and Dojo debugging and I think it has to do with the asynchronous loading of files. As you can see in the provided screenshot of #spyro, the ReferenceError object is blank (which you can notice because of the empty brackets {}). If you want to solve that, reopen the console of Google Chrome, (for example by tapping F12 twice). After reopening the ReferenceError should not be empty anymore and now you can expand that object by using the arrow next to it and get a more detailed message about what failed.
Usually what I do in situations like that is to place a breakpoint inside the error callback (line 3398 in your case) and then look into the error variable ("e").
I am not sure how familiar you are with the Web Inspector, but once you hit the breakpoint open the Web Inspector 'console' and check for the error properties "e.message" and "e.stack" (just type in "e.message " in the console).
Also, during development it is better to avoid Dojo optimization / minification, which greatly improve your debug-ability.
Bottom line is to try to place the breakpoint before the error is thrown.
For development, I'm using coffee-script.js and the coffeescript tag to dynamically compile my coffeescript in the browser. This works great, except that I can't navigate to the compiled javascript from the browser (this is Chrome and Firefox/Firebug). If I explicitly add a debugger call, or set the browser to breakpoint on an exception, it drops me into the compiled javascript just fine, but that seems to be the only way to get at it.
My current technique is to add
setTimeout () -> throw "debug me!"
so the code will throw an exception (within a timeout handler, so it doesn't break out of any shared execution stack), which I can choose to breakpoint or not.
If I breakpoint, it drops me into a source tab called (program):
but this isn't any of the (program) entries in the list on the left panel, and if I close this tab I have no way of getting back to it.
Is there any other way to get to this compiled code?
You can insert debugger in your code, it'll be interpretted as a breakpoint in most browsers.
I use js2coffee.org to get fast preview of my js from coffeescript (just paste it in the coffee to js panel)
I am writing a Google Chrome extension. One of my content scripts has a little bug that I can't find and the Google Chrome debugger appears to be useless for this purpose. The code stops on an Uncaught typeError: Cannot set property 'value' of null. I can see this by opening the debugger and viewing the console after the code fails. But my content script does not appear in the list of scripts shown in the debugger at this point. There are a lot of scripts shown there, including a big block of scripts in light blue. But none named "profile.js" which is my content script.
I tried "location.reload(); but it simply returns "undefined." I'd love to step thru this code and find the problem but I can't figure out how to do it. I've set alerts to try to track the problem but once I click on the alert, the script continues with no opportunity to invoke the debugger. Based on the result of the alert experiment, it appears the code is failing at the very end. I presume the code is finished by the time the error is caught and the script is no longer available to the debugger.
I tried adding this line to the script: "debugger;" to try and force the debugger to open but there is no change whatever to the execution of the code. It fails as usual and as usual I can open the debugger, find the console message and the big list of scripts that does not include mine.
How can I pause execution of the code using a line in the code itself? I just want to stop execution of the code at the beginning, invoke the debugger, set up some breakpoints, resume execution and monitor some variables. That seems like a pretty simple and do-able request.
Any ideas?