When stepping through JavaScript code in Google Chrome debugger, how do I terminate script execution if I do not want to continue? The only way I found is closing the browser window.
Pressing "Reload this page" runs the rest of the code and even submits forms as if pressing F8 "Continue".
UPDATE:
When pressing F5 (Refresh) while a script is paused:
Google Chrome (v22) runs the script. If the script submits HTTP request, the HTTP response for that request is displayed. The original page is not refreshed.
IE 9 just freezes. However IE has an option "Stop Debugging" which, when pressed (provided you did not press F5 earlier), continues to run the script outside debugger.
Firebug behaves identically to Chrome.
Closing and then opening again the browser window is not always the next easiest way
because it will kill browser session state and that may be important. All your breakpoints are also lost.
UPDATE (Jan 2014):
Refresh while debugging:
Chrome v31: lets scripts to run and stops on further breakpoints (but does not submit ajax requests), then refreshes.
IE 11: refresh does nothing, but you can press F5 to continue.
Firefox v26: lets scripts to run but does not stop on further breakpoints, submits ajax requests, then refreshes.
Kind of progress!
Navigate to the same page while debugging:
Chrome v31: same as Refresh.
IE 11: scripts are terminated, new browser session is started (same as closing and opening again).
Firefox v26: nothing happens.
Also juacala suggested an effective workaround. For example, if you are using jQuery, running delete $ from console will stop execution once any jQuery method is encountered. I have tested it in all above browsers and can confirm it is working.
UPDATE (Mar 2015):
Finally, after over 2 years and almost 10K views, the right answer was given by Alexander K. Google Chrome has its own Task Manager which can kill a tab process without closing the tab itself, keeping all the breakpoints and other stuff intact.
I even went as far as BrowserStack.com to test it in Chrome v22 and found that this was working this way even at that time.
Juacala's workaround is still useful when debugging in IE or Firefox.
UPDATE (Jan 2019):
Chrome Dev Tools at last added a proper way to stop script execution which is nice (although a bit hidden). Refer to James Gentes's answer for details.
In Chrome, there is "Task Manager", accessible via Shift+ESC or through
Menu → More Tools → Task Manager
You can select your page task and end it by pressing "End Process" button.
As of April 2018, you can stop infinite loops in Chrome:
Open the Sources panel in Developer Tools (Ctrl+Shift+I**).
Click the Pause button to Pause script execution.
Also note the shortcut keys: F8 and Ctrl+\
2020 April update
As of Chrome 80, none of the current answers work. There is no visible "Pause" button - you need to long-click the "Play" button to access the Stop icon:
One way you can do it is pause the script, look at what code follows where you are currently stopped, e.g.:
var something = somethingElse.blah;
In the console, do the following:
delete somethingElse;
Then play the script: it will cause a fatal error when it tries to access somethingElse, and the script will die. Voila, you've terminated the script.
EDIT: Originally, I deleted a variable. That's not good enough. You have to delete a function or an object of which JavaScript attempts to access a property.
[2022 edit: this was reported as https://bugs.chromium.org/p/chromium/issues/detail?id=774852 and https://bugs.chromium.org/p/chromium/issues/detail?id=1112863 in 2017, and was just recently marked as fixed 5 years later, so if you are still experiencing this, you should update Chrome (and in general keep it updated). If you are experiencing this issue in 2023 or forward, it may be a different issue, a bug regression, etc.]
If you are encountering this while using the debugger statement,
debugger;
... then I think the page will continue running forever until the js runtime yields, or the next break. Assuming you're in break-on-error mode (the pause-icon toggle), you can ensure a break happens by instead doing something like:
debugger;throw 1;
or maybe call a non-existent function:
debugger;z();
(Of course this doesn't help if you are trying to step through functions, though perhaps you could dynamically add in a throw 1 or z() or somesuch in the Sources panel, ctrl-S to save, and then ctrl-R to refresh... this may however skip one breakpoint, but may work if you're in a loop.)
If you are doing a loop and expect to trigger the debugger statement again, you could just type throw 1 instead.
throw 1;
Then when you hit ctrl-R, the next throw will be hit, and the page will refresh.
(tested with Chrome v38, circa Apr 2017)
Refering to the answer given by #scottndecker to the following question, chrome now provides a 'disable JavaScript' option under Developer Tools:
Vertical ... in upper right (in Developer Tools menu, not in Chrome main menu)
Settings (in newer Chrome versions it is visible separately as a cogwheel besides the ... button, not under it)
And under 'Preferences' go to the 'Debugger' section at the very bottom and select 'Disable JavaScript'
Good thing is you can stop and rerun again just by checking/unchecking it.
Good question here. I think you cannot terminate the script execution. Although I have never looked for it, I have been using the chrome debugger for quite a long time at work. I usually set breakpoints in my javascript code and then I debug the portion of code I'm interested in. When I finish debugging that code, I usually just run the rest of the program or refresh the browser.
If you want to prevent the rest of the script from being executed (e.g. due to AJAX calls that are going to be made) the only thing you can do is to remove that code in the console on-the-fly, thus preventing those calls from being executed, then you could execute the remaining code without problems.
I hope this helps!
P.S: I tried to find out an option for terminating the execution in some tutorials / guides like the following ones, but couldn't find it. As I said before, probably there is no such option.
http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C
http://www.nsbasic.com/app/tutorials/TT10.htm
You can pause on any XHR pattern which I find very useful during debugging these kind of scenarios.
For example I have given breakpoint on an URL pattern containing "/"
If you have a rogue loop, pause the code in Google Chrome debugger (the small "||" button while in Sources tab).
Switch back to Chrome itself, open "Task Manager" (Shift+ESC), select your tab, click the "End Process" button.
You will get the Aww Snap message and then you can reload (F5).
As others have noted, reloading the page at the point of pausing is the same as restarting the rogue loop and can cause nasty lockups if the debugger also then locks (in some cases leading to restarting chrome or even the PC). The debugger needs a "Stop" button. Nb: The accepted answer is out of date in that some aspects of it are now apparently wrong. If you vote me down, pls explain :).
Go to the Sources tab and select Filesystem subTab
Select a folder, containing the file you execute
Accept folder access recuest
Select the file you execute
Put a breakpoint inside the file you execute
Click the "Pause script execution option"
Select the copy link address option in the RMB context menu
Paste the copied address into the browser address bar to open the file
File execution will be stopped at the breakpoint
Open the source tab in 'Developer Tools', click on a line number in a script that is running, this will create a breakpoint and the debugger will break there.
There are many appropiate solution to this problem as mentioned above in this post, but i have found a small hack that can be inserrted in the script or pasted in the Chromes console (debugger) to achieve it:
jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
This will cause execution to be paused when you hit F12.
Related
I am debugging some code on the MS Edge browser, but it reloaded twice and showed a "This page is having a problem loading" message after two tries. The page has been tested on IE11 or lower, Chrome, and Firefox with no issues.
I have been having trouble bringing up the debugger during page execution by placing the debugger statement in various parts of the code. I have placed it in the first line of the script in the body tag, I have placed it in the first line of $(document).ready(); and even in the script tag in the header. I am so surprised when none of the debuggers triggered other than the one in IE11 (both Chrome and Firefox did not trigger either). Edge of course still continued on its reload loop and saying that it has a problem loading.
My question is - am I not doing this right? Is there a list of when a debugger; statement will not trigger? And more importantly, how do I trigger it in Edge before it reloads twice and throw the error page (For reference, pulling up F12 after it throws the error page gives the DOM of the error page, which is not helpful.)
This is an issue with Edge where the console seems to crash along with the browser. I have noticed it numerous times during development and have not been able to find a solution.
Check in every other browser on an empty cache and see if you are getting any errors in console. Older versions of Edge, before the last service pack were very flakey so I would suggest making sure your environment is upto date.
I'm debugging some 3rd-party minified Javascript that somewhere is triggering a browser page refresh. However, I can't figure out what part of the code is causing the refresh.
Is there a way to put a breakpoint in Chrome that will be hit just before a page refresh so I can inspect the call stack to see what caused it?
Try this:
Open your Chrome Dev Tools
Navigate to the "Sources" tab
On the right panel, expand "Event Listener Breakpoints"
Expand the "Load" tree
Check the beforeunload and unload options
See if that helps; screenshot below.
Edit: Alternately, if that doesn't work, you can use Chrome to search all loaded scripts for the code that might be responsible. There's apparently a lot of ways to refresh the page with JavaScript but they mostly have a few common strings like "navigator", "location", "reload", "window".
Finally, if there's a link to the same page you are on, it's possible some JS is triggering a click on it-- unlikely, but worth exploring if nothing else has worked thus far...
(Please excuse the formatting as I'm on mobile...)
NOTE: It seems occasionally, for reasons I don't yet fully understand, this solution fails to actually cause the debugger to pause; in this situation, I found that thorn̈'s answer to this question did the trick for me.
In Firefox (not Chrome, it's important; UPD 2020: it now works in Chrome as well) Developer Tools, go to the console, enter addEventListener('beforeunload',()=>{debugger}), and execute your code. After the debugger stops at the debugger statement, look at the call stack. You'll see what triggered the event. Chrome didn't have it there.
At least, this worked for me.
In the devtool, network pane, toggle the "Preserve log", carefully check the initiator column.
You don't specify what's the 3rd party library does.
If it is a ui component like an ad or something similar, just place it inside an iframe with the sandbox attribute configured as you need.https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe (Scroll down to the sandbox attribute section)
If it is something triggered by an event, just use (in chrome dev tools only) the getEveneListener() function and follow the listener trail... (hard, but possible)
Example:
The listener property will lead you to the actual functions that will be invoked. You can than search them in the obfuscated code and add debugger to understand it's purpose.
There are many other scenarios - if you can specify more.
I have a web page which references a lot of JS file. There is one JS file in which the code is throwing unhandled exception and because of this other functionality not working.
So is there any way in IE developer tool to prevent that script from execution.
The easiest way is to comment out the offending code.
If that is not an option, you can:
Set a breakpoint on the code that is throwing the error
When the breakpoint is hit, right-click on the next error-free line.
Select "Set Next Statement"
Continue Execution (F5)
If you have any feedback on the F12 tools, Let us know!
You can suggest changes and vote on suggestions here: https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/category/84475-f12-developer-tools
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.
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.