# How to check values with chrome dev tools

**URL:** <https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009>\
**Category:** General\
**Created:** [December 16, 2018, 4:13pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009 "2018-12-16T16:13:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![fukenist](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fukenist/32/49023_2.png) [@fukenist](https://forum.freecodecamp.org/u/fukenist)\
**Post date:** [December 16, 2018, 4:13pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/1 "2018-12-16T16:13:01Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [December 16, 2018, 4:30pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/2 "2018-12-16T16:30:40Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) to trigger with.

---

<div class="post-metadata">

**Author:** ![fukenist](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fukenist/32/49023_2.png) [@fukenist](https://forum.freecodecamp.org/u/fukenist)\
**Post date:** [December 17, 2018, 8:34pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/3 "2018-12-17T20:34:57Z")

</div>

Sorry, I don’t get it anyway. I have a code ([https://codepen.io/fukenist/pen/QzKbwm](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

 ![%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9](https://global.discourse-cdn.com/freecodecamp/original/3X/1/a/1a16170244e978b3e497981a18681861c546a662.png) ?

---

<div class="post-metadata">

**Author:** ![s-projects18](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s-projects18/32/106502_2.png) [@s-projects18](https://forum.freecodecamp.org/u/s-projects18)\
**Post date:** [December 17, 2018, 9:13pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/4 "2018-12-17T21:13:36Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![fukenist](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fukenist/32/49023_2.png) [@fukenist](https://forum.freecodecamp.org/u/fukenist)\
**Post date:** [December 18, 2018, 7:04am UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/5 "2018-12-18T07:04:46Z")

</div>

Thanks a lot! It helped

---

<div class="post-metadata">

**Author:** ![Markus23](https://avatars.discourse-cdn.com/v4/letter/m/7993a0/32.png) [@Markus23](https://forum.freecodecamp.org/u/Markus23)\
**Post date:** [December 18, 2018, 2:50pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/6 "2018-12-18T14:50:52Z")

</div>

Thank you for the information[.](https://helpwriter.com/super-essay-writing-service.html)

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [December 19, 2018, 7:43am UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/7 "2018-12-19T07:43:10Z")

</div>

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.

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![s-projects18](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s-projects18/32/106502_2.png) [@s-projects18](https://forum.freecodecamp.org/u/s-projects18)\
**Post date:** [December 22, 2018, 7:35am UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/8 "2018-12-22T07:35:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [December 22, 2018, 3:09pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/9 "2018-12-22T15:09:19Z")

</div>

You can try using [Local Overrides](https://developers.google.com/web/updates/2018/01/devtools#overrides).

---

<div class="post-metadata">

**Author:** ![s-projects18](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s-projects18/32/106502_2.png) [@s-projects18](https://forum.freecodecamp.org/u/s-projects18)\
**Post date:** [December 22, 2018, 4:28pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/10 "2018-12-22T16:28:18Z")

</div>

It worked. Cool. Thank you!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:07pm UTC](https://forum.freecodecamp.org/t/how-to-check-values-with-chrome-dev-tools/246009/11 "2021-01-17T20:07:36Z")

</div>

Closed on January 17, 2021, 8:07pm UTC