[{"data":1,"prerenderedAt":73},["ShallowReactive",2],{"term-d\u002Fdevtools":3,"related-d\u002Fdevtools":59},{"id":4,"title":5,"acronym":6,"body":7,"category":40,"description":41,"difficulty":42,"extension":43,"letter":44,"meta":45,"navigation":46,"path":47,"related":48,"seo":53,"sitemap":54,"stem":57,"subcategory":6,"__hash__":58},"terms\u002Fterms\u002Fd\u002Fdevtools.md","DevTools",null,{"type":8,"value":9,"toc":33},"minimark",[10,15,19,23,26,30],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"DevTools is the built-in developer panel in every major browser (press F12 or right-click → Inspect). It lets you inspect HTML, edit CSS live, debug JavaScript, see network requests, check performance, manage storage, and about 50 other things. It's the single most important tool in a frontend developer's life.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Browser Developer Tools (DevTools) are built-in browser utilities providing a suite of debugging and profiling tools. Key panels include Elements (DOM\u002FCSS inspection), Console (JS execution\u002Flogging), Network (HTTP requests\u002Fresponses), Sources (JS debugging\u002Fbreakpoints), Performance (flame charts), Application (storage, service workers, manifest), and Lighthouse (automated audits).",[11,27,29],{"id":28},"when-youll-hear-this","When You'll Hear This",[16,31,32],{},"Use the Network tab to inspect API requests and responses.,The Performance panel shows flame charts for identifying JS bottlenecks.,DevTools can simulate slow network and CPU conditions.",{"title":34,"searchDepth":35,"depth":35,"links":36},"",2,[37,38,39],{"id":13,"depth":35,"text":14},{"id":21,"depth":35,"text":22},{"id":28,"depth":35,"text":29},"frontend","DevTools is the built-in developer panel in every major browser (press F12 or right-click → Inspect).","beginner","md","d",{},true,"\u002Fterms\u002Fd\u002Fdevtools",[49,50,51,52],"Console","Source Map","ESLint","Web Vitals",{"title":5,"description":41},{"changefreq":55,"priority":56},"weekly",0.7,"terms\u002Fd\u002Fdevtools","XpxR8HcfeeIKhi5t0hNyyCr6Qw5_nnbk3K350sEqsJ4",[60,63,66,70],{"title":49,"path":61,"acronym":6,"category":40,"difficulty":42,"description":62},"\u002Fterms\u002Fc\u002Fconsole","The console is the JavaScript developer's best friend and worst habit. You use console.log() to print values for debugging.",{"title":51,"path":64,"acronym":6,"category":40,"difficulty":42,"description":65},"\u002Fterms\u002Fe\u002Feslint","ESLint is the code cop that reads your JavaScript and yells at you when you do something wrong or inconsistent.",{"title":50,"path":67,"acronym":6,"category":40,"difficulty":68,"description":69},"\u002Fterms\u002Fs\u002Fsource-map","intermediate","Source maps are the translation files that let your browser's DevTools show you the original, readable source code even though the browser is actually runn...",{"title":52,"path":71,"acronym":6,"category":40,"difficulty":68,"description":72},"\u002Fterms\u002Fw\u002Fweb-vitals","Web Vitals are Google's report card for how good your website feels to use. They measure things like 'how fast does the main content load?",1776518274214]