I've been working on a Chrome extension and I have a minor annoyance with debugging my scripts. My background page is a Javascript file and it is always minified automatically by Chrome. You can see how this becomes a pain to use the developer tools on because everything is on a single line. Anyone know if this can be disabled?
To view your Chrome extension source normally:
1 open Chrome's extension management page
2 make sure developer mode is checked
3 click link after inspect views to open extension files in chrome developer tools window
4 click link to included script file in background page to view background script
Perhaps this is relevant.
http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/
The ability to Pretty Print ( a.k.a. unminify ) JavaScript source
Sometimes I'm trying to figure out a bug and unfortunately the JavaScript that was included has been minified. As you are aware trying to debug a minified file is nearly impossible. How do you set a break point on a line that is a bazillion characters long?
Thankfully Chrome has a Pretty Print feature that will take a minified JavaScript file and format it property. All you need to do is to click the "{ }" icon on the bottom toolbar to activate this feature. Of course the names will still be obfuscated ( depending on what program minfied the JavaScript in the first place ), but you will at least be able to set break points and debug the code.
Related
I use the minor tag of StealJS to load my JS files and everything seems to work, but today I recognized that I'm simply unable to debug my code in IE 11 and Firefox 36. Until now I only used the new Opera based on Chrome/Blink, currently version 27, which works pretty well regarding debugging. But:
Firefox's built in dev tools don't show my JS files at all. They only show steal.js and directly afterwards a greyed out line called "evals" with two additionals lines of two JS libs I use and export in stealconfig.js.
Firefox's Firebug shows my files and I can set breakpoints, but there seems to be some errors, because if I set/unset the breakpoint there's a little animation shown which never finishes. If I reload the page the usual breakpoint icon, a red circle, is shown, so it looks like the breakpoint has been set successfully, but the code simply doesn't stop on the breakpoint. But it is run, because the functionality implemented at the break point is usable.
In IE 11 my JS files are shown in the "dynamic scripts" tree and I can set breakpoints as well, but everytime I reload the current page the icon for the breakpoint changes and gets some defect triangle with a warning sign, just like the breakpoint won't work anymore or such. And of course IE doesn't stop the code as well after I reload the page and if I open my JS file the breakpoint is not shown anymore, which at least works in Firefox's Firebug.
None of those problems happen in Opera/Chrome, I always see all my files, can set breakpoints and the code stops as expected. Additionally all browsers show individual requests for my JS file, nothing is bundled into one big one or such, it's all independent files during development.
So is StealJS and how it loads files simply incompatible with the other browsers? Do they need to add support for how Steal handles file loading? I used a former version of Steal with JavaScriptMVC and none of these problems occured with that version.
Looks like those are browser issues, so go and write bug reports.
https://github.com/stealjs/steal/issues/419#issuecomment-99059303
I am trying to use the new feature of chrome devtools "blackboxing a script".
This Chrome Devtools article lists script blackboxing functionality
What happens when you blackbox a script?
Exceptions thrown from library code will not pause (if Pause on
exceptions is enabled)
Stepping into/out/over bypasses the library code
Event listener breakpoints don't break in library code
The debugger will not pause on any breakpoints set in library code.
The end result is you are debugging your application code instead of third party resources.
I have tried to blackbox the file directly by right clicking the file from source tab and everything goes right the yellow notification shows at the top of file "This script is blackboxed in debugger". Strangely none of the above listed points work, debugger goes through blackboxed script also event listeners reference the blackboxed script. I have also enabled Developer Tools experiments at chrome://flags/
With these options set i thought i would have been ok, i also have the latest chrome at this time 39.0 beta,i have no idea what i'm missing. Did anybody go through this?
Thnx!
I had the same issue. One quick and easy way is to look at your Call Stack. As a for instance, Right-Click on one of the 'jquery' functions and select 'black box' from the menu. Nothing else needed. In this example jquery.js will be step-over from that point on.
In your screenshot, I can see a breakpoint.
If you put a breakpoint, it will always break (except if you deactivate it, of course), even with blackboxing being active.
Had the same issue and used good old
have you tried turning it off and on again?
Go to developer tools settings -> Blackboxing -> Remove all entries one by one + disable Blackbox content scripts
Blackboxed again and after that this works fine.
I'm trying to find a way to view the generated source using IE 10. With the Chrome dev tools and Firebug I can see the HTML source post JavaScript/AJAX operations but in IE 10 the view source command and dev tools both only show the downloaded source.
I'm building a single page javascript web app and am running into an issue in the generated source that only happens in IE. Using something like ChromeFrame or punting on the issue is not an option. I need to find and fix the root issue that is causing it in IE.
Do you all know of a different set of dev tools or a toolbar that is produced for IE 10 that will allow me to inspect this elusive generated html?
Thanks!
Just press F12. If the DOM was manipulated via AJAX, you'll need to use the blue refresh button per the comments below.
I use alert(document.documentElement.outerHTML) to achieve this
Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?
Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.
With Chrome Developer tools, this is super easy.
Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.
If you watch this talk but Paul Irish, he shows how you can edit a script on the fly
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
also good:
http://blip.tv/jsconf/jsconf2011-paul-irish-5382827
If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.
Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.
I want to debug a javascript file that is embedded in the HEAD element.
I navigate to the site, see the code, and make a breakpoint:
(source: deviantsart.com)
But when I click on Reload, the script disappears and it doesn't stop at the breakpoint:
(source: deviantsart.com)
Debugging was working earlier so I know it works in general. What do I have to do so that Firebug always debugs my script?
I've noticed this behaviour before as well. It seems that it can happen if you refresh the page while the debugger is running (i.e. after you've hit your breakpoint and are stepping through code). This is far from conclusive, just something I've casually observed over time.
Also, I try to avoid having multiple tabs open with firebug active, as it seems to get confused.
Edit: just thought I'd add that I've seen this manifest itself in a few different ways:
the external script file does not appear at all in the scripts panel.
the external script file appears but firebug doesn't "see" it. You know this has happened because the line numbers beside the code where a breakpoint can be set won't be highlighted (used to be green but now appear to be just a darker shade than other lines). I've seen this happen with inline javascript on a HTML page (horrors!) as well.
the external script file is there, but you can only see a single screen full of code. Where "screen full" is the firebug panel viewport.
shut down firefox and then restart. sometimes firebug gets confused. also make sure you have the latest version.
You need activate the script tab
I'm not sure that having a <script> inside <head> (as opposed to, inside <body>) is actually legal HTML. If it's not, as I suspect, you can't fault Firebug for not supporting it well...!-)
The bugs in script processing that I know about are 1) jquery dynamic loading of scripts fails, 2) new Function() cannot be seen, 3) some kinds of document.write() cannot be seen.
Firebug processes script files in series with Firefox. This means that Firebug must be active when the page loads and it means that any exception in the path will cause the files to be mis-processed. If you opened firebug before loading and you still see problems, then the most likely fix is to install Firebug in a new Firefox profile. This causes you to get a completely fresh set of default options and you run Firebug without other extensions. As you re-add other extensions, look for problems in seeing scripts: then maybe you will discover what extension is interfering with the code path for processing scripts. I know this is a pain in the neck, but so is JS debugging without source ;-). We are working on testing with more Firebug and Firefox extensions installed to try to reduce these problems.
In our case it was the bundling of JS files.
It is not only FireFox, it is same for Chrome.
We moved the file out of the bundle and put it on the page where it needed to be referenced and it started working like charm.