Hacker News new | ask | show | jobs
by ireadzalot 4864 days ago
Is anyone aware of any resources that shows you how to setup your machine to see how an HTML page is rendered in Webkit, step by step, like remote debugging?
1 comments

The Chrome DevTools timeline gives a solid overview of the construction of each page. You can see the progression of grabbing network assets, Parsing HTML, Recalculating styles, Layout (aka reflow), Paint, Compositing

Here's a trace of this page, for example: http://paulirish.com/i/dd8f40.png

A far more low-level view is available in about:tracing - More on that here http://www.html5rocks.com/en/tutorials/games/abouttracing/

+1 the timeline tool is great. Whenever you have performance issues in a web app and javascript is not the culprit, that's the tool to turn to.