I have a very simple script that lazy-loads javascripts at runtime. There are unknown dependencies on each page, so they are not all loaded until needed.
Like most frameworks, this works by adding a script tag to the document head.
Everything executes fine, but the Safari debugger neither sees the new script tags in the "Elements" inspector, nor shows them in the "Scripts" tab. Errors are reported as occurring on the root document, rather than the proper script.
An obvious workaround is to author and debug everything normally, and then add the dependency loading as a last step. But I would love to know if there is there a better way to lazy-load scripts that makes the debugger happier?
Safari has a setting in the Script tab to pause on exceptions, giving you an interactive debugger at the point in code whenever an exception is thrown, or alternately, only on unhandled exceptions.
It looks like a little octagon with two vertical bars. It's a tri-state button, and the tooltips summarize each state's functionality.
I know that if you lazy load scripts with eval then the firebug debugger has a hack to get at the script.
Normally lazy loaded script can not be accessed from the debugger. You should hard link it and add the lazy loading for production.
Related
When debugging JavaScript code using Chrome Developer Tools the debugger pauses on code where breakpoints are not set. I don't have the Pause on exceptions feature enabled, and there definitely are not breakpoints set (see attached image).
I asked a similar question before which was helpful but didn't quite solve this issue (previously I had the Pause on exceptions enabled). In the example below I swapped out the minified version of kendo.all.min.js for the unminified version, which allows me to see where the script execution is being paused, but I don't know why it is being paused. This happens a lot with jquery.min.js too.
I fixed my breakpoints problem by clicking the "Restore defaults and reload" button located in the “Settings” section. To find the button: In Developer Tools click the cogged wheel next to the top right three vertical dots. (Note: If using older versions of Google Chrome, click on the top right three vertical dots and then select “Settings F1”). The button “Restore defaults and reload” is at the bottom right.
Also note that it really restores defaults - you lose all previously saved breakpoints and any files you have open in Developer Tools will be closed.
I got this solution from: Chrome javascript debugger breakpoints don't do anything?
Accepted answer to Import/export Chrome devtools breakpoints & settings between computers reminded me to check "devtools-on-devtools" and in the DevTools' inner Application Local Storage remove the faulty element(s) of the JSON list value for key breakpoints to fix my same issue without resetting everything.
Later it happened again, so I wrote this console snippet:
((stores, matchKey, removeMatchingRegExp, dryRun)=>{for(let store of stores){
let r = JSON.parse(localStorage[store]), l = r.length;
r = r.filter(b=>!b[matchKey].match(removeMatchingRegExp));
if(!dryRun) localStorage[store] = JSON.stringify(r);
console.log(`${dryRun ? 'Would' : 'Did'} remove ${l - r.length} entries from ${store}:`, r)}; return 'OK'})
(['breakpoints', 'domBreakpoints'], 'url',
new RegExp('^https?://example.com/script.js$'), true)
Note:
Provided without warranty: Use at own risk. Backup your data.
Edit it - at least the RegExp argument - to suite your needs.
The last-most boolean should be false to disable dryRun.
Outer DevTools must be reopened for effect.
I was able to resolve this by updating Chrome. I don't think the version matters, just the process of updating resets all of the breakpoints that have been stored in the cache.
F8 has two functionalitys. 1. Skip ot next Breakpoint, 2.stop wherever the Browser is executing code. This works even if you have no breakpoint set. For example spamming F8 when you forgot to deactivate breakpoints might cause the browser to stop anywhere.
When you go to the debugger shortcuts you can see that F8 has the functionality to Pause / Continue. But it sadly seems like you can't split them on two different keybinds.
Since I know this feature I never ran into this "bug" anymore.
I'm posting this answer in case it will help someone who, like me, missed an important clue as to the cause of the phantom breakpoint behavior. In my case, it was "user error" --mine. The root cause was a forgotten "debugger;" statement in a JavaScript file that was itself generated from TypeScript. I had removed the debugger; statement from TypeScript locally, run and tested without issue from localhost. But I had pushed the version with the statement to remote and it built and released to our dev site with the statement present. The dev site build excludes the TypeScript source files. When the debugger statement was hit, Chrome tried to load the .ts source and displayed "Could not load content..." I just assumed it was at a breakpoint (I'd set many during testing). And when I saw "No breakpoint" I assumed Chrome was experiencing the issue addressed in this thread. If I'd bothered to look in the Call Stack trace, I would have seen the source code line in the .ts file and pretty quickly figured it out. Here's a screenshot:
just disable the cache and reload the page, the breakpoints will show up again
Using Head.js (0.9) and verifying the loading of scripts from IE9, the Network pane of IE9 developer shows that the javascripts are loaded twice.
First time, the script is loaded with HTTP result code 200, thereafter the same script is reloaded with result code 304 (not modified).
However, the script pane and the script block drop down displays the scripts as being loaded twice. This in turn makes one of the scripts (sIFR.js) resetting its global sIFR object.
I'm suspecting the double-loading is causing this.
Note: Chrome and Firefox both work as expected.
Anyone else having seen this odd behaviour?
I'm not that familiar with IE-10 and I'm trying to troubleshoot some code using the F12 tools. I can't find a way to debug ( i.e. set break points, etc. ) in a script that is Ajaxed in, and then append to the DOM.
I can download it more conventionally using <script> but not changing things would be a bit easier. Is there a way to do this?
The simplest way I can think of would be the temporarily add a debugger; command at the top of the dynamically added script file. That will cause it to drop into the debugger as soon as that script starts to execute. Once it drops into the debugger, you can set breakpoints in the now-loaded script that hasn't yet executed.
When loading a JavaScript block via Ajax, the response is returned ok, but when viewing it in the code in Firebug (1.9.1) in the Script tab, it appears without any newlines. It's extremely difficult or impossible to set breakpoints anywhere.
Is there a way to get Firebug to preserve the newlines?
I don't think so, but Chrome's developer tools unobfuscator may do what you want (http://www.sagarganatra.com/2011/06/de-obfuscating-javascript-code-in.html).
However, if you load in your script blocks by adding a script tag to the page and changing its source to point to the relevant script file the eval function isn't used and firebug should display the script with line breaks included.
Found a fix for Chrome.
Simply add the following snippet to where you want to debug:
try{ throw Error() } catch(e) {}
and click the "Pause on all Exceptions" button in the Chrome Scripts console tab. Then simply hit F8 until you reach your try block.
Works like a charm. :)
I'm new to Firebug and having a lot of trouble.
JavaScript files usually show up empty, or load partially (some of the time)
Lines are not available to set breakpoints on frequently (line numbers are greyed out)
When I do set breakpoints, script execution often does not stop on them
I'm using Firebug 1.3.3 and Firefox 3.0.11. I have disabled all other Add-ons. I'm loading Javascript from localhost. Sometimes closing the window and re-opening the page I was on clears things up, but that never lasts for more than a couple page loads.
I'm working on learning jQuery, which obviously has a huge library, but I imagine many other people use Firebug for the same, so that shouldn't be a problem. Also, most of the time (but not always), Firefox loads and executes the JavaScript no problem; just Firebug can't see it.
Due diligence:
These discussions seem to cover the same problem, but have no answers:
"Firebug not showing Javscript errors" - http ://groups.google.com/group/firebug/browse_thread/thread/443848cd11be48e1?pli=1
"firebug does not always load javascript" - http ://code.google.com/p/fbug/issues/detail?id=1644&q=empty%20javascript&colspec=ID%20Type%20Status%20Owner%20Test%20Summary
(Sorry I'm new, and not allowed to hyperlink those)
A couple suggestions. Make sure that you have the console, net, and script panels of Firebug all turned on.
You should see in the net panel what js files have downloaded. In the console panel, you should be able to type console.log(jQuery) and get back function().
This should confirm that jQuery is actually loaded and running.
Then go to your script panel, and you should see four options across the top. Inspect, Edit, Static, and then a drop down list of your scripts. That's the one you want. Select the script that you want to debug.
Based on your question, you probably know some of this already, but confirm that all of that is working first.
When you don't see jQuery in the scripts list, can you do console.log(jQuery)?
PS. It's not a matter of size. I routinely load js files that are 10x the size of jQuery.
Edit: A few more suggestions:
1) Reduce to simplest case and add back. Remove all your scripts other than jQuery and then add your other scripts incrementally. Is there one that consistently breaks it.
2) Put try / catch statements around suspicious code blocks. I've often found that FB stops reporting errors after an uncaught exception has been thrown.
try {
// your code here
} catch (e) {
console.log(e)
}
3) Setup another FF profile to test if you get the same problem.