4

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.

Improve this question
1
  • 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.com/devtools/docs/javascript-debugging Commented Aug 15, 2015 at 20:45

3 Answers 3

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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.

Improve this answer

1 Comment

how do i physically , in the source console.log before and after a certin line ?
1

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

Improve this answer

2 Comments

console.log vanishes from the source , once i refresh !
@AlexanderSolonik did you find any solution to this

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.