# Web Inspector Use Web Inspector to inspect and debug your HTML, CSS, and JavaScript. ## Overview Web Inspector helps you inspect all the resources and activity on webpages, service workers, Mac and Home Screen web apps, and JavaScript running inside your applications, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. The most complete resource for Web Inspector is the [Web Inspector Reference](https://webkit.org/web-inspector/), and help links in Web Inspector itself can take you to help specific to the current part of the tools you are using. ## The Interface Web Inspector is divided into multiple tabs, with navigation and details sidebars, a main content area, a console prompt at the bottom, and optionally a split console visible in every tab. Learn more about [Web Inspector’s interface](https://webkit.org/web-inspector/web-inspector-interface/) as well as how to quickly navigate Web Inspector with [keyboard shortcuts](https://webkit.org/web-inspector/keyboard-shortcuts/).  Each tab contains a set of related tools and features to make it easier to find the tool you are looking for. - [Elements](https://webkit.org/web-inspector/elements-tab/): View and inspect the elements that make up the DOM of a webpage. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar. - [Console](https://webkit.org/web-inspector/console-command-line-api/): Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away. - [Sources](https://webkit.org/web-inspector/sources-tab/): Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow. - [Network](https://webkit.org/web-inspector/network-tab/): See a detailed list of all network requests made to load every webpage resource, so you can quickly evaluate the response, status, timing, and more. - [Timelines](https://webkit.org/web-inspector/timelines-tab/): Understand all the activity that occurs on an open webpage, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recorded by frame, helping you discover ways to optimize your site. - [Storage](https://webkit.org/web-inspector/): Find details about the data stored by a webpage, such as application cache, cookies, databases, indexed databases, local storage, and session storage. - [Graphics](https://webkit.org/web-inspector/): Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of webpages. - [Layers](https://webkit.org/web-inspector/layers-tab/): Visualize compositing layers in 3D to understand where layers are generated and in what order they’ll render. Use layers to help find unexpected memory consumption or excessive repaints on a webpage. - [Audit](https://webkit.org/web-inspector/audit-tab/): Preform audits against a webpage to certify that common code and accessibility errors are addressed. Confirm that a webpage follows design guidelines and specifications of modern webpages. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)