Chrome javascript debugger breakpoints don't do anything?

Question

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 t

Answer 1

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

Answer 2

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.

I'm restarting browser to fix it.

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

Answer 4

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

Answer 5

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.

Answer 6

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.