Skip to content

Instantly share code, notes, and snippets.

@Elandlord

Elandlord/browser-dev-tools-tips.md

Created July 12, 2021 18:06
Show Gist options
  • Save Elandlord/cc97dc2dc7d16f9c81c368f5dd2ef2ec to your computer and use it in GitHub Desktop.
Save Elandlord/cc97dc2dc7d16f9c81c368f5dd2ef2ec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
browser-dev-tools-tips.md

Shortcut console: command + shift + j

Design mode (free modify text on page)

  • Open console > document.designMode = "on"

Command palette (check tools)

  • Open console > command p
  • Screenshot > screenshot
  • Find CSS / JS file > coverage red implies unused, blue implies used code
  • document query selector equivalent > $('h1') (just like jQuery) double $$('h1') get all elements

Snippets

  • Source > Create snippets

Scraping

  • Console > find HTML > Copy has a variety of options (**Tip: copy selector for easy scraping **)

Animations

  • :hov: to force state frozen in that state
  • Console > Animations timeline

Grid / Flexbox

  • Layout tab > check boxes
  • Styles tab > display: flex; context menu for changing the layout

Extensions

  • Visbug

Responsiveness / mobile

  • Device toolbar
  • Sensors tab > Geo location, GPS coordinates, acceleration etc
  • Lighthouse tool
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment