New Perspectives On Web Design

(C. Jardin) #1

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues


Timeline won’t display any data by default but you can begin a record-
ing session with it by opening your app and clicking on the gray circle at
the bottom of the pane — you can also use the Command / Control+E short-
cut. This record button will turn from gray to red and Timeline will begin
to capture the timelines for your page. Complete a few actions inside your
app (or the one suggested, such as scrolling) and after a few seconds, click
the button again to stop recording.

Chrome DevTools Timeline, zoomed into a set of records with some pretty heavy paint.

Hovering over a record will display an extended tooltip with details about the time
taken to complete it. These have so much useful information in there, so do pay
attention to them, especially the call stack.
Free download pdf