How to terminate script execution when debugging in Google Chrome?
Asked Answered
P

12

277

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.

Pigmentation answered 30/10, 2012 at 7:51 Comment(4)
type debugger; into the dev tools console and it will immediately put things into debugger and stop the script.Compensatory
James Gentes's answer seems to be a better solution in 2019Ersatz
Why is everyone talking about stopping the script? This is about terminating/breaking all "following/sceduled" code to come.Harbinger
Agreed Andre: For folks who wish to terminate current execution of Javascript without losing a window - Dan Dascalescu below has the answer.Judd
E
210

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.

Emsmus answered 3/12, 2014 at 1:11 Comment(12)
chrome 48 this will only CLOSE the Dev tool, and not terminate it, reopening it, you can see the program still running (tried setInterval())Caroche
I don't see "Task Manager" under "More Tools" and shift+esc does nothing... (Chrome 50, OSX) Shift+ESC does work under Chrome/Windows though...Siren
Wow—I've wanted this for so long, and it's been there for years! This is the most helpful StackOverflow answer I've seen all year!Ericerica
this doesn't seem to work quite properly when the process is a remote debugging sessionSiren
Note that using the Task Manager to end the process will make the DOM and scripts unavailable for the page (it kills the whole page). If you want the page to remain rendered and scripts to remain available, you'll have to stop the script using an error (see my answer). A clever enough error will keep the page fully functional; it will just stop whatever bad loop you happen to be in.Tantivy
If you terminate a Chrome extension (they all show up in the Task Manager), you'll get a balloon saying the extension has crashed. You'll need to click that message to reload the extension so you can continue debugging it.Wasteland
On Macintosh (Chrome v.63) this option shows under the "Window" menu, in the third group. There is no keyboard shortcut evident.Nickolas
This will kill the tabFootboard
James Gentes' answer from 2018 is the simpler solution now.Ersatz
this will close dev tools for me and continues the script.Harbinger
How does this answer have so many upvotes? It's terrible for a few reasons: 1) It KILLs the tab, not just stop the script so you could continue interacting with the page. 2) It kills OTHER TABS from the same domain that share the process. 3) If you have many tabs open, it's not easy to find the one you want to kill.Cannula
The CPU is still at 100% even when the process is killed imgur.com/yKb2qNi (Chrome 86.0.4240.193)Withe
B
164

As of April 2018, you can stop infinite loops in Chrome:

  1. Open the Sources panel in Developer Tools (Ctrl+Shift+I**).
  2. Click the Pause button to Pause script execution.

Also note the shortcut keys: F8 and Ctrl+\

enter image description here

Brigham answered 11/8, 2018 at 17:51 Comment(11)
Such a hidden gem on that UI.Nagpur
The answerer has a key to the secrets of the Universe.Rett
The shortcut is particularly useful when you have an endlessly running script you want to stop to check the console. Thanks.Commiserate
@DanDascalescu I have Chrome 80.0.3987.149 and it looks the sameBrigham
Maybe we're looking at the button in different states of execution? Mine is that I picked the body element here on SO, set a "break on -> subtree modifications", then clicked wherever. The button looks like in the screenshot I posted.Cannula
Interesting, I just hit F12, go to the Sources tab, and the pause button is right there. It's also important to note that the shortcut keys remain the same, so probably inaccurate to say this no longer worksBrigham
that button in node debugging is just to pause on exceptionsRsfsr
In my case, that is using requestAnimationFrame(), Chrome keeps working so the CPU usage is at 100% regardless the script is paused.Withe
This pauses code execution. When you hit a breakpoint, the code pauses and you enter debug mode. Thus, in debug mode, the code is already paused. How do you terminate the paused thread?Flittermouse
@TravisBemrose that would make for a good new question on SO :)Brigham
@JamesGentes NEW question? That's literally a restatement of this question, which doesn't seem to have a good answer. People are answering 'how to pause' execution or 'how to enter debug mode'. The question is how to exit debug mode without resuming.Flittermouse
C
105

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:

Stop script execution in Chrome DevTools

Cannula answered 31/3, 2020 at 13:14 Comment(8)
i dont see the stop iconRsfsr
it only says resume script execution, should I report in chrome bugs?Rsfsr
@Rsfsr You have to press that play/pause and wait for the dropdown to come and then drag cursor to stop icon and then release.Cesya
I wish I could upvote more than once! This is the real answer to the OP's question, at least until Chrome updates again and [re]moves this feature...Bosco
Perfect! is there a keyboard shortcut for this as well?Only
For some reason when I "stop" the execution from a source snippets script, while it surely works, stops it, but it somehow breaks the environment or something, idk. I cannot re-run the same script on the context, but no way around but closing the devtools/tab. is this a bug...???Holmquist
@Amit K Khanchandani, Yes, F8 is the keyboard shortcut.Mannered
so hard to find this.. thank uMoonlight
T
39

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.

Tantivy answered 31/12, 2013 at 18:26 Comment(7)
you have to delete a function or an object such a nasty hack! (in the UI it would fit nicely as kill all button)Dispraise
It is pretty nasty, but I can't think of another way.Tantivy
Year later I'm returning to the same question... And I cannot figure it out! Is there a way to make it more generic?Dispraise
You can't figure out how to terminate the script execution? I've always been able to do this. Do you have an example that doesn't let you kill the script this way?Tantivy
I do, @juacala, if you wouldn't mind helping me with it. I'm running a simple script that automatically clicks the See Older Messages link on a Facebook message thread. This is the whole of the code: setInterval(function () { document.getElementById('see_older') .getElementsByClassName('content')[0].click(); }, 250); How would I kill that script using your method? I'm no newbie to JavaScript, but completely new to the consoles, and would really appreciate any help.Inger
@Hashim, you need to be able to put a break point inside the function. So make sure that the inside of the function is on a separate line from the function definition. In your case, you'll need to in the console, once it's paused, type "document.getElementById('see_older').parentNode.removeChild(document.getElementById('see_older'));". This is because you don't have anything in javascript to break on. Unfortunately, this changes the HTML too. If you can change the code to "var el = document.getElementById('see_older');\n el.getEl..." then you can just do "delete el;" and that will stop it.Tantivy
I landed here looking for a way to do this in Firefox - this answer did the trick.Indecision
E
9

[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)

Eolith answered 17/4, 2017 at 20:46 Comment(0)
S
5

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.

Sycophancy answered 30/5, 2017 at 9:15 Comment(2)
If you downvote because you're confused between Developer Tools menu and Chrome menu it is very sad :(Sycophancy
Didn't work for me. I checked the Disable JavaScript box, but the script just keeps on running.Suddenly
H
4

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

Hectorhecuba answered 30/10, 2012 at 8:8 Comment(7)
Did I help? It seems that there is not a terminate option, but in order to prevent the execution of the following code you can either comment it before or delete the following code/call "live" within the Chrome debugger (this latter option will make the continue button behave like a terminate). I know they are not ideal solutions, but I think they are the most acceptable ones. Any comments?Jallier
In many cases, the code that needs to be prevented from executing is up the call stack (the functions which will get control after the current function returns). Sure, I can go and edit functions up the call stack, and then find and edit all functions which might be called asynchronously. I am sure, it must be a trivial thing for a browser to refresh a page with the script still in the paused state IF it was paused at the time the Page Refresh button was pressed. I also think that it should be an expected behavior for any browser (unfortunately, it's not).Pigmentation
Actually I found a workaround to achieve the termination of the script execution!: In chrome, I open the debugger to debug one of my applications and I set a breakpoint. I run the page. The execution pauses at the breakpoint. Then I examine the problem and realize what is causing the bug. To terminate the execution I click in the X button next to the URL (to stop the page loading) and then, when continuing the script (F8) it will terminate. Rather easy way to achieve it, I think. What do you think about this one?Jallier
The X button in Chrome is replaced with Refresh button after a page has loaded so there is no way to press X afterwards (I have also tried it in IE which does have X available all the time, but it invariably freezes). I have also tested your suggestion during page load and found that the script does not terminate after pressing X and then F8. It's likely that the scripts that have not been yet loaded into the browser at the time X was pressed are not loaded afterwards but that should be evident.Pigmentation
Oh you are right, it was a quick test and was non-representative... Then it seems that there is no solution.Jallier
F8 means "resume execution". So if the script is not stopped by an exception, it will continue from the current line.Andel
Yes you can.Cannula
C
2

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 "/"

enter image description here

Crosswise answered 2/10, 2017 at 17:54 Comment(0)
C
1

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 :).

Crinite answered 10/11, 2017 at 16:26 Comment(1)
There's a better way.Cannula
A
0

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.

Alcantar answered 20/4, 2019 at 8:32 Comment(2)
What if you (hopefully) don't use jQuery?Cannula
then use pure Javascript, like document.addEveneListner.. to get the keydown event..Alcantar
E
0
  1. Go to the Sources tab and select Filesystem subTab

Add folder screenshot

  1. Select a folder, containing the file you execute
  2. Accept folder access recuest
  3. Select the file you execute

Select file screenshot

  1. Put a breakpoint inside the file you execute
  2. Click the "Pause script execution option"

Breakpoint and pause screenshot

  1. Select the copy link address option in the RMB context menu

Copy link address screenshot

  1. Paste the copied address into the browser address bar to open the file
  2. File execution will be stopped at the breakpoint
Ecosystem answered 17/9, 2022 at 23:18 Comment(0)
J
-1

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.

Jackijackie answered 11/5, 2016 at 2:28 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.