Chrome javascript debugger breakpoints are not working

Question

Whether I set breakpoints directly on the source/console or add a debugger on my code, the browser doesn't seem to respond to them. Any ideas why? Here's my code:

 if (select[i].placeholder != undefined && select[i].placeholder != '' ) {
        selected.appendChild(document.createTextNode(select[i].placeholder)); debugger;
    } else if (select[i].options[0].value == '' && select[i].options[0].textContent != '' ) {
        selected.appendChild(document.createTextNode(select[i].placeholder));
    } else {
        selected.appendChild(document.createTextNode('Select an option'));
    }

I see you've accepted an answer saying they weren't being hit because the code where you had the breakpoint wasn't being reached in the control flow. Is that really what the problem was? You had (say) a breakpoint on the second line above, but the condition above that line was false? — T.J. Crowder
– T.J. Crowder, Commented Nov 14, 2017 at 18:00

T.J. Crowder · Accepted Answer · 2017-11-14 17:56:54Z

42

In Dev Tools, on the Sources panel, there's a button that looks like a breakpoint marker with a line through it: That button disables all breakpoints. To re-enable them, click the button.

Here's what it looks like when they are currently enabled (clicking it disables them):

...and when they are currently disabled (clicking it enables them):

edited Nov 14, 2017 at 17:56

answered Jan 4, 2017 at 11:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sotiris Zegiannis Over a year ago

In my case i just had to restart chrome. Spend an hour to figure out!

T.J. Crowder Over a year ago

@YashVekaria - Restart what? You certainly don't need to restart anything just to turn breakpoints on and off in Chrome. You might be best off posting a new, complete question with a full description of what you're doing, what you're restarting, what happens if you don't, etc. Then people will be able to help.

ASH Over a year ago

This happened to me a few times before, and then just called it for the day. Toggling this seems to have sorted it out. Thanks.

Itay Tur · Accepted Answer · 2019-02-06 08:33:13Z

18

Restarting the app worked for me.

answered Feb 6, 2019 at 8:33

Itay Tur

1,9623 gold badges30 silver badges57 bronze badges

2 Comments

jayarjo Over a year ago

Not sure why this was downvoted, but that's what I have to do on a regular basis when Chrome suddenly stops stopping on breakpoints. I guess there's some kind of a bug in Chrome itself.

damuz91 Over a year ago

Restarting chrome in Nov 2024 worked

OZZIE · Accepted Answer · 2020-03-09 09:56:43Z

6

Chrome is not fond of webpack lazy loaded components and breaks down regularly.. Sometimes if there is an error which doesn't prevent other code from running it still prevents breakpoints from working anyway.. super annoying.. restarting chrome and/or updating it seems to be the only help. It doesn't always work to update/restart though..

edited Mar 9, 2020 at 9:56

answered Mar 3, 2020 at 12:30

OZZIE

7,47410 gold badges64 silver badges66 bronze badges

Comments

dfrankow · Accepted Answer · 2021-06-17 15:48:00Z

6

I've found that if I ran the page while I was on the "Console" tab, the breakpoints work, and if I was in the "Sources" tab (say, looking at the code with the breakpoints), it did not. So, I switched back to the "Console" tab and reloaded the page and it works.

Chrome 91.0.4472.106 on OS X.

EDIT: Although that didn't seem to always work for me. Another thing I did is remove and re-add the breakpoints.

edited Jun 17, 2021 at 15:48

answered Jun 17, 2021 at 14:57

dfrankow

21.7k44 gold badges167 silver badges246 bronze badges

2 Comments

Geo242 Over a year ago

Switching to the "Console" tab works for me in "92.0.4515.107 (Official Build) (64-bit)" on Windows 10.

Matt B Over a year ago

This worked for me. Chrome LInux 97.0.4692.71

Smart Manoj · Accepted Answer · 2021-06-26 02:13:29Z

3

I think I see what is happening. Typically, you should not add breakpoints in the middle of an if statement. That's because if the statement is false, then it will not run that line and therefore 'jump' over the debugger or breakpoint.

Therefore, add your debugger; before or after the if-statement

/* Here -- debugger;*/
if (select[i].placeholder != undefined && select[i].placeholder != '' ) {
    selected.appendChild(document.createTextNode(select[i].placeholder)); 
} else if (select[i].options[0].value == '' && select[i].options[0].textContent != '' ) {
    selected.appendChild(document.createTextNode(select[i].placeholder));
} else {
    selected.appendChild(document.createTextNode('Select an option'));
}
/* Or Here -- debugger;*/

Depending on what you hope to capture with the debugging...

edited Jun 26, 2021 at 2:13

Smart Manoj

6,0736 gold badges45 silver badges66 bronze badges

answered Jan 4, 2017 at 12:02

user7267879

1 Comment

Mark Fee Over a year ago

Having found this item (because my breakpoints ARE being ignored by chrome) I think the title should be changed - chrome is not ignoring breakpoints. The question should be please help me put my breakpoints in the correct place.

Konrad Grzyb · Accepted Answer · 2022-03-11 19:33:06Z

2

For me restaring or changing debugger settings didn't work. In development mode of Material-UI (V4) app with babel.config:

export const presets = [
  ['@babel/preset-env', { targets: { node: 'current' } }],
  '@babel/preset-typescript',
];

My source file was somehow duplicated and I put breakpoint in a wrong file (with the same name). I have opened CORRECT file by choosing source from console log.

I think the issue was that old mappings were saved because I put a breakpoint while my React app (with live Hot Reaload mode) was rerendered.

edited Mar 11, 2022 at 19:33

answered Feb 16, 2022 at 11:03

Konrad Grzyb

2,09222 silver badges17 bronze badges

Comments

rustyDev · Accepted Answer · 2021-03-30 02:26:14Z

0

Check your console first, sometimes there are errors in your script and the script is not even running, fix those errors first, and eventually the debugger should start working.

answered Mar 30, 2021 at 2:26

rustyDev

1951 silver badge12 bronze badges

Comments

Michael Mior · Accepted Answer · 2025-04-04 16:56:40Z

-1

Another situation: the breakpoint is in a function/method which is never invoked because of a type error or something else.

edited Apr 4 at 16:56

Michael Mior

28.9k10 gold badges95 silver badges118 bronze badges

answered Mar 11, 2022 at 9:39

scil

3052 silver badges10 bronze badges

Collectives™ on Stack Overflow

Chrome javascript debugger breakpoints are not working

8 Answers 8

3 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Related