Webkit Javascript Console – How to use it?

I’m working on a project and there is a ton of js, etc in it. I didn’t write it I’m “taking it over”.

There is a piece of Javascript somewhere that is adding top: -50px margin to an element with the id of “footer”.

When I look into the page source (through the developer tools) I can right click on an element and “break on attribute modifications”.

Is there a way to monitor this element to detect what line of js in what js file is applying this styling to it?

Answer

Simply right click on the element and select “break on attribute modifications” then when it changes the script will break and show you what line it broke on. Showing you where the JS is that changed it.

There are some great resource on how to use the console

Documentation –

code.google.com/chrome/devtools/docs

Video –

code.google.com/chrome/devtools/docs/videos.html