How to do anything in the Chrome DevTools Network panel

This is my presentation from Search 'n Stuff on using the Chrome DevTools Network Panel for effective debugging.

Transcript

1. How to do anything in Chrome DevTools
2. What I do I solve problems and build capabilities About me Technical SEO and Analytics Consultant
3. #SearchNStuff @nathanless How to do anything in Chrome DevTools the Network Panel
4. #SearchNStuff @nathanless Set up your own Chrome property for auditing
5. #SearchNStuff @nathanless Ctrl + Shift + I to open the network tab Hit Ctrl + R to reload
6. #SearchNStuff @nathanless Click “Disable cache” to emulate first time visits
7. #SearchNStuff @nathanless Use the stop and clear icons as necessary
8. #SearchNStuff @nathanless The summary pane shows a useful overview of what the browser has loaded
9. #SearchNStuff @nathanless The waterfall shows information about each request in chronological order
10. #SearchNStuff @nathanless But you can also right-click the header to change the waterfall sort order
11. #SearchNStuff @nathanless Hover to see a preview of the timing information
12. #SearchNStuff @nathanless You can also navigate to the timing tab to see a breakdown
13. #SearchNStuff @nathanless Click the cog icon and select “Big request rows” and “Screenshots”
14. #SearchNStuff @nathanless Right-click the name panel and add “domain” as a column.
15. #SearchNStuff @nathanless Click the funnel icon to toggle filters
16. #SearchNStuff @nathanless Click the buttons on to filter by request type
17. #SearchNStuff @nathanless Use the filter box to filter requests by name
18. #SearchNStuff @nathanless There is also an option to filter by request property https://developer.chrome.com/docs/devtools/network/reference#filter-by-property
19. #SearchNStuff @nathanless It's also possible to add multiple conditions and use wildcards
20. #SearchNStuff @nathanless Click the “Invert” checkbox to reverse conditions
21. #SearchNStuff @nathanless Use the “Preserve log checkbox” the log to follow redirects
22. #SearchNStuff @nathanless Click the request to see information about the request and the response
23. #SearchNStuff @nathanless Navigate to the initiator tab to see the request initiator chain
24. #SearchNStuff @nathanless Hold “Shift” over a request to see initiator and dependency information highlighted
25. #SearchNStuff @nathanless Hit Ctrl + Shift + P to open the command menu
26. #SearchNStuff @nathanless Type “Disable JavaScript” to turn off JS
27. #SearchNStuff @nathanless Type “Enable JavaScript” to bring it back
28. #SearchNStuff @nathanless Right-click a request to block it
29. #SearchNStuff @nathanless Shortcuts also exist for Screenshots
30. #SearchNStuff @nathanless Type “Dock” to change the placement of dev tools
31. #SearchNStuff @nathanless Type “Show Network Conditions” to override the user agent or throttle the connection
32. #SearchNStuff @nathanless Disable “Use browser default” and select Googlebot, and refresh
33. #SearchNStuff @nathanless You can also slow down your connection in Network Connections
34. #SearchNStuff @nathanless
35. Thank You #SearchNStuff @nathanless