the.com/chrome devtools
the x-ray glasses browsers give you for free, if you know where to press f12.
means a built-in suite of debugging and inspection tools that lets anyone see, edit, and profile the guts of any webpage in real time.
from shipped with chrome's 2008 launch, built on the webkit inspector lineage, then forked and expanded as chrome grew its own rendering engine (blink) in 2013.
keyboard shortcutf12 or ctrl+shift+i opens it instantly
console.log abusemost-used debugging tool is basically a print statement
edit live csschanges vanish on refresh, breaking hearts daily
lighthouse built inaudits performance and accessibility for free
for instance
elements panel — lets you edit any website's html live in your browser
network tab — shows every request, including that one api call taking 4 seconds
lighthouse audit — google's own scoring tool, judges your site out of 100
console — where every developer secretly lives, typing document.querySelector