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
   

   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