I have a function in JavaScript that is based on a few numbers and yes/no questions inputted into html forms, and then an answer is returned with subtle differences based on the input.
Is there any way to see or highlight which lines of code were executed to make sure the function use the correct "path"? Sometime like an app in VS code or somewhere else? I do not want to put an extra line of code every few lines to figure it out.
You can use the Code Coverage tool for this.
To show the Coverage tab in Chrome Developer Tools, open the console and type Ctl-Shift-P (Cmd-Shift-P on Mac) to get the command menu, then start typing coverage into the search field that pops up. Then you'll be able to click on Show Coverage command.
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 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");
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.
I'm trying to learn asp.net and javascript following this tutorial.
I have it working fine but wanted to experiment and try different things, I noticed that whenever I change quiz-controller.cs visual studio seems to ignore my changes and when I run the app it creates a new tab with 'quiz-controller.js [dynamic]' in the title.
This happens only when I change the quiz-controller.js file, the rest of the project and code is straight out of the tutorial, for example if I change line 16 to be '$scope.title = "testing"' and run the app with a breakpoint on the line visual studio creates a 'quiz-controller.js [dynamic]' tab and places the breakpoint there, with my changes reverted.