Suggest an editImprove this articleRefine the answer for “How to use Chrome DevTools for measurements?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Chrome DevTools** is the built-in developer tool in Google Chrome, which can be used to measure a site's performance across key metrics. **Key point:** the Performance tab gives deep tracing, Lighthouse gives a quick score and report, and Network measures resource loading.Shown above the full answer for quick recall.Answer (EN)Image**Chrome DevTools** is the built-in developer tool in Google Chrome. It can be used to measure a site's performance across key metrics. --- ### How to open DevTools: - PC: `Ctrl + Shift + I` or `F12` - Mac: `Cmd + Option + I` - Or right-click → "View code" --- ### The **Performance** tab **For analyzing rendering, blocking, layout, and JS:** 1. Go to the **Performance** tab 2. Click **Record** 3. Reload the page or perform the needed actions 4. Stop the recording What it shows: - loading timelines (FCP, LCP, TTI) - which tasks block the thread - how much time rendering, JS, GC, and so on take - Paint, Layout, Composite, and everything related to rendering --- ### The **Lighthouse** tab **For getting a report with Web Vitals:** 1. The **Lighthouse** tab 2. Choose the device type (mobile/desktop) 3. Run the analysis 4. Get a score across metrics: - LCP, FID, CLS, TTI, TBT, SEO, accessibility, and others - recommendations for improvement --- ### The **Web Vitals (via extension)** tab - Install the **Web Vitals** extension from the Chrome Web Store - Shows in real time: LCP, FID, CLS for the current page - Based on real browser data --- ### The **Network** tab **Useful for:** - analyzing resource loading - measuring TTFB, size, response time - tracking blocking resources (CSS, JS) --- ### The **Performance Insights (in newer versions)** tab - A more user-friendly visual interface - Focuses on Web Vitals and problem areas - You can run the analysis with one click: it shows where the bottlenecks are --- **Conclusion:** Use the **Performance** tab: for deep tracing. **Lighthouse**: for a quick score and report. **Network**: for measuring resource loading. All of this helps you see where the site actually slows down and why.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.