Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Dean Hume

June 21, 2016
Tweet

More Decks by Dean Hume

Other Decks in Programming

Transcript

  1. Unleash the power
    A guide to browser developer tools

    View Slide

  2. http://10.35.0.8

    View Slide

  3. Robin Osborne
    @rposbo

    View Slide

  4. Dean Hume
    @deanohume

    View Slide

  5. History of Dev tools

    View Slide

  6. Internet
    Explorer 7

    View Slide

  7. Firebug

    View Slide

  8. Developer tools are everywhere

    View Slide

  9. View Slide

  10. View Slide

  11. Browserist
    noun
    1. Discrimination or prejudice based on web browser.
    2. The belief that a particular web browser is superior to others.

    View Slide

  12. mozilla.org/en-US/firefox/developer

    View Slide

  13. Stable Canary

    View Slide

  14. View Slide

  15. This Session

    View Slide

  16. Four personas

    View Slide

  17. Prototyper
    Four personas

    View Slide

  18. Prototyper
    Four personas
    Debugger

    View Slide

  19. Prototyper
    Four personas
    Debugger Perf Nerd

    View Slide

  20. Prototyper
    Four personas
    Debugger Perf Nerd Power user

    View Slide

  21. Everyone!

    View Slide

  22. The Prototyper

    View Slide

  23. 1. Understanding the layout
    Prototyping

    View Slide

  24. 1. Understanding the layout
    2. Workspaces
    Prototyping

    View Slide

  25. 1. Understanding the layout
    2. Workspaces
    3. Styles
    Prototyping

    View Slide

  26. 1. Understanding the layout
    2. Workspaces
    3. Styles
    4. Device Mode
    Prototyping

    View Slide

  27. buildingstartupteams.com

    View Slide

  28. Find
    your way
    around

    View Slide

  29. Let’s go!

    View Slide

  30. 1. Understanding the layout
    Summary - Prototyping

    View Slide

  31. 1. Understanding the layout
    2. Workspaces
    Summary - Prototyping

    View Slide

  32. 1. Understanding the layout
    2. Workspaces
    3. Styles
    Summary - Prototyping

    View Slide

  33. 1. Understanding the layout
    2. Workspaces
    3. Styles
    4. Device Mode
    Summary - Prototyping

    View Slide

  34. The Debug er

    View Slide

  35. 1. The Console
    Debug ing

    View Slide

  36. 1. The Console
    2. Inspecting
    Debug ing

    View Slide

  37. 1. The Console
    2. Inspecting
    3. Debugging on Devices
    Debug ing

    View Slide

  38. bit.ly/chrome-api-ref
    ProtipTM

    View Slide

  39. Let’s go!

    View Slide

  40. 1. The Console
    Summary - Debug ing

    View Slide

  41. 1. The Console
    2. Inspecting
    Summary - Debug ing

    View Slide

  42. 1. The Console
    2. Inspecting
    3. Debugging on Devices
    Summary - Debug ing

    View Slide

  43. Perf Nerd

    View Slide

  44. RAIL

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. 1. Analyze scrolling performance
    Performance

    View Slide

  50. 1. Analyze scrolling performance (R)
    Performance

    View Slide

  51. 1. Analyze scrolling performance (R)
    2. Improve Animations
    Performance

    View Slide

  52. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    Performance

    View Slide

  53. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    3. Blocking Resources
    Performance

    View Slide

  54. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    3. Blocking Resources (I)
    Performance

    View Slide

  55. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    3. Blocking Resources (I)
    4. Page Load
    Performance

    View Slide

  56. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    3. Blocking Resources (I)
    4. Page Load (L)
    Performance

    View Slide

  57. mozilla.org/en-US/firefox/developer

    View Slide

  58. Let’s go!

    View Slide

  59. csstriggers.com
    ProtipTM

    View Slide

  60. csstriggers.com
    ProtipTM

    View Slide

  61. aerotwist.com/blog/bigrig/
    ProtipTM

    View Slide

  62. 1. Analyze scrolling performance (R)
    Summary - Performance

    View Slide

  63. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    Summary - Performance

    View Slide

  64. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    3. Blocking Resources (I)
    Summary - Performance

    View Slide

  65. 1. Analyze scrolling performance (R)
    2. Improve Animations (A)
    3. Blocking Resources (I)
    4. Page Load (L)
    Summary - Performance

    View Slide

  66. The Power User

    View Slide

  67. 1. Understanding security
    Power User

    View Slide

  68. 1. Understanding security
    2. Accessibility
    Power User

    View Slide

  69. 1. Understanding security
    2. Accessibility
    3. Resources
    Power User

    View Slide

  70. Let’s go!

    View Slide

  71. ssllabs.com/ssltest

    View Slide

  72. 1. Understanding security
    Summary - Power User

    View Slide

  73. 1. Understanding security
    2. Accessibility
    Power User
    Summary - Power User

    View Slide

  74. 1. Understanding security
    2. Accessibility
    3. Resources
    Summary - Power User

    View Slide

  75. Summary

    View Slide

  76. Prototyper
    Summary

    View Slide

  77. Prototyper
    Summary
    Debugger

    View Slide

  78. Prototyper
    Summary
    Debugger Perf Nerd

    View Slide

  79. Prototyper
    Summary
    Debugger Perf Nerd Power user

    View Slide

  80. Further Reading

    View Slide

  81. Further Reading
    ● bit.ly/chrome-dev-docs
    ● umaar.com/dev-tips

    View Slide

  82. Further
    Viewing

    View Slide

  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

    View Slide

  84. ProtipTM
    @firefoxdevtools @chromedevtools @edgedevtools

    View Slide

  85. Dean Hume @deanohume
    Thank you!

    View Slide