104

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;
    });
});
11
  • The "Sources" in your step 2 should be "Resources"?
    – Deqing
    Aug 3, 2012 at 1: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 3, 2012 at 1: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 3, 2012 at 1: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 3, 2012 at 1: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 3, 2012 at 1:40

26 Answers 26

181

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.

9
  • 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 3, 2012 at 1: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 Aug 3, 2012 at 1: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 3, 2012 at 2:08
  • 1
    @AdamRackis thanks for that debugger; tip. Really useful!! :)
    – gsaslis
    Oct 26, 2012 at 8:45
  • 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, 2019 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).

0
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.

3
  • 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. Aug 9, 2017 at 12:16
  • In case someone doesn't find that "Restore defaults and reload" button, here's a screenshot on Chrome 93.
    – OfirD
    Sep 5, 2021 at 8: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, 2022 at 4: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.

2
  • 2
    Still a problem with Version 50.0.2661.94 (64-bit) on OSX Capitan
    – Mexx
    Apr 29, 2016 at 9: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 Jul 7, 2016 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.

5
  • 1
    Where is that feature located? Screenshot?
    – oldwizard
    Nov 7, 2017 at 10:01
  • There was no screenshot of the "Stop blackboxing" feature when I downvoted it. The answer did not help, as one had to start googling the "Stop blackboxing" feature instead. The answer has improved. Removing downvote.
    – oldwizard
    Nov 9, 2017 at 9:23
  • This is what I was looking for. Thanks dude for the answer. Jul 11, 2019 at 10:33
  • I don't have this option i.imgur.com/Eq5id5t.png
    – Nakilon
    Aug 9, 2021 at 14:51
  • @Nakilon I think they changed it to "Add script to ignore list" and "Remove from ignore list". Aug 9, 2021 at 19:12
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.

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.

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.

4

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

1
  • 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: stackoverflow.com/questions/48511619/…
    – Faks
    Oct 12, 2021 at 9: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 :-)

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.

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

1
  • 2
    Drag up the console and type; localStorage.clear() & enter then sessionStorage.clear() & enter.
    – Paddymac
    Oct 25, 2019 at 12:56
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>
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.

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.

1
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.

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")
1
  • 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, 2013 at 0: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

1
  • 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, 2017 at 2: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...

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.

0

nothing worked until i restart the computer.

when nothing work : restart

1
  • 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, 2022 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

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.

0

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

1
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.

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.