Using Chrome Devtools

Topics covered

• Overall Anatomy
• The Elements panel
• The Console panel
• The Sources panel
• The  Network panel
• Rendering fundamentals
• Network Timeline
• Timeline/Profile panels

Overall anatomy

Chrome devtools

• How to start
• Panels: Elements, Console, Sources, Network, Timeline, Profiles, Resources, Security, Audits

Overall anatomy: How to start

Chrome devtools

Win: F12, Ctrl + Shift + i

Mac: Cmd + Opt + i

Right Click: Inspect Element

Elements: review the html and css

Chrome devtools: Overall anatomy: panels

Elements: live-edit the html

Chrome devtools: Overall anatomy: panels

Elements: examine and edit css

Chrome devtools: Overall anatomy: panels

Elements: view local change history

Chrome devtools: Overall anatomy: panels

Elements: examine event handlers

Chrome devtools: Overall anatomy: panels

Console: debug javascript

Chrome devtools: Overall anatomy: panels

• Console is the Javascript REPL for our website's environment
• All console.log output is printed on it
• We can execute any javascript from console
• Frames are separated environments in console

Console: debug javascript

Chrome devtools: Overall anatomy: panels

Console: thing to notice

Chrome devtools: Overall anatomy: panels

1. We can clear the console
2. We can filter the output (filter panel not open by default)
3. We can switch to iFrames
4. We can persist the console (otherwise it clears on reload)

1

2

3

4

Console: utilities

Chrome devtools: Overall anatomy: panels

Ref: https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference?hl=en

Console: some examples

Chrome devtools: Overall anatomy: panels

var names = {
  0: { nick: "Ji", person: "Praveen" },
  1: { nick: "Jeev", person: "J.P Robinson" } };
table(names);

monitorEvents(window, "resize");

function foo() { return "foo";}
monitor(foo);

getEventListeners(document);

document.body;
dir(document.body);

copy(names);

$('img');
$$('img');
$_
$0
$1
$2
$3
$4

i=$('img');
inspect(i);

Sources

Chrome devtools: Overall anatomy: panels

• Displays our sources (cs and js)
• Provides debugger

Sources: general view

Chrome devtools: Overall anatomy: panels

Sources: CMD+P (like Sublime)

Chrome devtools: Overall anatomy: panels

Sources: Make it pretty

Chrome devtools: Overall anatomy: panels

Sources: More (not covered here)

Chrome devtools: Overall anatomy: panels

• Debugging
• Source maps
• Persistence

The network panel

Chrome devtools

Starting and customisations

Chrome devtools: Network panel

• How to start: Open the Network panel, and Reload
• Customisations:
  • Use small request rows
  • Show overview
  • Disable Cache
  • Add Domain column
  • Capture screenshots (sometimes)

Starting and customisations

Chrome devtools: Network panel

Disable the cache

Show Overview

Use small request rows

Capture screenshots

Starting and customisations

Chrome devtools: Network panel

Add Domain column (right click here to add get the menu)

Chrome devtools: Network panel: sample: wtca-staging

Chrome devtools: Network panel: sample: menu.beerboard

Things to Notice

Chrome devtools: Network panel

• No. of requests (The bottom bar)
• The blue line (DOMContentLoaded)
• The red line (load)
• Size and Time columns
• The document gap
• The timeline
• The statuses (try w/o disabling cache)

Chrome devtools: Network panel: Things to notice

DOMContentLoaded

DOMContentLoaded

Load

Load

Total requests

Chrome devtools: Network panel: Things to notice

Zoomed in

The 'gap'

Sizes and Times

Ignore: Detailed view

Chrome devtools: Network panel

• Headers tab in details
• Noticeable headers
  • RequestURL, Status Code,  Query String parameters, Cache-control, Etag
• Other tabs:
  • Preview (JSON, images, fonts)
  • Cookies (Doc)
• Timing: same as that on the main list

Rendering mechanics

Chrome devtools: Network panel

• HTMLs are fetched first (Doc)
• A HTML is parsed from top to bottom
• If a resource is invoked along the way, a request may be fired
• Resource may be Js, Css, Image, Font, Media etc
• For Js, the script is loaded and executed before it HTML parsing can continue (by default)
• Resources can be fetched in parallel
• There is a limit to number of parallel connections (TCP, 6) per domain.

Rendering mechanics : performance impact

Chrome devtools: Network panel

• Too many resources will slow down the page (if !HTTP-2)
• Javascripts on top of the page can block rest of the page. Not if its on the bottom (application.js)
• Scripts/Css/Images consolidated across one file (asset-precompile, css-sprites) will work faster
• External scripts (Olark, Gmap, Analytics will add to load time)

Network timeline

Chrome devtools: Network panel

• The anatomy
  • Queueing, Stalled
  • DNS Lookup, SSL
  • Green: TTFB (~ same as server response time)
  • Blue: Content Download (~ the size of resource)
• What to look for?
  • Big green - server side needs work
  • Big Blue - content size need work
  • Unusual value of DNS, SSL

Network timeline

Chrome devtools: Network panel

Stalled/Queued

Content download

TTFB

Gaps

Network timeline: TTFB

Chrome devtools: Network panel

More green:  Slow network or slow serverside

Network timeline

Chrome devtools: Network panel

More blue:  Heavy resource

Chrome devtools: Network panel: Tips and Limitations

• Multi-select relevant tabs (eg: JS and Xhr)
• Zoom-in using Overview part
• Take screenshots
• Use Throttling to check responsive sites
• Sort by Size and Time to look for heavy resources

• Network panel does not show javascript execution time
• Exact times are less useful - depend on network/computer

With Rails

Chrome devtools: Network panel

• Place application.js at the bottom if possible
• Use defer/async where possible
• Disallow inline Js
• Localize font css
• Use CDN
• Look for external references from css (esp in libraries)

Timeline/Profile panels

Chrome devtools

• Network tab doesn't catch slow JS
• Profile Js if there is too much JS (frameworks used, rich UI)
• TimeLine tab gives a Flamegraph, with some indications for poorly performing parts
• Profile tab gives a per method measurement
• Learn about Jank (frame times etc)
• Look for red parts

Thanks

Not covered here:

• Sources panel : workspaces, debugging
• Timeline panel: Flamegraph
• Profile: CPU and memory profiles
• Device mode
• Responsive view