Using Chrome Devtools

Topics covered

• The Elements and console panel
• The  Network panel
• Rendering, performance and Rails

Elements: review the html and css

Chrome devtools: Overall anatomy

Elements: examine and edit css

Chrome devtools: Elements panel

Elements: view local change history

Chrome devtools: Elements panel

Elements: examine event handlers

Chrome devtools: Elements panel

Console: debug javascript

Chrome devtools: Console panel

Note:

• Frames are separated environments in console
• This is Chrome's JS runtime (v8) . May not apply to our production runtime (exec.js)

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: $0

Chrome devtools: Console panel

$0 gives the currently selected element in Elements panel

Thanks to https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d#.t3icnbhze

Console: $

Chrome devtools: Console panel

$0 gives the first selected element. No Jquery

Console: copy

Chrome devtools: Console panel

Copy the object to the clipboard

  copy($0)

Console: $_

Chrome devtools: Console panel

Shows the last result

    $_

Console: monitor

Chrome devtools: Console panel

console.log when the function is called

  function foo() { }
  monitor(foo)

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 Panel

Sources: general view

Chrome devtools: Sources panel

Sources: CMD+P (like Sublime)

Chrome devtools: Sources panel

Cmd/Ctrl P

Format it

Sources: Make it pretty

Chrome devtools: Overall anatomy: panels

The network panel

The network panel

Chrome devtools

Customisations

Chrome devtools: Network panel

Disable the cache

Show Overview

Use small request rows

Capture screenshots

Customisations

Chrome devtools: Network panel

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

Chrome devtools: Network panel: example

overview

Chrome devtools: Network panel: example2

Chrome devtools: Network panel: with filmstrip

Chrome devtools: Network panel: with filmstrip

Detailed view

Timestamp

 (around DomContentLoaded here)

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

Statuses

Chrome devtools: Network panel: Things to notice

Zoomed in

The 'gap'

Sizes and Times

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 (unless its 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 details

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

• 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

Chrome devtools: Network panel: Some Limitations

Limitations

• 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)

easier said than done :)

Thanks

@h6165

Abhishek Yadav

ரூபீ ப்ரோக்ராமர்

Co-organizer: Chennai.rb