Chrome javascript debugger breakpoints don't do anything?
Asked Answered
C

26

105

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;
    });
});
Comb answered 3/8, 2012 at 1:30 Comment(11)
The "Sources" in your step 2 should be "Resources"?Nerte
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.Comb
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.60Nerte
I also looked at many online instructions and there is supposed to be a "Script" panel... but I don't have that?Comb
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"Nerte
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.Comb
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.Nnw
I understand this post is kind of old, but did you click the pause on exceptions button in chrome?Corsiglia
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.Thruway
Issue 1333411: Chrome debugger endpoints can't be activated in some filesThruway
Chrome bug, reported here: #72845492Roebuck
H
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.

Hysteria answered 3/8, 2012 at 1:38 Comment(9)
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?Comb
@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 allHysteria
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.Comb
@AdamRackis thanks for that debugger; tip. Really useful!! :)Heady
Thanks that worked for me too, and after removing the line, the Chrome breakpoints functionality was back to normal.Gerbold
@Jereon Rondeel I noticed this behavior too - very strange.Equanimity
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 browserMalynda
same as above, added debugger; it worked as expected, removed this line and other breakpoints work as expected now. Weird bug.Gizela
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.Covington
P
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).

Pood answered 5/11, 2014 at 18:27 Comment(0)
E
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.

Egoist answered 22/8, 2014 at 13:33 Comment(3)
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.Blades
In case someone doesn't find that "Restore defaults and reload" button, here's a screenshot on Chrome 93.Shayne
"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.Gannes
N
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.

Nnw answered 21/11, 2013 at 11:57 Comment(2)
Still a problem with Version 50.0.2661.94 (64-bit) on OSX CapitanSkipjack
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 endRafter
E
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.

Erlene answered 5/10, 2017 at 22:22 Comment(5)
Where is that feature located? Screenshot?Driest
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.Driest
This is what I was looking for. Thanks dude for the answer.Courtund
I don't have this option i.imgur.com/Eq5id5t.pngCapitation
@Capitation I think they changed it to "Add script to ignore list" and "Remove from ignore list".Erlene
V
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.

Vaginitis answered 30/9, 2014 at 12:27 Comment(0)
W
5

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

Wongawonga answered 23/10, 2019 at 16:24 Comment(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: #48512119Corinthians
V
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.

Vaticinate answered 4/8, 2014 at 10:52 Comment(0)
L
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.

Leapfrog answered 15/7, 2015 at 18:52 Comment(0)
M
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 :-)

Mildamilde answered 7/5, 2014 at 14:29 Comment(0)
D
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.

Delaney answered 28/5, 2014 at 22:18 Comment(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)Phototube
S
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

Steatopygia answered 28/6, 2018 at 22:6 Comment(1)
Drag up the console and type; localStorage.clear() & enter then sessionStorage.clear() & enter.Remorse
S
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>
Sligo answered 13/8, 2019 at 4:2 Comment(0)
M
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.

Messiaen answered 7/6, 2020 at 4:38 Comment(0)
A
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.

Aplenty answered 4/9, 2020 at 18:44 Comment(1)
B
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.

Bookman answered 17/6, 2019 at 18:11 Comment(0)
M
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")
Mihalco answered 25/9, 2013 at 18:36 Comment(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.Mihalco
D
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

Dercy answered 24/5, 2017 at 2:21 Comment(1)
What new information have you added in your answer that is not in one of the answers that has already been posted?Xenolith
D
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...

Deflower answered 19/5, 2020 at 12:8 Comment(0)
A
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.

Amicable answered 20/8, 2020 at 12:16 Comment(0)
J
0

nothing worked until i restart the computer.

when nothing work : restart

Jiggerypokery answered 16/1, 2022 at 14:35 Comment(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. :)Barium
N
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

Ninnyhammer answered 17/2, 2022 at 21:4 Comment(0)
K
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.

Knock answered 6/9, 2022 at 16:48 Comment(0)
G
0

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

Guertin answered 22/6, 2023 at 7:38 Comment(1)
This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From ReviewOutfitter
M
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.

Mound answered 21/7, 2023 at 6:25 Comment(0)
O
-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.

Olodort answered 3/10, 2017 at 11:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.