Ruth Everett - Demystifying Chrome Dev Tools (BrightonSEO September 2023)

In this talk, Ruth will share actionable ways the free Chrome DevTools feature can help SEOs review, audit, trouble-shoot and test websites of all sizes.

She will also share some console tips and tricks to make the most out of the tool.

Transcript

1. Demystifying Chrome Dev Tools Ruth Everett SearchPilot speakerdeck.com/rvth @rvtheverett
2. Learn some new things about Chrome Dev Tools
3. Some of the things it can be useful for
4. Hi, I'm Ruth!
5. SEO Testing Consultant @ SearchPilot
6. I like falling down technical rabbit holes and digging into data
7. I also really love dogs
8. What is Chrome DevTools? @rvtheverett @SearchPilot
9. What is Chrome Dev Tools? Free tool built into the Chrome browser
10. What is Chrome Dev Tools? Free tool built into the Chrome browser Provides access to features that enable you to audit elements on your website in real time
11. What is Chrome Dev Tools? Free tool built into the Chrome browser Provides access to features that enable you to audit elements on your website in real time Valuable tool to have in your arsenal and is just a click away
12. Accessing Chrome DevTools
13. Accessing Chrome DevTools
14. A full view of DevTools
16. There’s a lot to cover… and I don’t have time for everything today
17. Review & Validate Elements Make the most of the Console Run Site Speed & Performance Audits Test different views
18. Review and Validate Elements @rvtheverett @SearchPilot
19. Ensure content is discoverable @rvtheverett @SearchPilot Review and Validate Elements
20. Ensure content is discoverable Elements panel > view the Document Object Model (DOM) of your page.
21. Ensure content is discoverable Elements panel > view the Document Object Model (DOM) of your page. Meta tags Canonical tags Hreflang tags Main body content Page structure
22. Ensure content is discoverable Displays the JavaScript rendered version of the page
23. Ensure content is discoverable If you are injecting content or changing elements using JavaScript, you will see differences between this and the appearance of the HTML source code. Displays the JavaScript rendered version of the page
24. Perform a JavaScript Parity Analysis Right click > Copy > Copy element
25. Perform a JavaScript Parity Analysis Meta tags Canonicals Indexing tags Main headings Key content Diff checker HTML Only JavaScript rendered https://www.diffchecker.com/
26. Find and Validate Useful Elements @rvtheverett @SearchPilot Review and Validate Elements
27. Find and Validate Useful Elements Search Function Title and meta tags Canonicals Hreflang configuration Robot meta tags
28. Find and Validate Useful Elements Element selector tool
29. Find and Validate Useful Elements Element selector tool Hover over and view different elements
30. Verify alt text @rvtheverett @SearchPilot Review and Validate Elements
31. Verify image alt text Element selector > Click an image > View alt text
32. Site Speed & Performance Audits @rvtheverett @SearchPilot
33. Run Google Lighthouse @rvtheverett @SearchPilot Site Speed & Performance Audits
34. Google Lighthouse Running a Lighthouse Test
35. Google Lighthouse - Performance Score Running a Lighthouse Test
36. Google Lighthouse - Performance Metrics Lighthouse Metrics Poor Needs Improvement Good
37. Google Lighthouse - Performance Opportunities Lighthouse Opportunities
38. Google Lighthouse - Performance Opportunities Lighthouse Opportunities
39. Google Lighthouse - Accessibility Accessibility Score
40. Identify Core Web Vitals Issues @rvtheverett @SearchPilot Site Speed & Performance Audits
41. Layout shifting areas and core web vitals Console > Rendering > Layout Shift Regions & Core Web Vitals
42. Layout shifting areas Breadcrumb element Main page content Identify the exact elements causing layout shifts
43. Core web vitals
44. Core web vitals Metrics and timings are displayed as you interact with the page
45. View Performance Insights @rvtheverett @SearchPilot Site Speed & Performance Audits
46. Performance Insights
47. Performance Insights
48. Performance Insights View a visual of the page loading. Scroll across different moments to view loading and timings.
49. Performance Insights
50. Performance Insights
51. Set Up Local Overrides @rvtheverett @SearchPilot Site Speed & Performance Audits
52. Local Overrides Amend CSS Files Remove rendering blocking resources Check Layout Shift fixes Comment out JavaScript files Lazy load images
53. Local Overrides Sources > Overrides > Select folder for overrides
54. Local Overrides Sources > Overrides > Select folder for overrides Enable Local Overrides
55. Local Overrides Make changes to the HTML here Sources > Page > Select page > Save for Overrides
56. The power of the console @rvtheverett @SearchPilot
57. Find JavaScript errors @rvtheverett @SearchPilot The power of the console
58. Errors Issues JavaScript Console Find JavaScript Errors
59. JavaScript Console Find JavaScript Errors Identify errors that affect page rendering and indexability Console Reference Guide
60. Find all links on a page @rvtheverett @SearchPilot The power of the console
61. querySelectorAll(selector) Return all matching elements
62. querySelectorAll(selector) querySelectorAll('a') Return all matching elements Return all a links
63. querySelectorAll ($$('a')) Using $$ before the selector will display an array of elements.
64. querySelectorAll ($$('a')) table($$('a')) Using $$ before the selector will display an array of elements. Display array data in a table format
66. table($$('a'), ['text', 'href', 'rel'])
67. Find images and their height and width @rvtheverett @SearchPilot The power of the console
68. table($$('img'), ['src', 'width', 'height'])
69. Test different views @rvtheverett @SearchPilot
70. Emulate multi-device responsiveness @rvtheverett @SearchPilot Test Different Views
71. Emulate multi-device responsiveness Device Toolbar Select and shift between views
72. Emulate multi-device responsiveness iPhone 12 iPad Mini Galaxy Fold
73. Switch User Agent @rvtheverett @SearchPilot Test Different Views
74. Switch User Agents Network Conditions > Select User Agent
75. Switch User Agents Ability to add a custom user agent string Network Conditions > Select User Agent
76. Disable JavaScript @rvtheverett @SearchPilot Test Different Views
77. Disable JavaScript Run Command Type and select Disable JavaScript
78. Disable JavaScript
79. JavaScript Disabled
80. JavaScript Enabled
81. Helpful & Fun Extras @rvtheverett @SearchPilot
82. Copy x-path or css selectors for scraping/crawling @rvtheverett @SearchPilot Fun Extras
83. Copy x-path or CSS selectors
84. Make edits to elements @rvtheverett @SearchPilot Fun Extras
85. Make edits to elements
86. Take full page screenshots @rvtheverett @SearchPilot Fun Extras
87. Take full page screenshots Run Command > Type screenshot > Select ‘Capture full size screenshot’
88. Take full page screenshots
89. So much more… - Find non-secure resources - View header responses - Record performance - View network waterfall - Review resource coverage - Identify unused code - Disable cache - Beautify code for easy review
90. Find non-secure resources
91. Find non-secure resources View Valid HTTPS Certificate Mixed Content Issues Unsecure Resources Security Panel
92. View Header Response
93. View Header Response Network > Headers List of resources
94. View Header Response Request URL Network > Headers
95. View Header Response Request Method Network > Headers
96. View Header Response Status Code Network > Headers
97. View Header Response Content-Encoding Network > Headers
98. Record Performance
99. Record Performance View performance of interactions on the page.
100. Record Performance Reload the page to view performance of the page load
101. Record Performance Filmstrip Web Vitals Timings
102. Record Performance - Filmstrip Filmstrip Screenshot of the page at the point of load
103. Record Performance - Web Vitals Web Vitals
104. Record Performance - Web Vitals First Paint (FP) - the time taken by the first pixel when loaded First Contentful Paint (FCP) - when the first piece of content renders Largest Contentful Paint (LCP) - the time taken for the largest element on the page to load First Meaningful Paint (FMP) - the time taken to provide the first piece of meaningful information to users Dom Content Loaded (DCL) - when the HTML document has finished loading
105. Record Performance - Network Waterfall
106. Review resource coverage and identify unused code
107. Resource Coverage
108. Resource Coverage
109. Disable cache
110. Disable Cache Network Panel > Tick Disable cache
111. Beautify code for easy review
112. Beautify code for easy review
113. 7+ SEO Test Ideas to Grow Your Organic Traffic Live Webinar 21 September 2023 6pm BST | 1pm ET | 10am PT
114. Thank You! rvtheverett linkedin.com/in/ruth-everett/