1. 技术文章
  2. How to terminate script execution when debugging in Google Chrome?

How to terminate script execution when debugging in Google Chrome?

由 非 Y 不嫁゛ 提交于 2019-11-28 02:53:10
Alexander K

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:

  1. Open the Sources panel.
  2. Click Pause. The button changes to Resume Script Execution.
  3. Hold Resume Script Execution then select Stop Current JavaScript Call.
juacala

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.

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
  • Settings
  • 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

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)

cssyphus

You can do it, but you must prepare your code first.

Instructions for halting script execution in Google Chrome Dev Tools:

(1) Prepare your code first, by creating a global variable: 

var devquit=0;
$(document).ready({
    //the rest of your code

(2) Any place where you may wish to quit, test the value of this variable:

//Lotsa code
if (devquit > 0) return false;

(3) Pause execution of script on-or-before the above test line(s)

(4) Switch to console

(5) Type:

> devquit
0
> devquit=1   <=== only this line is necessary
> devquit
1

(6) Continue script execution. Script will return false when it executes the test from step (2) above

Notes:

(A) This trick works with global variables and objects, but it will not work with local variables. Note that this:
newVar = 'never used before';
creates a new property of the window object (works with above trick), whilst this:
var newVar = 'never used before';
creates a local variable (does NOT work with above trick!)

(B) So, you can still use this trick with already-running code if you have either a global variable or an object that will return false if it has a given value.

(C) In a pinch, you can use juacala's trick and delete an element from the DOM (on the elements tab) that will cause a javascript error. For example, suppose you have code var cartype = $('#cartype').val(); If you delete the element with ID=cartype before that line of code, then the js will break on that line. However, the element will still be missing when you try to re-run the code. The trick described above allows you to run and re-run the code ad infinitum.

More notes:

(a) Insert breakpoint into code: just type debugger; on a line by itself. If DevTools is open, the script will jump into debugger at that point. If DevTools not open, code will ignore statement.

(b) Want to avoid jumping into the jQuery library when debugging code? Blackbox it. See blackbox instructions for Chrome - or - for Firefox

Gratitude (please visit and upvote):

Javascript Debugging line by line using Google Chrome

Is it possible to change javascript variable values while debugging in Google Chrome?

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

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.

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

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.

Most of the time I'm looking to stop a loop or timer that is changing elements on the page and preventing me from inspecting them...

Most of the time it's using jQuery so I just use:

delete jQuery

标签
javascript
debugging
google-chrome-devtools
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!