When I open a site, I want to see all rendering process step by step as I press a kind of "Next Step" button.

At first page will be empty then every time I click Next browser will render next item and stop (DOM or whatever) and tell me which javascript line is executed, which css is applied and so on.

Is there a way to see all these?

When I open a site, I want to see all rendering process step by step as I press a kind of "Next Step" button.

At first page will be empty then every time I click Next browser will render next item and stop (DOM or whatever) and tell me which javascript line is executed, which css is applied and so on.

Is there a way to see all these?

• javascript
• debugging

Share Improve this question Follow edited May 18, 2015 at 18:14 dsolimano 9,01633 gold badges5151 silver badges6565 bronze badges asked May 18, 2011 at 9:33 ErgecErgec 11.8k77 gold badges5353 silver badges6767 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Tools like Firebug and Chrome Developer Tools allow you to debug JavaScript functions step by step. However, sounds like you'd like to walk through page rendering, which isn't related to JavaScript.

I don't know any tool which actually pauses rendering and lets you walk through it, but if what you're after is profiling you should check out Chrome's Timline tab, which features detailed views and data about whatever happens on-page, including rendering.

You can use Firebug(Chrome and Firefox), Chrome Dev Tools (Chrome), Dragonfly (Opera) or IE Developer Toolbar for IE.

Use the excellent Firebug to debug through your javascript.

Or use Chrome developer tools, it's nice too

You can use the Online JavaScript Tutor for visualizing your code.