How to check values with chrome dev tools

I used to observe my code constantly typing in console.log values to see what i expected to see. Then i’ve read google tutorial about right debugging with dev tools https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db.
I was inspired this article because it works and it is convenient but when i decided to check my code in freecodecamp with chrome dev tools i couldn’t find my code in Source where were another long js files. Could someone help me because i think it would be great economy of time while solving tasks

You can use debugger;, but I would say to run the code in a clean blank tab, use the console and paste the code, again you can use the debugger statement to trigger with.

1 Like

Sorry, I don’t get it anyway. I have a code (https://codepen.io/fukenist/pen/QzKbwm)
which i want to examine line by line and see update of values in variables. I’ve saved code into func.js and opened it in Chrome then pressed Ctrl-Shift-I. I tried to insert debugger command but i can’t see how it works. In Google example they used Event Listener Breakpoints and click event and then Step into next function call button but i don’t have such in my code. What i can do to step through the code and see value of variables

?

I tried something similar, but I renamed the file to: func.html. I opened it with chrome.
I went to sources tab, set a break-point and then made a reload (F5 !) and the script starts running.
Then I could use the Step-functionality (F9).

1 Like

Thanks a lot! It helped

Thank you for the information.

Using the debugger statement is the same as setting a breakpoint, that is why I said to paste it into the console.

Pasting this into the console does the same as what you are showing in the picture. Or if you want to see all the steps, move the debugger statement to the top of the function. Or move it before the function call and step into the function.

function sumPrimes(num) {
  
  let arn = [0,1];
  let nar = [];
  for (var i = 2; i <= num; i++) {
    arn.push(i);
  }
  for (var j = 2; j < arn[7]; j++) {
    if (Number.isInteger(arn[7] / j) || j !== 1) {
       nar.push(arn[7]);
    }
  }
  debugger; // Set breakpoint here
  return console.log(nar);
}

sumPrimes(10);
1 Like

I have an additional question:
You can modify an existing code in source-tab and debug it.
If you modify something that is executed on document-ready or window-load then you need to reload the page, but if you reload the page the modifications on source tab are lost and replaced by the original code…
Is there a way to handle this with the debugger?

You can try using Local Overrides.

1 Like

It worked. Cool. Thank you!