Chrome is not just a great browser for viewing websites, but also an invaluable tool for building websites. Out of the box, Chrome ships with “developers tools”. Many web developers are aware of this and make use of some of the tools it provides. However, most developers only scratch the surface of what the browser can do. Join in as we take a deep-dive into the Chrome developer tools and learn, among other things, how to: – Quickly test styling fixes – Emulate handheld devices to test responsive designs – Easily navigate and debug JavaScript – Use the JavaScript console – View form submissions – Monitor AJAX requests – Check for performance issues – Troubleshoot caching issues – Create and use your own snippets

1. Micah Wood
@wpscholar
https://wpscholar.com/wcraleigh2016
Using Chrome
Developer Tools

2. Open from Menu

3. Open by Right Clicking

5. Elements Panel

6. Navigating the DOM

8. Searching the DOM

10. Editing the DOM

11. Toggle Classes

13. Add / Edit Attributes

15. Edit Elements

18. Delete Elements

20. Locating Styles

21. Filter Styles

23. Computed Styles

25. Editing Styles

26. Toggle Specific Styles

28. Edit Units

30. Create New Style Rules

32. Toggle Element State

34. View Rendered Fonts

36. Network Panel

37. Waterfall View

39. Table View

43. Filtering Table View

51. Detail View

53. Disable Cache

55. Network Throttling

58. Replay AJAX Requests

60. Device Toolbar

61. Responsive Breakpoints

63. Emulate Devices

65. Sources Panel

66. Find and Open Files

68. Pretty Print

70. Breakpoints

72. Persisting Changes

73. Edit Source Files in the Browser

74. Stage Persisted Changes

75. Snippets

77. Console

78. document.querySelector()

80. document.querySelectorAll()

82. $0, $1, $2, $3, $4

84. inspect()

86. Application Panel

87. Clear Cookies

89. View Local Storage

91. More Tools

92. Emulate Print Media

94. User Agent Spoofing

97. Search Everything

100. Settings

103. Resources
• Chrome Snippets - http://bgrins.github.io/devtools-snippets/
• Chrome Tips - https://wpscholar.com/?s=chrome
• 25 Tips and Tricks - https://www.keycdn.com/blog/chrome-devtools/
• Chrome Command Line API - http://developer.telerik.com/content-
types/tutorials/easier-web-application-debugging-command-line-api/

104. Micah Wood
@wpscholar
https://wpscholar.com/wcraleigh2016
Using Chrome
Developer Tools