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

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

C620790ae5bf5b50c245b2e0ef95f338?s=128

Dean Hume

June 21, 2016
Tweet

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

  9. None
  10. None
  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

  14. None
  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

  45. None
  46. None
  47. None
  48. None
  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!