CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtools
Alexander Solonik
Alexander Solonik

Reputation: 10230

Console.log inside chrome dev tools , in the source tab

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.

Upvotes: 4

Views: 6527

Answers (3)

Victoria Unizhona
Victoria Unizhona

Reputation: 266

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

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

Upvotes: 4

fedmich
fedmich

Reputation: 5381

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.

enter image description here

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.

Upvotes: 3

Michał Perłakowski
Michał Perłakowski

Reputation: 92461

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

Upvotes: 1

Related Questions