Elements
Lets you inspect and edit the HTML and CSS of the page.
You can view the DOM structure, change styles, and debug layout issues.
Console
A JavaScript shell where you can run commands.
It shows logs, errors, and warnings from the page for debugging.
Sources
Displays all files loaded by the page such as HTML, JS, CSS, and images.
You can set breakpoints, step through code, and debug JavaScript.
Network
Shows every network request the page makes including APIs, images, and fonts.
You can inspect headers, payloads, responses, and performance timings.
Performance
Records and analyzes runtime performance of your page.
It helps identify slow scripts, rendering jank, and paint bottlenecks.
Memory
Tracks memory usage and allocation over time.
It is useful for detecting and fixing JavaScript memory leaks.
Application
Shows site storage such as LocalStorage, SessionStorage, IndexedDB, and cookies.
It also covers cache, service workers, and PWA-related details.
Privacy and security
Provides visibility into site security, cookies, and permissions.
It highlights issues that may affect user privacy or safety.
Lighthouse
Runs audits for performance, accessibility, best practices, SEO, and PWA.
It produces scores and concrete recommendations to improve your site.
Recorder
Captures user flows as a sequence of interactions.
You can reuse recordings for reproducible debugging and tests.
Tip: In the Elements panel, use the Styles, Computed, Layout, and Event Listeners panes on the right to fine-tune CSS and trace interactions.
Press Ctrl+Shift+P or Cmd+Shift+P to open the command palette and jump to any tool quickly.
dafe
Comments
Post a Comment