Your SlideShare is downloading. ×
Tool it Up! - Session #2 - NetPanel
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Tool it Up! - Session #2 - NetPanel

235
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
235
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Date: August 21st 2013 By: Jean-Frédéric Nault Olivier Fortier
  • 2. Chrome Dev Tools Fast Web Development Tools Performance Analysis Tools &
  • 3. Fast Web Develoment Tools ● Elements Inspector ● CSS Inspector ● Javascript Console ● Managing Storage (webSql, IndexedDb, Local/Session Storage, Cookies)
  • 4. Performance Analysis Tools ● Auditing Tools ● Network activities ● Cpu Usage ● Rendering ● Memory Profiling
  • 5. Chrome's Development Tool • CTRL-SHIFT-I to unleash the awesomeness
  • 6. 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
  • 7. Elements Properties ● Edit/delete HTML tags properties Event Listeners ● Visualize event listeners of the page
  • 8. Resource
  • 9. 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
  • 10. 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
  • 11. Network Timeline 3 colors for timeline elements : ● Blue : Document ● Green : CSS ● Violet : Images ● Orange : Scripts Timeline statuses and information 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 Notice the blue and red lines - Blue line shows when Document Ready event is triggered - Red line shows when Windows.Load event is triggered
  • 12. 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.org http://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
  • 13. 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 : { }
  • 14. Performance Analysis Tools The Timeline
  • 15. Performance Analysis Tools The Timeline Gives you a performance overview ● Memory usage ● Occuring Events ● Rendering Highlights performance bottlenecks ● Javascript ● Paint time / Reflow ● Etc...
  • 16. Performance Analysis Tools The 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)
  • 17. Performance Analysis Tools The Timeline – Events view ● The Blue Line (domContentLoaded) ● The Red Line (Window load event) ● Events categories : Loading Script Rendering Painting
  • 18. Performance Analysis Tools The Timeline – Frame view It's all about Rendering Performance 60hz = 60 frame per seconde = 1/60 sec = 16.66666 ms 16 ms per frame!!!
  • 19. Performance Analysis Tools The Timeline – Frame view By the way... RequestAnimationFrame = good SetTimeOut / interval = bad http://athousandnodes.com/article/using-requestanimationframe-web-browser-animations-instead-settimeout
  • 20. 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
  • 21. Performance Analysis Tools Profile – 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
  • 22. Performance Analysis Tools Profile – Heap Snapshot 4 Differents Views Summary Tracking down specific objects based on their “type” (constructor name), because it shows objects in memory grouped by their constructor name. Comparison This view is the best way to verify that deletion is working properly. Containment This view is good for analyzing objects that are referenced in the global namespace… basically anything you put on the global window variable. Dominator This 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!!!
  • 23. 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
  • 24. 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
  • 25. Console https://developers.google.com/chrome-developer-tools/docs/console
  • 26. 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 Android https://developers.google.com/chrome-developer-tools/docs/remote-debugging
  • 27. Under the hood Tracing! Chrome://memory Chrome://tracing Console.time(key) Console.timeEnd(key) Devtool Extension