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?
Share Improve this question edited May 18, 2015 at 18:14 dsolimano 9,0163 gold badges51 silver badges65 bronze badges asked May 18, 2011 at 9:33 ErgecErgec 11.8k7 gold badges53 silver badges67 bronze badges5 Answers
Reset to default 3Tools 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.