3

I need to use my developer tools to inspect an element on the pages' CSS. My issue is that the element only appears for a brief moment and is then hidden again with javascript.

Is there a way (maybe with a browser add on or with the developer tools) so slow down javascript on a page? So when I click the trigger element that reveals the element I need to style it will appear on the screen for a bit longer?

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • 2
    Just edit your Js code so that the element isnt hidden. Inspect it, do whate ever you want and then get back to your original code – laaposto Apr 07 '14 at 14:04
  • 1
    possible duplicate of [Javascript Debugging line by line using Google Chrome](http://stackoverflow.com/questions/10638059/javascript-debugging-line-by-line-using-google-chrome) – pseudocubic Apr 07 '14 at 14:05
  • [Here's a video of how to debug javascript](https://www.youtube.com/watch?v=htZAU7FM7GI). – zzzzBov Apr 07 '14 at 14:07
  • I would also like to know if this is possible ... I want to automatically "step" every x seconds. – Dan Mar 14 '19 at 11:41

3 Answers3

2

You can add breakpoints in Chrome Devtools

enter image description here

On the bottom right you can see your local variables in their current state.

enter image description here

You can step through your javascript code by pressing F11

Dieterg
  • 16,118
  • 3
  • 30
  • 49
  • While this may be a good answer to the OP's problem, it does not actually explain how to execute code in slow motion. – Jackson Jun 20 '15 at 00:47
0

What kind of process is doing the CSS change? If it's javascript, you could set a breakpoint and step through the process.

Jakob Hohlfeld
  • 1,503
  • 1
  • 17
  • 31
0

In the developer tools of your browser you can issue Javascipt commands on the command line. For example, if you want to show a hidden element you could use a command like

document.getElementById('element').style.display = '';

And then to hide it again you could use

document.getElementById('element').style.display = 'none';

If you're using a framework there are many short-cuts to do the same thing.

Matthew
  • 265
  • 4
  • 10