Unleashing the power within: A hands-on guide to browser developer tools

This tutorial was first presented at Velocity Conference Santa Clara on the 21st June 2016.

http://conferences.oreilly.com/velocity/devops-web-performance-ca/public/schedule/detail/49857

Presentation Details
----------------------------------
Just as great warriors must first master their weapons, developers need to master their developer tools. Did you know that the very browser you are using is capable of some pretty amazing things? Using the power of your browser, you can develop, debug, and diagnose issues with a few clicks of your mouse.

However, with great power comes great responsibility. Knowing how to use the developer tools is an important part of becoming a true warrior. Dean Hume teaches you exactly how to use the tools to become a better developer, one web page at a time. Dean walks you through the basics of Chrome Developer Tools before diving into some of the deeper aspects of the browser. You’ll leave knowing how to use developer tools in Chrome to improve web application performance and how to debug and diagnose problems quickly.

Topics include:

- Building websites directly through the browser
- Debugging JavaScript and CSS
- Inspecting and editing elements in the DOM
- Improving mobile website development
- Debugging and working with service workers
- How to performance audit your website
- Understanding the timeline
- Ensuring your website is 60 FPS

For more information visit http://deanhume.com

Transcript

1. Unleash the power A guide to browser developer tools
2. http://10.35.0.8
3. Robin Osborne @rposbo
4. Dean Hume @deanohume
5. History of Dev tools
6. Internet Explorer 7
7. Firebug
8. Developer tools are everywhere
11. Browserist noun 1. Discrimination or prejudice based on web browser. 2. The belief that a particular web browser is superior to others.
12. mozilla.org/en-US/firefox/developer
13. Stable Canary
15. This Session
16. Four personas
17. Prototyper Four personas
18. Prototyper Four personas Debugger
19. Prototyper Four personas Debugger Perf Nerd
20. Prototyper Four personas Debugger Perf Nerd Power user
21. Everyone!
22. The Prototyper
23. 1. Understanding the layout Prototyping
24. 1. Understanding the layout 2. Workspaces Prototyping
25. 1. Understanding the layout 2. Workspaces 3. Styles Prototyping
26. 1. Understanding the layout 2. Workspaces 3. Styles 4. Device Mode Prototyping
27. buildingstartupteams.com
28. Find your way around
29. Let’s go!
30. 1. Understanding the layout Summary - Prototyping
31. 1. Understanding the layout 2. Workspaces Summary - Prototyping
32. 1. Understanding the layout 2. Workspaces 3. Styles Summary - Prototyping
33. 1. Understanding the layout 2. Workspaces 3. Styles 4. Device Mode Summary - Prototyping
34. The Debug er
35. 1. The Console Debug ing
36. 1. The Console 2. Inspecting Debug ing
37. 1. The Console 2. Inspecting 3. Debugging on Devices Debug ing
38. bit.ly/chrome-api-ref ProtipTM
39. Let’s go!
40. 1. The Console Summary - Debug ing
41. 1. The Console 2. Inspecting Summary - Debug ing
42. 1. The Console 2. Inspecting 3. Debugging on Devices Summary - Debug ing
43. Perf Nerd
44. RAIL
49. 1. Analyze scrolling performance Performance
50. 1. Analyze scrolling performance (R) Performance
51. 1. Analyze scrolling performance (R) 2. Improve Animations Performance
52. 1. Analyze scrolling performance (R) 2. Improve Animations (A) Performance
53. 1. Analyze scrolling performance (R) 2. Improve Animations (A) 3. Blocking Resources Performance
54. 1. Analyze scrolling performance (R) 2. Improve Animations (A) 3. Blocking Resources (I) Performance
55. 1. Analyze scrolling performance (R) 2. Improve Animations (A) 3. Blocking Resources (I) 4. Page Load Performance
56. 1. Analyze scrolling performance (R) 2. Improve Animations (A) 3. Blocking Resources (I) 4. Page Load (L) Performance
57. mozilla.org/en-US/firefox/developer
58. Let’s go!
59. csstriggers.com ProtipTM
60. csstriggers.com ProtipTM
61. aerotwist.com/blog/bigrig/ ProtipTM
62. 1. Analyze scrolling performance (R) Summary - Performance
63. 1. Analyze scrolling performance (R) 2. Improve Animations (A) Summary - Performance
64. 1. Analyze scrolling performance (R) 2. Improve Animations (A) 3. Blocking Resources (I) Summary - Performance
65. 1. Analyze scrolling performance (R) 2. Improve Animations (A) 3. Blocking Resources (I) 4. Page Load (L) Summary - Performance
66. The Power User
67. 1. Understanding security Power User
68. 1. Understanding security 2. Accessibility Power User
69. 1. Understanding security 2. Accessibility 3. Resources Power User
70. Let’s go!
71. ssllabs.com/ssltest
72. 1. Understanding security Summary - Power User
73. 1. Understanding security 2. Accessibility Power User Summary - Power User
74. 1. Understanding security 2. Accessibility 3. Resources Summary - Power User
75. Summary
76. Prototyper Summary
77. Prototyper Summary Debugger
78. Prototyper Summary Debugger Perf Nerd
79. Prototyper Summary Debugger Perf Nerd Power user
80. Further Reading
81. Further Reading • bit.ly/chrome-dev-docs • umaar.com/dev-tips
82. Further Viewing
83. Further Viewing Prototyping • youtube.com/watch?v=dJR-n8szgBc • youtube.com/watch?v=QeKwrdGr1sI Rail • youtube.com/watch?v=wO9GGY17NXY General • youtube.com/watch?v=qnF1Xslb5F0 • youtube.com/watch?v=0eSAsi3GPh4
84. ProtipTM @firefoxdevtools @chromedevtools @edgedevtools
85. Dean Hume @deanohume Thank you!