The Glossary of Google Chrome for Web Developers
Core Engine & Architecture
Blink Chrome's rendering engine, responsible for turning HTML, CSS, and the DOM into pixels on screen. Blink is a fork of WebKit and also powers Microsoft Edge, Opera, Brave, and most other Chromium-based browsers.
V8 Chrome's JavaScript and WebAssembly engine. V8 compiles JavaScript directly to machine code using just-in-time (JIT) compilation, which is a major reason Chrome (and Node.js, which also uses V8) executes JS quickly.
Chromium The open-source project that Chrome is built on. Chromium contains Blink, V8, and the base browser shell; Chrome adds proprietary bits like Google account sync, the built-in PDF viewer, and automatic updates on top of it.
Multi-process architecture Chrome runs the browser UI, each tab (or site instance), extensions, and the GPU in separate OS processes. This isolates crashes and is central to Chrome's site isolation security model, which prevents one site's process from reading another's memory.
Renderer process The process responsible for parsing HTML/CSS, running JavaScript, and painting a given page or frame.
DevTools: The Panels
DevTools Chrome's built-in suite of web developer tools, opened with F12, Ctrl+Shift+I / Cmd+Option+I, or by right-clicking and choosing "Inspect."
Elements panel Shows the live DOM tree and the computed/applied CSS for the selected element. Edits here are live but not saved back to source files.
Console panel A REPL for running JavaScript in the page's context, and the place where console.log, warnings, and uncaught errors surface.
Sources panel Where you view and debug source files — set breakpoints, step through code, and inspect the call stack. Also hosts the Workspaces feature, which lets you edit files and save changes directly back to disk.
Network panel Logs every request the page makes (HTML, CSS, JS, XHR/fetch, images, fonts). Shows timing waterfalls, headers, response bodies, and lets you throttle connection speed to simulate slow networks.
Performance panel Records a timeline of everything the browser did — scripting, rendering, painting, garbage collection — so you can find jank, long tasks, and layout thrashing.
Application panel Inspects storage and PWA-related features: Local Storage, Session Storage, IndexedDB, Cookies, Cache Storage, Service Workers, and the Web App Manifest.
Memory panel Takes heap snapshots and records allocation timelines to help track down memory leaks.
Lighthouse panel Runs an automated audit of a page covering performance, accessibility, SEO, and PWA best practices, producing a scored report.
Security panel Reports on the page's certificate, mixed-content warnings, and overall connection security.
Rendering tab A set of overlays and toggles (accessed via the DevTools "more tools" menu) for visualizing paint flashing, layout shifts, layer borders, and frame rate.
DevTools: Common Features & Techniques
Device Mode / Device Toolbar Toggled with Ctrl+Shift+M / Cmd+Shift+M, this simulates different screen sizes, pixel densities, and touch input for responsive design testing.
Breakpoint A marker telling the debugger to pause execution at a specific line. Chrome also supports conditional breakpoints (pause only if an expression is true), DOM breakpoints (pause when a node changes), XHR/fetch breakpoints, and event listener breakpoints.
Live Expression A pinned expression in the Console that re-evaluates continuously, useful for watching a value change in real time.
Coverage tab Shows how much of your loaded CSS and JavaScript actually executed, helping identify unused code to trim from bundles.
Command Menu Opened with Ctrl+Shift+P / Cmd+Shift+P inside DevTools, this is a searchable palette of nearly every DevTools action — capturing screenshots, changing themes, running audits, and more.
Overrides A Sources panel feature that lets you locally modify network responses (including request headers) so changes persist across reloads, without touching the actual server.
Sensors tab Lets you spoof geolocation, device orientation, and idle state for testing location- or sensor-aware features.
Performance & Web Vitals
Core Web Vitals Google's key user-experience metrics, all measurable in Chrome DevTools and via Chrome UX Report data:
LCP (Largest Contentful Paint): time until the largest visible element renders.
INP (Interaction to Next Paint): responsiveness to user interactions, which replaced FID (First Input Delay) as an official Core Web Vital in 2024.
CLS (Cumulative Layout Shift): how much visible content unexpectedly shifts during load.
Time to First Byte (TTFB) The time between requesting a page and receiving the first byte of the response — largely a server/network metric shown in the Network panel.
Long Task Any task on the main thread that runs for more than 50ms, which can block user input and hurt INP. The Performance panel flags these explicitly.
Lighthouse score A 0–100 composite score Lighthouse generates per category (Performance, Accessibility, Best Practices, SEO), based on weighted metrics like LCP and CLS.
Back/forward cache (bfcache) A Chrome optimization that keeps a full page snapshot in memory so back/forward navigation is instant. DevTools can test whether a page is bfcache-eligible and report what's blocking it.
Network & Protocol Terms
Preload / Prefetch / Preconnect Resource hints developers add via <link> tags to tell Chrome to fetch critical resources early (preload), likely-needed resources for future navigation (prefetch), or establish an early connection to a domain (preconnect).
HTTP/2 & HTTP/3 (QUIC) Modern transport protocols Chrome supports; visible in the Network panel's "Protocol" column. HTTP/3 runs over QUIC (built on UDP) rather than TCP, reducing connection setup latency.
Service Worker A background script that intercepts network requests, enabling offline support, caching strategies, and push notifications. Inspected and debugged from the Application panel.
CORS (Cross-Origin Resource Sharing) The browser security mechanism that restricts scripts from making requests to a different origin unless the server opts in via headers. CORS errors are a frequent Console visitor.
Mixed content A page loaded over HTTPS that requests resources over plain HTTP; Chrome blocks or warns about this by default.
Rendering & Layout Concepts
Critical Rendering Path The sequence of steps — parsing HTML into the DOM, CSS into the CSSOM, combining them into the render tree, then layout and paint — that the browser follows before pixels appear.
Reflow (Layout) and Repaint A reflow recalculates element geometry (position/size) after a DOM or style change; a repaint redraws pixels without changing layout. Reflows are more expensive, and DevTools' Performance panel highlights both.
Compositing / Layers Chrome can promote elements (e.g., those with transform or will-change) to their own GPU-composited layer so animations run without triggering full-page layout.
Layout shift An unexpected movement of visible elements, the root cause tracked by CLS.
Debugging & Testing Tools
Chrome DevTools Protocol (CDP) A low-level protocol that lets external tools instrument, inspect, and control Chrome. It's the foundation underneath Puppeteer, and other browser-automation and remote-debugging tools.
Puppeteer A Node.js library, maintained by the Chrome team, providing a high-level API over the DevTools Protocol for automating Chrome — scraping, testing, and generating PDFs/screenshots.
Headless Chrome Chrome running without a visible UI, commonly used in CI pipelines for automated testing and rendering.
chrome://flags An internal settings page for enabling experimental or in-development browser features before they ship by default.
chrome://inspect Lets you debug pages running on Android devices (or other remote targets) connected via USB, using the desktop DevTools.
Extensions & Web Platform APIs
Manifest V3 (MV3) The current Chrome extension platform version, which replaced Manifest V2. It changed how extensions handle background logic (moving from persistent background pages to service workers) and how they intercept network requests.
Web App Manifest A JSON file describing a Progressive Web App (name, icons, start URL, display mode) that lets Chrome treat a site as an installable app.
Progressive Web App (PWA) A web app that uses service workers, a manifest, and HTTPS to offer app-like capabilities such as offline use and installability, all inspectable from the Application panel.
Origin Trials A Chrome mechanism letting developers opt in to experimental web platform APIs on their live site for a limited time, providing feedback to the standards process before a feature ships broadly.
*written with Claude Sonnet 5