Brighton SEO 2021 - A Deep Dive into the Depths of DevTools Resources for all the code snippets and more from this talk can be found here: https://defaced.dev/talks/brightonseo-depths-of-devtools/

1. defaced
A deep dive
into the depths of DevTools.

2. defaced
Me.

3. defaced
Developer.
Designer.
Tinkerer.

4. defaced
Chrome DevTools?!
Inspect tool.

5. defaced
Let’s dive right in.
*pun intended.

6. defaced
Windows.
CTRL-SHIFT-I

7. defaced
OSX.
CMD-OPTION-I

8. defaced
Network Requests.
Asset clean up.

9. defaced

10. defaced

11. defaced

12. defaced
Filtering results.
dfcd.co/filters

13. defaced

14. defaced
Filter

15. defaced
Filter

16. defaced
Filter

17. defaced
WordPress.
Common performance pitfalls.

18. defaced
Filter

19. defaced
Identifying files used by plugins that are not relevant to the page that they’re loading on.

20. defaced

21. defaced
The shift trick.
Just hold shift, no… really.

22. defaced

23. defaced

24. defaced
Robots.ttfb
Performance shortcut.

25. defaced

26. defaced
Console.
Where the magic happens.

27. defaced

28. defaced
Uh oh!
JavaScript.

29. defaced
awful
evil
a dumpster fire
JavaScript is… amazing
frustrating
weird
sh*t

30. defaced
The DOM.
Document Object Model.

31. defaced
Returns all matching elements.

32. defaced
JavaScript

33. defaced
JavaScript

34. defaced
Returns an array of all matching
elements.

35. defaced
Other shortcuts.

36. defaced
JavaScript

37. defaced
JavaScript

38. defaced
JavaScript

39. defaced
Display data in a table.

40. defaced
JavaScript

41. defaced
JavaScript

42. defaced
JavaScript

43. defaced
JavaScript

44. defaced
Send data to the clipboard.

45. defaced
JavaScript

46. defaced
JavaScript

47. defaced

48. defaced
What else?
More quick wins.

49. defaced
JavaScript

50. defaced
JavaScript

51. defaced
JavaScript

52. defaced
Snippets.
Building your tool chest.

53. defaced

54. defaced

55. defaced
Local Overrides.
Editing on the fly.

56. defaced
Enabling local overrides

57. defaced

58. defaced

59. defaced
:-(

60. defaced

61. defaced
Saving multiple changes.
The ?query string trick.

62. defaced
example.com/?cls-fix
example.com/?webp-fix
example.com/?test11!final-2

63. defaced
brightonseo.com/?modern-web

64. defaced

65. defaced
Testing your changes.
Lighthouse.

66. defaced

67. defaced

68. defaced
Lighthouse Comparison Tool
dfcd.co/lhct

69. defaced

70. defaced

71. defaced

72. defaced
Inspecting the inspector.
“We need to go deeper.”

73. defaced

74. defaced

75. defaced
Thank you.
dfcd.co/bseo21-slides
@defaced
bamboonine.co.uk