tool it up! - session #2 - netpanel

Date: August 21st 2013By: Jean-Frédéric Nault Olivier Fortier

Chrome Dev Tools

Fast Web Development Tools

Performance Analysis Tools

&

Fast Web Develoment Tools● Elements Inspector

● CSS Inspector

● Javascript Console

● Managing Storage (webSql, IndexedDb, Local/Session Storage, Cookies)

Performance Analysis Tools● Auditing Tools

● Network activities

● Cpu Usage

● Rendering

● Memory Profiling

Chrome's Development Tool

• CTRL-SHIFT-I to unleash the awesomeness

Elements

Inspect the source of the page

● Add/edit/delete HTML tags or text

● Computed style menu → Where do the styles come from for the selected element?

Styles● Enable/disable/add/edit/delete CSS rules

Metric● Box model of the element

Elements

Properties

● Edit/delete HTML tags properties

Event Listeners

● Visualize event listeners of the page

Resource

Network

● Loads all the resources used in the page

Status● Shows status code (200, 304, 404)● Not Modified = Resource is cached

Size● Size = Size of the response● Content = Size of the resource itself

Time● Time = Time for resource to load● Latency = Time between initial request and server's first response

Timeline● DNS Lookup : Time spent looking up for the website's IP ● Connecting : Time spent connecting to that server's IP● Sending : Time taken to send the request to server● Waiting : Time spent waiting for response from server● Receiving : Time taken to receive the resource from server

Network● Loads all the resources used in the page● First element loaded is the document. It shows the initial request and the parsing time

Status● Shows status code (200, 304, 404)● Not Modified = Resource is cached

Size● Size = Size of the response● Content = Size of the resource itself

Time● Time = Time for resource to load● Latency = Time between initial request and server's first response

NetworkTimeline

3 colors for timeline elements :● Blue : Document● Green : CSS● Violet : Images● Orange : Scripts

Timeline statuses and informationDNS Lookup : Time spent looking up for the website's IP Connecting : Time spent connecting to that server's IPSending : Time taken to send the request to serverWaiting : Time spent waiting for response from serverReceiving : Time taken to receive the resource from server

Notice the blue and red lines- Blue line shows when Document Ready event is triggered- Red line shows when Windows.Load event is triggered

Network

Har Format (HTTP Archive 1.2)

Simple Json Schema, Wich contain all the Metadata for reconstructing the network waterfall

Use Cases :Attach to a bug report

Online Har viewer :http://www.softwareishard.com/har/viewer/

Trend Analyser :httparchive.orghttp://www.httparchive.org/trends.php

Regression test :

log creator browser pages pageTimings entries request response cookies headers queryString postData params content cache timings

Data Structure

Sources

● Basically shows the source code of the page

● For people who start crying when seeing a minified javascript source, know that the Pretty Print button might make you smile. Just click here : { }

Performance Analysis ToolsThe Timeline

Performance Analysis ToolsThe Timeline

Gives you a performance overview● Memory usage● Occuring Events● Rendering

Highlights performance bottlenecks● Javascript● Paint time / Reflow● Etc...

Performance Analysis ToolsThe Timeline

● Events (shows all recorded events by event category)● Frames (shows your page's rendering performance)● Memory (shows your page's memory usage over time)

Performance Analysis ToolsThe Timeline – Events view

● The Blue Line (domContentLoaded)● The Red Line (Window load event)● Events categories :

Loading

Script

Rendering

Painting

Performance Analysis ToolsThe Timeline – Frame view

It's all about Rendering Performance

60hz = 60 frame per seconde = 1/60 sec = 16.66666 ms

16 ms per frame!!!

Performance Analysis ToolsThe Timeline – Frame view

By the way...RequestAnimationFrame = good

SetTimeOut / interval = bad

http://athousandnodes.com/article/using-requestanimationframe-web-browser-animations-instead-settimeout

Profiles

You can gather different kind of information by selecting different profiles and recording what's happening on page load.

Collect JavaScript CPU profile● Shows where the execution time is spent in your JS functions

Collect CSS Selector profile● Shows how long the selector matching has taken in total and how many times a

certain selection has matched Dom element.

Heap Snapshot● Inspecting memory usage of a given page at a given time

Performance Analysis ToolsProfile – Heap Snapshot

Object Graph

● Root● Primary type (boolean,nb,string)● Object (Key Value)● Retaining tree● Distance● Shallow Size● Retained Size

Few Terms

Memory leak can occur, When you keep a retaining path to a node by accident

Performance Analysis ToolsProfile – Heap Snapshot

4 Differents ViewsSummaryTracking down specific objects based on their “type” (constructor name), because it shows objects in memory grouped by their constructor name.

ComparisonThis view is the best way to verify that deletion is working properly.

ContainmentThis view is good for analyzing objects that are referenced in the global namespace… basically anything you put on the global window variable.

DominatorThis view is a good way to verify that your references are all properly contained (no unexpected references hanging around), and that deleting things is really working

!!! USE THIS IN INCOGNITO!!!

Audits

The Audits panel analyses page as it loads and provides suggestions and optimizations to decrease page load time and increase responsiveness.

Provides audits for● Network utilization● Web page performance● Other audits you might want to add

More complete audits using PageSpeed

PageSpeed● Free-to-download plugin

● Much more complete version of the Web Page Performance Analyzer from the « Audits » tab.

● Gives you very precise hints on what to do to improve site's performance.

● Shows actual results of analysis, and sometimes it even does the work of improving things for you.

● Minify HTML/CSS/JS → Tells you by how much % you could reduce page size by compressing/minifying these files.

● Optimize images → Actually compresses it for you and provides a link to the optimized image! (Warning : Some compressed image that are provided might have a huge quality drop, even if it says « lossless compression », so it's still a case by case process.

To download Page Speed : https://developers.google.com/speed/pagespeed/insights_extensions

Console

https://developers.google.com/chrome-developer-tools/docs/console

Chrome Devtool in remote !?

/opt/google/chrome/google-chrome --remoteebugging-port=9222 –incognito

TIPS!For remote access :ssh -L 0.0.0.0:9223:localhost:9222 localhost -N

Remote Debugging on Androidhttps://developers.google.com/chrome-developer-tools/docs/remote-debugging

Under the hood

Tracing!Chrome://memoryChrome://tracing

Console.time(key)Console.timeEnd(key)

Devtool Extension