I was just playing around with jBox.js and i was checking the following lines of code:

if (this.options.position[p] == 'center') {
        this.pos[a] += Math.ceil((this.targetDimensions[p] - this.dimensions[p]) / 2);
        return;
}

Now the way the code is written before the above code executes the value of this.pos[a] is 18 and after the code executes the value of this.pos[a] is 25 , In my text editor i can add a console.log before and after the if condition and find out, But is the same possible using google dev tools ? Can i console.log inside the source tab in chrome dev tools ?

I am interested in knowing if i can add a console.log statement in the source tab and than run my code, To see the logs.

Thank you.

Alex-z.

I was just playing around with jBox.js and i was checking the following lines of code:

if (this.options.position[p] == 'center') {
        this.pos[a] += Math.ceil((this.targetDimensions[p] - this.dimensions[p]) / 2);
        return;
}

Now the way the code is written before the above code executes the value of this.pos[a] is 18 and after the code executes the value of this.pos[a] is 25 , In my text editor i can add a console.log before and after the if condition and find out, But is the same possible using google dev tools ? Can i console.log inside the source tab in chrome dev tools ?

I am interested in knowing if i can add a console.log statement in the source tab and than run my code, To see the logs.

Thank you.

Alex-z.

• javascript
• google-chrome
• google-chrome-devtools

• 1 Do you know about the watched expression feature? You can add this.pos[a] to you watched list and put in a break point at the line you first want to read. console.log is handy but its not for heavy lifting IMHO. developer.chrome./devtools/docs/javascript-debugging – Victory Commented Aug 15, 2015 at 20:45

3 Answers 3

You should definitely check this out - https://developers.google./web/updates/2019/01/devtools#logpoints

This helps to log what you need and it stays even if pages is reloaded.

Yes you can "intercept" the execution of javascript code in the source tab. You can click the line number and when you refresh the page and IF Developer tool is open it will stop at that point. See example attached image. it will pause on line 24 and then if you switch to console tab, you can then alter any variables you want.

So in summary, sometimes you don't even need to use console.log()

1. You can make use of breakpoint
2. You can also just put the code debugger; and it will stop there. Try this out one.

DevTools is a very useful tool for us, try to learn about its feature to maximize its use.

When you run console.log() in Google Chrome, it's displayed in Developer Tools in Console tab.