103

I can't seem to figure out the Chrome debugging tool.

I have chrome version 21.0.1180.60 m.

Steps I took:

  1. I pressed ctrl-shift-i to bring up the console.
  2. Clicked on Sources then select the relevant javascript file that I want to debug.
  3. I set breakpoints where I want the code to stop by putting a blue tag on the gutter next to the line on the left.
  4. I clicked on the button on my webpage (which is a php rendered page) that initiates the javascript code.
  5. The code ran successfully without stopping.

I also noticed that the Watch Expressions don't work either. It keeps telling me that the variable that I want to watch is undefined.

Further testing found that it's my code that's causing the breakpoint to fail. It seems that it fails on the "$("#frmVerification").submit(function(){" line. It doesn't step into the breakpoints inside that function().

Below is the:

//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;
    });
});
chaser
  • 3,107
  • 4
  • 29
  • 34
  • The "Sources" in your step 2 should be "Resources"? – Deqing Aug 03 '12 at 01:34
  • My chrome has the following in the panel in order: Elements, Resources, Network, Sources, Timeline, Profiles, Audits, Console. However, Resources, won't allow me to add breakpoint. Only Sources will. – chaser Aug 03 '12 at 01:35
  • You can try a simple page with simple straightforward javascript to see if the breakpoint is working. By this you can get whether it is the problem of Chrome 21.0.1180.60 – Deqing Aug 03 '12 at 01:37
  • I also looked at many online instructions and there is supposed to be a "Script" panel... but I don't have that? – chaser Aug 03 '12 at 01:37
  • Yes. In my chrome(20.0.1132.43) it has: Elements, Resources, Network, Scripts, Timeline, Profile, Audits, Console. So it seems in Chrome 21 they changed "Scripts" to "Sources" – Deqing Aug 03 '12 at 01:40
  • I tried with a simple javascript code it works. so it's something to do with my code. It's a Jquery code, and it works so I'm not understanding why it doesn't jump through the break points when I pressed f8. I'll post the code. – chaser Aug 03 '12 at 01:49
  • I also experienced such behavior when chrome does not pause script execution on breakpoints. I couldn't figure out why did that happen, probably this is a bug which reproduced within some conditions. – humkins Nov 21 '13 at 11:45
  • I understand this post is kind of old, but did you click the pause on exceptions button in chrome? – OneStig Nov 02 '17 at 03:57
  • Tried my react app served on parcel on Firefox and it worked; tried it on Chrome v102.0.5005.115 (Official Build) and it failed. It was working before. – Ricardo Jun 24 '22 at 06:30
  • [Issue 1333411: Chrome debugger endpoints can't be activated in some files](https://bugs.chromium.org/p/chromium/issues/detail?id=1333411) – Ricardo Jun 29 '22 at 18:04
  • Chrome bug, reported here: https://stackoverflow.com/questions/72844992/how-to-pause-on-code-of-inline-script-tag?noredirect=1#comment128721045_72844992 – trusktr Jul 06 '22 at 18:06

26 Answers26

180

I'm not sure why your breakpoints aren't hitting, but one sure-fire way to step into your code is to type

debugger;

where you want the code to halt, and then run again with the chrome developer tools window open.


Just one small thing to be aware of, be sure to clean up after you done and remove the debugger lines. If you ever run JavaScript files through YUI compressor, the existence of a debugger; line will cause it to error out.

Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • 1
    I put debugger in within the jquery function, and it still doesn't step into it. Please have a look at the code that I've uploaded. Is this because of JQuery? – chaser Aug 03 '12 at 01:58
  • 1
    @chrolli - I don't see any debugger; in the code, but regardless, it should definitely work with jQuery. Instead of debugger;, throw an alert in there just to make sure the code is being called at all – Adam Rackis Aug 03 '12 at 01:59
  • 1
    Thanks that was a good advice to throw in the alert. It was the logic of my code. It never went in there. I'll have to dig into that some more. I'll mark this as answered as far as Chrome debugger is concerned. – chaser Aug 03 '12 at 02:08
  • 1
    @AdamRackis thanks for that debugger; tip. Really useful!! :) – gsaslis Oct 26 '12 at 08:45
  • 1
    Thanks that worked for me too, and after removing the line, the Chrome breakpoints functionality was back to normal. – Jeroen Rondeel May 08 '14 at 13:56
  • @Jereon Rondeel I noticed this behavior too - very strange. – Mani5556 Dec 02 '16 at 02:49
  • 1
    the `debugger` tip is indeed useful, but it would be nice to understand why it works like that while it doesn't work when you normally set the breakpoint in the browser – Francesco Borzi May 16 '17 at 14:31
  • same as above, added debugger; it worked as expected, removed this line and other breakpoints work as expected now. Weird bug. – Datadimension Nov 16 '18 at 09:20
  • 2
    For debugger to work the 'Disable Cache' needs to be set under the Network tab or you will be running the cached code. Select this then reload with Ctrl F5. – CYoung Jul 24 '19 at 23:57
25

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

In my case, there was a sourceURL reference in my code:

//@ sourceURL=/Scripts/test.js

When this Javascript file is minified and loaded by the browser, it normally tells Chrome Dev Tools where the unminified version is.

However, if you are debugging the unminified version and this line exists, Chrome Dev Tools maps to that sourceURL path instead of the "normal" path.

For example, if you work locally on a web server, then in the Sources tab in Chrome Dev Tools, the path to a given 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 file path is /Scripts/test.js, not the fully-qualified URL of http://localhost/Scripts/test.js

In Chrome 38, staying with my example above, if you look at the Sources tab, every file runs off http://localhost/, so when you click on test.js, Chrome loads up http://localhost/Scripts/test.js

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

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

Stephen
  • 2,410
  • 3
  • 33
  • 57
20

I got a similar problem. Breakpoints where not working unless I used debugger;. I fixed my breakpoints problem with "Restore defaults and reload". It's located in the Chrome Developer Tools, Settings, Restore defaults and reload.

Jim G.
  • 15,141
  • 22
  • 103
  • 166
Nicolas
  • 300
  • 2
  • 5
  • 1
    That worked for me. Ps: I didn't need to use "debugger;". For anyone looking for it in Version 58.0.3029.110 or so, click the 3 vert dots, Settings(F1), and "Restore defaults and reload" is a button at bottom. – www-0av-Com Aug 09 '17 at 12:16
  • In case someone doesn't find that "Restore defaults and reload" button, here's a [screenshot](https://i.stack.imgur.com/ixOgq.png) on Chrome 93. – OfirD Sep 05 '21 at 08:04
  • 1
    "Restore defaults and reload" didn't solve the problem for me. However, it did an excellent job of completely deleting all my settings, breakpoints, and watch expressions so I had to redo everything from scratch to even go back to trying to solve the problem of breakpoints no longer working. Thanks. – John Smith Jan 23 '22 at 04:04
13

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

This is reproduced with my Chrome 31.0.1650.57 (Official Build 235101) on Linux. Also with My Chrome Version 98.0.4758.82 (Official Build) (64-bit) on Windows 10.

I'm restarting browser/Windows to fix it.

Vasilis Plavos
  • 230
  • 2
  • 8
humkins
  • 9,635
  • 11
  • 57
  • 75
  • 2
    Still a problem with Version 50.0.2661.94 (64-bit) on OSX Capitan – Mexx Apr 29 '16 at 09:13
  • Just happened to me on Win10 with Chrome 51. I was using an undocked dev tools window, i killed the window and that was enough on my end – Chris Marisic Jul 07 '16 at 18:32
6

Make sure the script with the "debugger;" statement in it is not blackboxed by Chrome. You can go to the Sources tab to check and turn off blackboxing if so.

EDIT: Added screenshot.

How to turn off blackboxing.

John Alexander
  • 822
  • 1
  • 12
  • 21
5

I met this several times, at first it works well by localhost, suddenly, the breakpoints don't work, i switch to 127.0.0.1, then it works again. Hope helps.

dasons
  • 493
  • 5
  • 12
4

make sure that you have opened javascript console(or sources) in your chrome window. otherwise it will never hit the breakpoint. you can open javascript console by option button in right upper corner-->tools-->javascript console.

Thilak
  • 41
  • 2
4

I had an issue where Chrome's breakpoints weren't firing anything. When I tried to use 'debugger' in my code, I could only step through the code in the VM version of my code. My issue was that I was mapping the resources incorrectly. Re-mapping fixed my problem.

DaneEdw
  • 446
  • 1
  • 8
  • 18
4

I had a minifier that was stripping out debugger statements ¯_(ツ)_/¯

FreePender
  • 4,770
  • 2
  • 18
  • 15
  • I use grunt-contrib-uglify to minify my JS. By default it removes debugger instructions from the code. See this link to keep 'debugger' instructions in your code: https://stackoverflow.com/questions/48511619/preserve-debugger-keyword-grunt-uglify – Faks Oct 12 '21 at 09:12
3

I encountered similar problems in both chrome and firefox though it may not be the solution for your issue. Am sharing here in the hopes it may help others. I have encountered this situation before in other unrelated projects but never understood why until it cropped up again today.

Scenario:

I have one page that uses two bootstrap modals that come from the same source and one set of javascript files (blueimp's awesome jquery fileupload).

  • BS Modal 1 is rendered on page load (via php) and is always present on the page. It is used for adding a new related record. (CakePHP....think SalesForcey type stuff)

  • BS Modal 2 is used for editing existing related records and it's html content is pulled in from an ajax call and appended to the DOM via jQuery.

  • Javascript supporting both modals included via standard html <script> tags.

I noticed that breakpoints are only triggered on Modal 1. They do not work when the code is being executed on the dynamically added Modal 2, even though it is quite obvious that the code is indeed being evaluated and run. Alert boxes pop up, codey type things get executed and output follows the logic set forth in the code.

I have not dived deeper to investigate further because I'm pressed for time, but wanted to put it out there and give back to the community.

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

Mikey4Dice
  • 41
  • 3
3

Make sure that you're using the same host in the URL that you were when you set up the mapping. E.g. if you were at http://127.0.0.1/my-app when you set up and mapped the workspace then breakpoints won't work if you view the page via http://localhost/my-app. Also, thanks for reading this far. See my answer to the Chromium issue here.

David Gilbertson
  • 4,219
  • 1
  • 26
  • 32
  • I was hoping this solves my issue, but it didn't :( I can confirm that the code ran with the updated log line, but Chrome DevTools failed to pause (same for VS Code) – oVo Aug 10 '23 at 18:10
3

My solution was to clear the Local Storage, Session Storage, and Cookies from the Applications tab. After that, Chrome would pause script execution on the breakpoints defined in Sources.

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

Screenshot: Applications tab

Purple_Kitten
  • 164
  • 1
  • 7
3

Pretty late answer but none of the above helped my case and was something different

while referring the javascript file type="text/javascript" was missing in the legacy application i was working

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

below one worked and breakpoints were hitting as expected

 <script  src="ab.js" type="text/javascript"></script>
Peru
  • 2,871
  • 5
  • 37
  • 66
3

Make sure you are putting breakpoint in correct source file. Some tools create multiple copies of code and we try on different source file.

Solution: Instead of opening file using shortcut like Ctrl+P or Ctrl+R, open it from File Navigator. In Source tab, there is icon for it at left top. Using it we can open correct source file.

Yuvraj Patil
  • 7,944
  • 5
  • 56
  • 56
2

This may be a Chrome bug. Unfortunately Chrome routinely breaks debugging. It often has some kind of memory leak and it often breaks or changes every few releases.

Debugging with formatted sources is currently extremely unreliable.

It's possible you're also trying to break on dead code.

To be certain it's not the browser you should also try to debug it in firefox.

jgmjgm
  • 4,240
  • 1
  • 25
  • 18
  • [Issue 1333411: Chrome debugger endpoints can't be activated in some files](https://bugs.chromium.org/p/chromium/issues/detail?id=1333411) – Ricardo Jun 29 '22 at 18:03
1

I'm not sure how it worked, but hitting F1 for settings and at the bottom right, hitting "Restore defaults and reload" worked for me.

Stubbs
  • 323
  • 1
  • 4
  • 14
0

So, in addition to Adam Rackis' answer, if you have errors in your javascript file above the breakpoint, you won't reach it regardless if you flag it, or put in debugger;.

Here's an example:

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")
JT.
  • 7,966
  • 1
  • 15
  • 10
  • 1
    @dckuehn only if you tell it to. It's an option in the dev tools to pause on errors. Sometimes, that's not practical. For example, I work on library code that runs on 3rd party websites. If I turn that on when I'm working on the library, it pauses execution every time the site has an error whether it's related to my library or not. If you're in control, and it's your site, that's a great option. For some types of development it can get in the way. – JT. Nov 22 '13 at 00:31
0

as I experienced with chrome we need to open browser console to make debugger run when loading page.

put this somewhere in javascript file you want to run

debugger

open browser console and reload page.

debugger will run like example image below

enter image description here

Samda
  • 1,439
  • 12
  • 5
  • What new information have you added in your answer that is not in one of the answers that has already been posted? – takendarkk May 24 '17 at 02:31
0

I need my damn breakpoints! Very strange behavior - the normally red spot in Sources was going grey; these and debugger; breakpoints would still appear to hit but show somewhere in some non-executable HTML.

After a couple hours of hacking away code the breakpoints were finally being hit correctly, however had more or less just the equivalent of "Hello World" left. Hahaha.

So I had some serverside data being output in the page (in my case in a @razor statement), but it would be the same in any similar case.

There was some incorrectly formed 0A/0D chars in the server output - the old carriage returns - causing Chrome the confusion with its own line numbering.

Cleaning the server injected HTML and I got my breakpoint.

Now let's see how much of this code I can CTRL-Z back...

bendecko
  • 2,643
  • 1
  • 23
  • 33
0

I'll add yet another random answer just because this question came up in response to my several searches. I have jQuery objects that have public and private methods. The pattern is:

myObject = (function($){
  function publicFunction() {}
  function privateFunction() {}
  return {
    theOnlyMethod: publicFunction
  }
})(jQuery);

If I put a breakpoint on a line inside a private function, Chrome will not debug it, the line moves down to the return statement! So to debug, I have to expose the private functions! This is new to me this morning (8/20/2020, Version 84.0.4147.125 (Official Build) (64-bit)), I can't believe I've not run into this in 3 years.

user1944491
  • 559
  • 1
  • 8
  • 24
0

nothing worked until i restart the computer.

when nothing work : restart

  • *Something worked*. But it was only visible/active after you've rebooted. The reboot itself is not the cure to this specific question, it's impossible. :) – Eric Aya Jan 16 '22 at 15:51
0

I encountered this issue, and I realized that in my case it had to do with the dev tools using cached version.

Adding a debugger statement would indeed cause it to break but it would point the cursor to a wrong line (although the tooltips variables values were actually correct).

Forcing the option "Empty Cache and Hard Reload" on the refresh button (on top left of the browser, see image) did the trick for me, and the breakpoints started to work as expected.

"Empty Cache and Hard Reload" Image

yoel halb
  • 12,188
  • 3
  • 57
  • 52
0

I am struggling debugging a rouge Bootstrap Modal popup, but I found the "debugger" tag to help me get the debugger started. In my case the BS modal is being triggered by a piece of code I can't seem to find, so I wanted to see what the stack was when the modal was "show.bs.modal", this is the event that fires right before the modal is shown. I opened the Chrome developers console, and typed this code directly into the console to trigger the debugger to open at this event:

$('#myModal').on('show.bs.modal', (e) => {
    debugger;
});

Now just as my BS modal is shown, the debugger kicks in and I can see the stack. Of course the stack isn't showing me what caused the event to trigger, so I have to dig deeper, but for others this is a good way to debug some DOM object without directly modifying your code.

MrTaz
  • 11
  • 1
0

I had the same problem, when I removed the site data (clearing cookies). The debugger started working.

Alphonse
  • 37
  • 8
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34583381) – AztecCodes Jun 26 '23 at 11:45
0

I added the debugger statement to the source code, but the devtool sources bar did not stop at this breakpoint.
For me, the reason is Ignore List, I click "Add script to ignore list" in another js file, but it doesn't seem to match only this file, but math some other files. Matching rules seem to contain wildcard parts.

hrdom
  • 83
  • 1
  • 7
-1

I had the same issue in a 10K line file. The breakpoints were being ignored,
hard coded _debugger statements worked, but they can't be toggled and can be annoying when placed in a loop. My solution, which is a bit of a hack 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 a myDebugger(); inline where I would usually use a breakpoint.

to turn debugging on i simply enter myDebuggerFlag = true; on the console line. (you have to step out of myDebugger first of course.

Mark Fee
  • 122
  • 1
  • 11