I am wondering if there is a way to set a breakpoint on a piece of code, not just on a line of code, in any browser. I am trying to debug some JavaScript and it is quite annoying to have a breakpoint break at the wrong line because I've had to add or delete a line above the breakpoint. So I find that I'm often having to move breakpoints after a code edit.
The debugger statement was introduced in ECMAScript 5.1.
The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.
console.log("Before breakpoint");
debugger;
console.log("After breakpoint");
Related
The case like this :
My code in the console like that. So I found it hard to make a breakpoint
How can I solve this problem?
just use debugger; in your javascript code, then open browser debugger console and trigger the code, so automatically debug pointer will point at your exact position of code.
for more details read
I was debugging some code in Chrome and randomly some of the breakpoints I had started showing up like this
The syntax (IMO) would imply that it is breaking on both of those points, but it doesn't. In fact, it doesn't perform any different than a regular breakpoint. But I am left thinking, What is this? Why is it here? How did it appear?
FYI: My Google Chrome is up to date (Version 58.0.3029.110 (64-bit))
EDIT: the second one is clickable and is another breakpoint when clicked but the question still remains. What are they? And why did they just suddenly appear?
The first one is a regular line break. The second one is a break on the call to clearErrorMessage. In this case they're really the same, but if you had chained function calls or nested functions here the multi-line breakpoint becomes incredibly useful.
In the image above, I tried setting breakpoints on every line from line 437 to line 443. However, I cannot set breakpoints on lines 439 and 440. When the function runs, the breakpoints on lines 437, 438, 441, and 442 are ignored. Chrome breaks on line 443. This means that I cannot do some debugging before the first conditional runs.
When I click on lines 439 or 440, the breakpoint appears for half a second and jumps to line 443.
Is this a bug or am I missing something? How do I set a breakpoint at or before line 439?
If you are using js minification and sourcemaps, ensure that they are up to date with your source code.
I have same problem in chrome dev tool source panel snippets when I write some codes to test my idea.
Only way for me worked is close dev tool panel and refresh page then reopen
This problem happened after I modified codes in debug mode
This was frustrating for me today but I found the problem. I was trying to place a breakpoint inside an orphan function (nothing was calling it). As soon as I fixed it, all was well. Smart - but wish there was even a tiny hint that this was the case.
I think that my classmate and I had this issue as well today. We made our changes and then hit Ctrl + S (or Cmd + S) to save the changes in the debugger and then we were able to add the breakpoints.
This recently became an issue for me, running System.js and Babel, and with plain ES6 transpiling, I haven't gotten to minifying/mapping yet. A workaround seems to be to add your breakpoint to the !transpiled file, a matching breakpoint will automagically appear in the corresponding line in the raw file.
In my case, I could not put a break point on the calling function line, but it worked into the function... weird but at least it works.
I just had that problem and realized that what I saw in the dev tools source was not the code that actually ran in the browser.
Make sure you empty your cache and reload and have the up to date code.
My problems where in sourcemaps definitions.
I solved my chrome debugging problems with this article: https://www.mistergoodcat.com/post/the-joy-that-is-source-maps-with-vuejs-and-typescript
I was allmost there, all i had to change was at vue.config.js: devtool: "inline-source-map" -> devtool: "eval-source-map"
In my case it was, most likely, a bug in the devtools. When I clicked to set a breakpoint inside an async function nothing seemed to happen, no visual indication of the breakpoint. Although outside the function it showed the blue mark correctly.
But when I ran the code it turned out that all the breakpoints had been set actually.
In my case, it turned out the function I was trying to add a breakpoint in, was never called but I'm not sure why it didn't allow me to add a breakpoint that would never hit anyway.
Is it possible to get a breakpoint when debugging, so that it stops each time when the certain class is accessed, otherwise it runs normally.
It's very common use case when one don't want to stop on jquery functions or other common libs functions, and want rather to stay on a specific js-file, but has no idea of what there could fire a bug, so one don't want explicitly to set a breakpoint on every line in the js file to catch all accesses on that file. Are there any options for Chrome DevTools for that debugging functionality?
Update:
Or maybe there is another way to get the similar functionality by ignoring whole libraries such as jquery, if there should be a breakpoint, so that only other files will be handled with debugger? That would be still not the best solution for the case, but anyway saves much time.
Update2:
the second approach is described here, but I have Chrome 26, and unfortunately cannot update it in the next one-two months, so this feature doesn't work for my browser now.
The only way to do it would be to sprinkle debugger; statements inside your file. At the begining of the file and at the begining of every function body should be enough.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
You can set conditional breakpoints to in the Sources panel. If you right-click on the line-number gutter it will show you a context menu for different options you can use, one of which is conditional breakpoints.
Like, if(condition) break;
Click Edit Breakpoint to do this
If you know the function(s) being called, you can use function breakpoints
debug(function);
function(...args);
When you call the function, it will hit the breakpoint. These aren't saved on page reload, but you can set a line breakpoint once you hit the function breakpoint.
This can get kinda tedious though.
If you have a array of functions, you can do
[function0, function1].map(debug)
#Tibos answer would be good if there was some sort of babel transform to insert debugger; at the start of every function, instead of inserting it manually.
You press F12 => select Sources => press CTRL+O => entry file name => finaly make breakpoint
I'm pretty new to chrome developer tools and i notice when i put in a break point and refresh the page that sometimes the page pauses at the break point and sometimes it doesn't. Does the break point have to be within a function or outside of a function in order for it to application to pause at the break point? Im trying to check and see if some values are defined or undefined..
A breakpoint tells the debugger to stop when execution reaches the statement with said breakpoint and can be placed on any statement.
Does the break point have to be within a function or outside of a function in order for it to application to pause at the break point?
Depends on what you want to debug. If you want execution to stop when the page reaches the function definition, then set a breakpoint on the "outside". If though, you want to break when the function is called, set it somewhere "inside" the definition of the function.
The breakpoints should work fine pretty much anywhere, so long as the code is stepping through.
If you're having serious issues, you can consider using the non-standard debugger keyword. That will almost emulate the functionality of breakpoints, apart from you're setting them in your actual code rather than the developer tools.
For example:
function test(y) {
debugger;
var x = y;
}
(As with all developer-focused JavaScript features (ie. console.log), don't forget to remove from production code)