Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Brighton SEO 2021 - A Deep Dive into the Depths of DevTools

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/

  • Be the first to comment

Brighton SEO 2021 - A Deep Dive into the Depths of DevTools

  1. 1. defaced A deep dive into the depths of DevTools.
  2. 2. defaced Me.
  3. 3. defaced Developer. Designer. Tinkerer.
  4. 4. defaced Chrome DevTools?! Inspect tool.
  5. 5. defaced Let’s dive right in. *pun intended.
  6. 6. defaced Windows. CTRL-SHIFT-I
  7. 7. defaced OSX. CMD-OPTION-I
  8. 8. defaced Network Requests. Asset clean up.
  9. 9. defaced
  10. 10. defaced
  11. 11. defaced
  12. 12. defaced Filtering results. dfcd.co/filters
  13. 13. defaced
  14. 14. defaced Filter
  15. 15. defaced Filter
  16. 16. defaced Filter
  17. 17. defaced WordPress. Common performance pitfalls.
  18. 18. defaced Filter
  19. 19. defaced Identifying files used by plugins that are not relevant to the page that they’re loading on.
  20. 20. defaced
  21. 21. defaced The shift trick. Just hold shift, no… really.
  22. 22. defaced
  23. 23. defaced
  24. 24. defaced Robots.ttfb Performance shortcut.
  25. 25. defaced
  26. 26. defaced Console. Where the magic happens.
  27. 27. defaced
  28. 28. defaced Uh oh! JavaScript.
  29. 29. defaced awful evil a dumpster fire JavaScript is… amazing frustrating weird sh*t
  30. 30. defaced The DOM. Document Object Model.
  31. 31. defaced Returns all matching elements.
  32. 32. defaced JavaScript
  33. 33. defaced JavaScript
  34. 34. defaced Returns an array of all matching elements.
  35. 35. defaced Other shortcuts.
  36. 36. defaced JavaScript
  37. 37. defaced JavaScript
  38. 38. defaced JavaScript
  39. 39. defaced Display data in a table.
  40. 40. defaced JavaScript
  41. 41. defaced JavaScript
  42. 42. defaced JavaScript
  43. 43. defaced JavaScript
  44. 44. defaced Send data to the clipboard.
  45. 45. defaced JavaScript
  46. 46. defaced JavaScript
  47. 47. defaced
  48. 48. defaced What else? More quick wins.
  49. 49. defaced JavaScript
  50. 50. defaced JavaScript
  51. 51. defaced JavaScript
  52. 52. defaced Snippets. Building your tool chest.
  53. 53. defaced
  54. 54. defaced
  55. 55. defaced Local Overrides. Editing on the fly.
  56. 56. defaced Enabling local overrides
  57. 57. defaced
  58. 58. defaced
  59. 59. defaced :-(
  60. 60. defaced
  61. 61. defaced Saving multiple changes. The ?query string trick.
  62. 62. defaced example.com/?cls-fix example.com/?webp-fix example.com/?test11!final-2
  63. 63. defaced brightonseo.com/?modern-web
  64. 64. defaced
  65. 65. defaced Testing your changes. Lighthouse.
  66. 66. defaced
  67. 67. defaced
  68. 68. defaced Lighthouse Comparison Tool dfcd.co/lhct
  69. 69. defaced
  70. 70. defaced
  71. 71. defaced
  72. 72. defaced Inspecting the inspector. “We need to go deeper.”
  73. 73. defaced
  74. 74. defaced
  75. 75. defaced Thank you. dfcd.co/bseo21-slides @defaced bamboonine.co.uk

×