Chrome javascript debugging checkpoints do nothing?

Question

It seems like I can't understand the Chrome debugging tool.

I have a chrome version of 21.0.1180.60 m.

The steps I took:

• I pressed ctrl-shift-i to open the console.
• By clicking on "Sources", select the appropriate javascript file that I want to debug.
• I set breakpoints where I want the code to stop by placing a blue tag on the gutter next to the line to the left.
• I clicked a button on my webpage (which is a php-provided page) that initiates javascript code.
• The code completed successfully without stopping.

I also noticed that Watch Expressions do not work either. He keeps telling me that the variable I want to see is undefined.

Further testing revealed that this is my code causing the loss of a breakpoint. It does not seem to work on "$ (" # frmVerification "). Submit (function () {" line. It does not go to breakpoints inside this function ().

Below:

//function to check name and comment field var test = "this is a test"; var test2 = "this is another test"; function validateLogin(){ //if(userEmail.attr("value") && userPass.attr("value")) return true; //else //return false; } //onclick on different buttons, do different things. function ajaxRequest(){ } $(document).ready(function(){ //When form submitted $("#frmVerification").submit(function(){ var username = $("#username"); var token = $("#token"); var action = $("#action"); var requester = $("#requester"); if(validateLogin()){ $.ajax({ type: "post", url: "verification.php", data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(), success: function(data) { try{ var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible if(jsonObj.length > 0){//if there is any error output all data var htmUl = $('<ul></ul>'); $.each(jsonObj, function(){ htmUl.append('<li>' + this + '</li>'); }); $("#errOut").html(htmUl); }else{ alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first."); window.location.replace("home.php"); } } catch(e){//if error output error to errOut] $("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>"); } } }); } else alert("Please fill UserName & Password!"); return false; }); }); 

Answer 1

I'm not sure why your breakpoints do not fall, but one sure way to get into your code is to print

 debugger; 

where you want the code to be stopped and then run again with the Chrome toolbox open.

---

Just one little thing to know about, be sure to clear it upon completion and delete the debugger lines. If you run JavaScript files through a YUI compressor, the existence of a debugger; string debugger; will result in an error.

Answer 2

This is a late answer, but I had the same problem, but the answer was different.

In my case, in my code there was a link to sourceURL:

 //@ sourceURL=/Scripts/test.js 

When this Javascript file is minimized and downloaded by the browser, it usually tells Chrome Dev Tools where the incomplete version is.

However, if you are debugging an incomplete version and this line exists, Chrome Dev Tools displays this sourceURL path instead of the "normal" path.

For example, if you work locally on a web server, then on the Sources tab in Chrome Dev Tools, the path to the specified JS file will be http://localhost/Scripts/test.js

If test.js has this at the bottom

 //@ sourceURL=/Scripts/test.js 

then breakpoints will only work if the path to the /Scripts/test.js file is not the full URL http://localhost/Scripts/test.js

In Chrome 38, following my example above, if you look at the Sources tab, each file starts with http://localhost/ , so when you click on test.js, Chrome loads http://localhost/Scripts/test.js

You can put all the breakpoints you need into this file, and Chrome will never reach any of them. If you place a breakpoint in your JS before it calls any function in test.js and then enter that function, you will see that Chrome opens a new tab, whose path is /Scripts/test.js . Placing breakpoints in this file will stop program execution.

When I got rid of the @sourceURL line from the JS file, everything worked fine again (i.e. the way you expect).

Answer 3

Probably this error is https://code.google.com/p/chromium/issues/detail?id=278361

This reproduces with my Chrome 31.0.1650.57 (Official Build 235101) on Linux.

I launch a browser to fix it.

Answer 4

I had a similar problem. Breakpoints where it does not work if I have not used debugger; . I fixed the problem from a breakpoint using "Restore Defaults and Restart". It is located in the Chrome developer tools, settings, restores default values ​​and reboots.

Answer 5

Make sure the script is with a "debugger"; the expression in it is not black with Chrome. You can go to the Sources tab to check and disable the black box, if so.

EDIT: Added screenshot.

Answer 6

I met this several times, at first it works well on the local host, suddenly breakpoints do not work, I switch to 127.0.0.1, then it works again. Hope helps.

Answer 7

I ran into similar problems in both chrome and firefox, although this may not be the solution to your problem. I share here, hoping this can help others. I came across this situation before in other unrelated projects, but I never understood why until it appeared today.

Scenario:

I have one page that uses two boot module mods that come from the same source and one set of javascript files (blueimp awesome jquery fileupload).

• BS Modal 1 is displayed on page load (via php) and is always present on the page. It is used to add a new related record. (CakePHP .... think the type is SalesForcey type)

• BS Modal 2 is used to edit existing related records, and the html content is extracted from the ajax call and added to the DOM via jQuery.

• Javascript that supports both modal files, including standard html <script> tags.

I noticed that breakpoints run only on Modal 1. They do not work when the code runs on dynamically added Modal 2, although it is obvious that the code is actually evaluated and run. Warning flags appear, things like codey are executed and displayed according to the logic outlined in the code.

I did not go deeper to explore further, because I insisted on the time, but wanted to put it there and return the community.

PS: I use SO all the time, but this is my first post, so it's easy on me :-)

Answer 8

Make sure that you use the same host in the URL that you had when setting up the mapping. For example. if you were in http://127.0.0.1/my-app when setting up and displaying the workspace, then breakpoints will not work if you view the page using http://localhost/my-app . Also, thanks for reading this. See my answer to the Chromium problem here .

Answer 9

make sure you open the javascript console (or sources) in your chrome window. otherwise it will never hit the breakpoint. you can open the javascript console using the select button in the upper right corner → tools → javascript console.

Answer 10

I had a problem when Chrome breakpoints didn't fire anything. When I tried to use the "debugger" in my code, I could only execute the code in the VM version of my code. My problem was that I didn’t display the resources correctly. Re-mapping fixed my problem.

Answer 11

My solution was to clear the local storage, session storage and cookies on the Applications tab. After that, Chrome will pause script execution at breakpoints defined in Sources.

1. Click the Google Chrome Applications tab.
2. Right-click the URL in each folder> Clear

Screenshot: Applications Tab

Answer 12

So, in addition to Adam Rakis’s answer, if you have errors in your javascript file above the breakpoint, you will not reach it, regardless of whether you flag it or enter debugger; .

Here is an example:

 if (nonExistentVar === "something") { console.log("this won't happen as the above errors out"); } debugger; console.log("this won't print either") 

Answer 13

since I ran into chrome, we need to open the browser console to make the debugger run when the page loads.

put this somewhere in the javascript file you want to run

 debugger 

open the browser console and reload the page.

the debugger will work as an example of the image below

Answer 14

I’m not sure how this works, but pressing the F1 key for the settings and at the bottom right, pressing the "Restore Defaults and Restart" button worked for me.

Answer 15

A rather late answer, but none of the above helped my case and was something else

during the link to the javascript file type = "text / javascript" was missing from the legacy application I was working on

 <script src="ab.js" ></script> 

below one it worked and breakpoints reached the expected level

  <script src="ab.js" type="text/javascript"></script> 

Answer 16

I had the same problem in a 10K line file. Breakpoints were ignored
hard-coded _debugger instructions, but they cannot be switched and can be annoying when placed in a loop. My solution, which is a bit hacky but it works, is to add the following to the top of the file:

 let myDebuggerFlag = false; let myDebugger = function () { if (myDebuggerFlag) { debugger; } } 

then I add myDebugger (); inline, where I would usually use a breakpoint.

to enable debugging just enter myDebuggerFlag = true; on the console line. (you must first exit myDebugger.