Chrome developer tools - debugging problem

1

Hi, whenever i use chrome developer tools to either debug something, i get into a mess and am not able to debug it

Example 1)

<html>
    <head>
        
    </head>
    <body>

        <script src="app.js"></script>
    </body>
</html>

function b() {
    console.log('Called b!');
}

b();

console.log(a);

var a = 'Hello World!';

console.log(a);

these are two working files . app.js and index.html. I execute this on brackets, open the console, which shows this:

Called b!
app.js:7 undefined
app.js:11 Hello World!

Now, when i want to debug this code I will copy the code into snippet:

and then i will add the breakpoints:

then right click, continue to here:

and then i press “step into next function call” or either forward button to continue to the snippet:

But then i get this:

image
image1366×768 91.1 KB

So my question is, how do i exit this situation so that i can allow myself to debug the code that i actually want? Is it something to do with the “call stack”?

Help would be greatly appreciated.

thanks

2

Try stepping out? It’s the button that looks like an arrow pointing upward from a dot on the upper right

3

image
image1366×768 101 KB

when i step out, it creates this (VM108) and then when i step out again, it continues debugging the code that i dont want to debug.

even if i delete the others, and keep only the snippet, it will continue to debug something else, and not the snippet.

4

I’m not really familiar with Chrome’s debugger, but the VM code seems to pop up when you pause execution, which you can do after all the breakpoints in your script have been encountered. I think at this point the only thing you can do is reload the page.

5

maybe its something to do with brackets being on live server?

essentially, i want to be able to always open chrome smoothly and debug something using snippets. But, i can never seem to get to the actual snippet piece of code to debug (it will execute something else)