Web Inspector Reference

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="robots" content="noodp"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover"> <meta name="theme-color" content="hsl(203.6, 100%, 12%)"> <title> Web Inspector Reference | WebKit</title> <meta name="application-name" content="WebKit"> <link rel="stylesheet" type="text/css" href="https://webkit.org/wp-content/themes/webkit/style.css?2022100501" media="all"> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css"> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Mono,v2" type="text/css"> <meta name="supported-color-schemes" content="light dark"> <noscript> <img src="https://shynet.webkit.org/ingress/561b9e53-fb8c-4297-ae4d-bde05e8daa59/pixel.gif"> </noscript> <script defer src="https://shynet.webkit.org/ingress/561b9e53-fb8c-4297-ae4d-bde05e8daa59/script.js"></script> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://webkit.org/feed/"> <link rel="alternate" type="text/xml" title="RSS .92" href="https://webkit.org/feed/rss/"> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="https://webkit.org/feed/atom/"> <link rel="pingback" href="https://webkit.org/wp/xmlrpc.php"> <link rel="shortcut icon" sizes="32x32" type="image/x-icon" href="/favicon.ico"> <meta name='robots' content='max-image-preview:large' /> <link rel="alternate" type="application/rss+xml" title="WebKit » Web Inspector Reference Feed" href="https://webkit.org/web-inspector/feed/" /> <link rel='stylesheet' id='wp-block-library-css' href='https://webkit.org/wp/wp-includes/css/dist/block-library/style.min.css?ver=6.7' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://webkit.org/wp/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7" />  <meta itemprop="name" content="Web Inspector Reference"> <meta itemprop="description" content="Reference documentation for Web Inspector.">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image:src" content="https://webkit.org/wp-content/themes/webkit/images/twitter-card.png"> <meta name="twitter:site" content="@webkit"> <meta name="twitter:title" content="Web Inspector Reference"> <meta name="twitter:description" content="Reference documentation for Web Inspector.">  <meta property="og:title" content="Web Inspector Reference"> <meta property="og:type" content="website"> <meta property="og:url" content="https://webkit.org/web-inspector/"> <meta property="og:description" content="Reference documentation for Web Inspector."> <meta property="og:site_name" content="WebKit"> <meta property="fb:admins" content="1085088865"> </head> <body class="archive post-type-archive post-type-archive-web_inspector_page">  <svg xmlns="http://www.w3.org/2000/svg"> <style> svg { display: block; width: 0; height: 0; } </style> <filter id="invertLightness" x="0" y="0" style="color-interpolation-filters: sRGB"> <feColorMatrix type="matrix" in="SourceGraphic" result="red" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1" /> <feColorMatrix type="matrix" in="SourceGraphic" result="green" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1" /> <feColorMatrix type="matrix" in="SourceGraphic" result="blue" values="0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1" /> <feBlend in="red" in2="green" mode="lighten" result="maxyellow" /> <feBlend in="maxyellow" in2="blue" mode="lighten" result="max" /> <feBlend in="red" in2="green" mode="darken" result="minyellow" /> <feBlend in="minyellow" in2="blue" mode="darken" result="min" /> <feComponentTransfer result="adjustment" in="min"> <feFuncR type="linear" intercept="1" slope="-1" /> <feFuncG type="linear" intercept="1" slope="-1" /> <feFuncB type="linear" intercept="1" slope="-1" /> </feComponentTransfer> <feComposite operator="arithmetic" in="SourceGraphic" in2="adjustment" k1="0" k2="1" k3="1" k4="-1" result="channelAdjustment" /> <feComposite operator="arithmetic" in="channelAdjustment" in2="max" k1="0" k2="1" k3="-1" k4="1" result="finalColors" /> <feComposite operator="in" in="finalColors" in2="SourceAlpha" /> </filter> </svg> <header aria-label="WebKit.org Header" id="header"> <div class="page-width"> <a href="/"><div id="logo" class="site-logo">WebKit</div></a> <nav id="site-nav" aria-label="Site Menu"> <div class="menu-main-menu-container"><input type="checkbox" id="menu-main-menu-toggle" class="menu-toggle" /><label for="menu-main-menu-toggle" class="label-toggle main-menu" data-open="Main Menu" data-close="Close Menu"></label><ul id="menu-main-menu" class="menu" role="menubar"><li id="menu-item-6091" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6091"><a href="https://webkit.org/downloads/" role="menuitem">Downloads</a></li> <li id="menu-item-4272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4272"><input type="checkbox" id="toggle-4272" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4272" aria-controls="sub-menu-for-4272" aria-expanded="true"><label for="toggle-4272" class="label-toggle">Feature Status</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4272"> <li id="menu-item-13052" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13052"><a href="https://webkit.org/css-status/" role="menuitem">CSS Features</a></li> <li id="menu-item-14388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14388"><a href="https://webkit.org/standards-positions/" role="menuitem">Standards Positions</a></li> </ul> </li> <li id="menu-item-9988" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-9988"><input type="checkbox" id="toggle-9988" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-9988" aria-controls="sub-menu-for-9988" aria-expanded="true"><label for="toggle-9988" class="label-toggle">Documentation</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-9988"> <li id="menu-item-9989" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-9989"><a href="/web-inspector" role="menuitem">Web Inspector</a></li> <li id="menu-item-10868" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10868"><a href="https://webkit.org/tracking-prevention/" role="menuitem">Tracking Prevention</a></li> </ul> </li> <li id="menu-item-4282" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4282"><input type="checkbox" id="toggle-4282" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4282" aria-controls="sub-menu-for-4282" aria-expanded="true"><label for="toggle-4282" class="label-toggle">Policies</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4282"> <li id="menu-item-10037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10037"><a href="https://webkit.org/project/" role="menuitem">Project Goals</a></li> <li id="menu-item-13077" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13077"><a href="https://webkit.org/bug-prioritization/" role="menuitem">Bug Prioritization</a></li> <li id="menu-item-13076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13076"><a href="https://webkit.org/bug-report-guidelines/" role="menuitem">Bug Report Guidelines</a></li> <li id="menu-item-13075" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13075"><a href="https://webkit.org/code-style-guidelines/" role="menuitem">Code Style Guidelines</a></li> <li id="menu-item-13074" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13074"><a href="https://webkit.org/commit-and-review-policy/" role="menuitem">Commit and Review Policy</a></li> <li id="menu-item-13073" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13073"><a href="https://webkit.org/feature-policy/" role="menuitem">Feature Policy</a></li> <li id="menu-item-13072" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13072"><a href="https://webkit.org/security-policy/" role="menuitem">Security Policy</a></li> <li id="menu-item-13071" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13071"><a href="https://webkit.org/tracking-prevention-policy/" role="menuitem">Tracking Prevention Policy</a></li> </ul> </li> <li id="menu-item-4274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4274"><input type="checkbox" id="toggle-4274" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4274" aria-controls="sub-menu-for-4274" aria-expanded="true"><label for="toggle-4274" class="label-toggle">Contribute</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4274"> <li id="menu-item-4277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4277"><a href="https://webkit.org/getting-started/" role="menuitem">Getting Started</a></li> <li id="menu-item-4284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4284"><a href="https://webkit.org/contributing-code/" role="menuitem">Contributing Code</a></li> <li id="menu-item-4281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4281"><a href="https://webkit.org/testing-contributions/" role="menuitem">Testing Contributions</a></li> <li id="menu-item-4273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4273"><a href="https://webkit.org/reporting-bugs/" role="menuitem">How to Report Bugs</a></li> <li id="menu-item-4278" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4278"><a href="https://github.com/WebKit/WebKit" role="menuitem">GitHub Repository</a></li> </ul> </li> <li id="menu-item-4270" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-has-children menu-item-4270"><input type="checkbox" id="toggle-4270" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4270" aria-controls="sub-menu-for-4270" aria-expanded="true"><label for="toggle-4270" class="label-toggle">Blog</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4270"> <li id="menu-item-13057" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13057"><a href="https://webkit.org/blog/category/news/" role="menuitem">News Posts</a></li> <li id="menu-item-13058" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13058"><a href="https://webkit.org/blog/category/css/" role="menuitem">CSS Posts</a></li> <li id="menu-item-13063" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13063"><a href="https://webkit.org/blog/category/contributing/" role="menuitem">Contributing Posts</a></li> <li id="menu-item-13062" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13062"><a href="https://webkit.org/blog/category/privacy/" role="menuitem">Privacy Posts</a></li> <li id="menu-item-13060" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13060"><a href="https://webkit.org/blog/category/performance/" role="menuitem">Performance Posts</a></li> <li id="menu-item-13061" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13061"><a href="https://webkit.org/blog/category/javascript/" role="menuitem">JavaScript Posts</a></li> <li id="menu-item-13056" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13056"><a href="https://webkit.org/blog/category/standards/" role="menuitem">Standards Posts</a></li> <li id="menu-item-13059" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13059"><a href="https://webkit.org/blog/category/web-inspector/" role="menuitem">Web Inspector Posts</a></li> <li id="menu-item-13055" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13055"><a href="https://webkit.org/blog/category/safari-technology-preview/" role="menuitem">Safari Technology Preview Posts</a></li> </ul> </li> <li><form action="/" method="get"><input type="search" name="s" class="search-input" value=""></form></li></ul></div></nav> </div> </header> <main id="content"> <div class="page-width"> <style> :root { --feature-rule-color: hsl(0, 0%, 89.4%); --topic-color: hsl(0, 0%, 60%); } @media(prefers-color-scheme:dark) { :root { --feature-rule-color: hsl(0, 0%, 20%); --topic-color: hsl(0, 0%, 51%); } } .reference-filters { position: relative; box-sizing: border-box; width: 100vw; left: 50%; margin-bottom: 3rem; transform: translate(-50vw, 0); background-color: hsl(0, 0%, 0%); background-color: var(--figure-mattewhite-background-color); border: 1px solid hsl(0, 0%, 90.6%); border-color: var(--article-border-color); border-left: none; border-right: none; } .reference-filters form { position: relative; top: 0; } .reference-filters .search-input { width: 100%; box-sizing: border-box; margin-top: 0rem; margin-bottom: 0rem; padding: 1rem; padding-left: 3rem; padding-right: 8.5rem; background-repeat: no-repeat; background-position-x: 0.5rem; background-position-y: 1rem; background-size: 2rem; border-color: transparent; font-size: 2rem; } .reference-filters .filters-toggle-button { position: absolute; right: 3rem; top: 1rem; padding-right: 2.5rem; background-repeat: no-repeat; background-size: 2rem; background-position: right; background-filter: lightness(2); border: none; color: hsl(240, 2.3%, 56.7%); } .reference-filters .filters-toggle-button:hover { filter: brightness(0); } .reference-filters li { display: inline-block; } .reference-filters label { display: table-cell; float: right; padding: 0.5rem 1rem; border-style: solid; border-width: 1px; border-radius: 3px; cursor: pointer; font-size: 1.6rem; line-height: 1; } .topic-filters label { margin-left: 1rem; margin-bottom: 1rem; } .reference-filters label { float: none; display: inline-block; } .topic-filters { display: none; list-style: none; margin-top: 1rem; margin-bottom: 0.5rem; text-align: center; } #reference-filters.opened { margin-top: 1.5rem; } #reference-filters.opened .topic-filters { display: block; } #reference-filters.opened .search-input { border-color: hsl(0, 0%, 83.9%); border-color: var(--input-border-color); } .filter-toggle:checked + .filter-topic { color: hsl(240, 1.3%, 84.5%); color: var(--text-color); } .reference-filters label > input { position: relative; top: -1px; } .filter-topic { color: hsl(0, 0%, 60%); color: var(--topic-color); border-color: hsl(0, 0%, 60%); border-color: var(--topic-color); } .filter-topic { border-color: hsl(0, 0%, 60%); border-color: var(--topic-color) } .filter-toggle:checked + .filter-topic { background-color: hsl(0, 0%, 60%); background-color: var(--link-color); } #reference-list { column-count: 2; column-width: 50%; margin-bottom: 3rem; } #reference-list div { position: relative; margin-bottom: -1px; padding: 0.5rem; break-inside: avoid; border-color: transparent; border-width: 1px; border-style: solid; border-top-color: hsl(0, 0%, 89.4%); border-top-color: var(--feature-rule-color); border-bottom-color: hsl(0, 0%, 89.4%); border-bottom-color: var(--feature-rule-color); line-height: 1.618; transition: background-color 0.3s ease-out; } #reference-list .title { display: block; font-size: 2.2rem; font-weight: bold; } #reference-list li { display: inline; color: hsl(240, 2.3%, 56.7%); color: var(--text-color-coolgray); font-size: 1.4rem; text-align: left; } #reference-list li:not(:first-child):before { content: ', '; } #reference-list .hidden { display: none; } #reference-list + p { margin-bottom: 3rem; } @media(prefers-color-scheme:dark) { .search-input:hover, .search-input:focus, .reference-filters .filters-toggle-button:hover { filter: brightness(2); } } @media only screen and (max-width: 600px) { #reference-list { column-count: 1; column-width: 100%; } #reference-list div { width: 100%; } #reference-list div:nth-child(2) { border-top: none; } } </style> <h1>Web Inspector Reference</h1> <section class="reference-filters"> <form id="reference-filters" class="page-width"> <input type="text" id="search" class="search-input" placeholder="Search Web Inspector Reference…" title="Filter the reference articles." required><label class="filters-toggle-button">Filters</label> <ul id="topic-filters" class="topic-filters"> <li><label class="filter-topic accessibility" for="toggle-accessibility"><input type="checkbox" value="Accessibility" id="toggle-accessibility" class="filter-toggle"> Accessibility</label></li> <li><label class="filter-topic audit" for="toggle-audit"><input type="checkbox" value="Audit" id="toggle-audit" class="filter-toggle"> Audit</label></li> <li><label class="filter-topic console" for="toggle-console"><input type="checkbox" value="Console" id="toggle-console" class="filter-toggle"> Console</label></li> <li><label class="filter-topic cpu" for="toggle-cpu"><input type="checkbox" value="CPU" id="toggle-cpu" class="filter-toggle"> CPU</label></li> <li><label class="filter-topic css" for="toggle-css"><input type="checkbox" value="CSS" id="toggle-css" class="filter-toggle"> CSS</label></li> <li><label class="filter-topic dom" for="toggle-dom"><input type="checkbox" value="DOM" id="toggle-dom" class="filter-toggle"> DOM</label></li> <li><label class="filter-topic elements" for="toggle-elements"><input type="checkbox" value="Elements" id="toggle-elements" class="filter-toggle"> Elements</label></li> <li><label class="filter-topic events" for="toggle-events"><input type="checkbox" value="Events" id="toggle-events" class="filter-toggle"> Events</label></li> <li><label class="filter-topic graphics" for="toggle-graphics"><input type="checkbox" value="Graphics" id="toggle-graphics" class="filter-toggle"> Graphics</label></li> <li><label class="filter-topic interface" for="toggle-interface"><input type="checkbox" value="Interface" id="toggle-interface" class="filter-toggle"> Interface</label></li> <li><label class="filter-topic javascript" for="toggle-javascript"><input type="checkbox" value="JavaScript" id="toggle-javascript" class="filter-toggle"> JavaScript</label></li> <li><label class="filter-topic layers" for="toggle-layers"><input type="checkbox" value="Layers" id="toggle-layers" class="filter-toggle"> Layers</label></li> <li><label class="filter-topic media" for="toggle-media"><input type="checkbox" value="Media" id="toggle-media" class="filter-toggle"> Media</label></li> <li><label class="filter-topic memory" for="toggle-memory"><input type="checkbox" value="Memory" id="toggle-memory" class="filter-toggle"> Memory</label></li> <li><label class="filter-topic mobile" for="toggle-mobile"><input type="checkbox" value="Mobile" id="toggle-mobile" class="filter-toggle"> Mobile</label></li> <li><label class="filter-topic network" for="toggle-network"><input type="checkbox" value="Network" id="toggle-network" class="filter-toggle"> Network</label></li> <li><label class="filter-topic quirks" for="toggle-quirks"><input type="checkbox" value="Quirks" id="toggle-quirks" class="filter-toggle"> Quirks</label></li> <li><label class="filter-topic search" for="toggle-search"><input type="checkbox" value="Search" id="toggle-search" class="filter-toggle"> Search</label></li> <li><label class="filter-topic settings" for="toggle-settings"><input type="checkbox" value="Settings" id="toggle-settings" class="filter-toggle"> Settings</label></li> <li><label class="filter-topic sources" for="toggle-sources"><input type="checkbox" value="Sources" id="toggle-sources" class="filter-toggle"> Sources</label></li> <li><label class="filter-topic timelines" for="toggle-timelines"><input type="checkbox" value="Timelines" id="toggle-timelines" class="filter-toggle"> Timelines</label></li> <li><label class="filter-topic useragent" for="toggle-useragent"><input type="checkbox" value="UserAgent" id="toggle-useragent" class="filter-toggle"> UserAgent</label></li> <li><label class="filter-topic webrtc" for="toggle-webrtc"><input type="checkbox" value="WebRTC" id="toggle-webrtc" class="filter-toggle"> WebRTC</label></li> </ul> </form> </section> <section id="reference-list"> <div class="reference"><a href="https://webkit.org/web-inspector/audit-tab/" class="title">Audit Tab</a> <ul><li class="topics">Accessibility</li><li class="topics">Audit</li><li class="topics">DOM</li><li class="topics">JavaScript</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/console-command-line-api/" class="title">Console Command Line API</a> <ul><li class="topics">Console</li><li class="topics">DOM</li><li class="topics">Events</li><li class="topics">JavaScript</li><li class="topics">Settings</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/console-object-api/" class="title">Console Object API</a> <ul><li class="topics">Console</li><li class="topics">DOM</li><li class="topics">Graphics</li><li class="topics">JavaScript</li><li class="topics">Memory</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/console-snippets/" class="title">Console Snippets</a> <ul><li class="topics">Console</li><li class="topics">JavaScript</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/device-settings/" class="title">Device Settings</a> <ul><li class="topics">Console</li><li class="topics">CSS</li><li class="topics">JavaScript</li><li class="topics">Mobile</li><li class="topics">Quirks</li><li class="topics">UserAgent</li><li class="topics">WebRTC</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/dom-breakpoints/" class="title">DOM Breakpoints</a> <ul><li class="topics">DOM</li><li class="topics">Elements</li><li class="topics">JavaScript</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/elements-tab/" class="title">Elements Tab</a> <ul><li class="topics">Accessibility</li><li class="topics">CSS</li><li class="topics">DOM</li><li class="topics">Elements</li><li class="topics">Layers</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/enabling-web-inspector/" class="title">Enabling Web Inspector</a> <ul><li class="topics">Interface</li><li class="topics">Mobile</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/event-breakpoints/" class="title">Event Breakpoints</a> <ul><li class="topics">Elements</li><li class="topics">Events</li><li class="topics">JavaScript</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/inspector-bootstrap-script/" class="title">Inspector Bootstrap Script</a> <ul><li class="topics">JavaScript</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/javascript-breakpoints/" class="title">JavaScript Breakpoints</a> <ul><li class="topics">JavaScript</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/keyboard-shortcuts/" class="title">Keyboard Shortcuts</a> <ul><li class="topics">Accessibility</li><li class="topics">Audit</li><li class="topics">Console</li><li class="topics">Elements</li><li class="topics">Graphics</li><li class="topics">Interface</li><li class="topics">Network</li><li class="topics">Search</li><li class="topics">Settings</li><li class="topics">Sources</li><li class="topics">Timelines</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/layers-tab/" class="title">Layers Tab</a> <ul><li class="topics">CSS</li><li class="topics">DOM</li><li class="topics">Elements</li><li class="topics">Layers</li><li class="topics">Memory</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/local-overrides/" class="title">Local Overrides</a> <ul><li class="topics">Network</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/network-tab/" class="title">Network Tab</a> <ul><li class="topics">Network</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/page-overlay/" class="title">Page Overlay</a> <ul><li class="topics">CSS</li><li class="topics">DOM</li><li class="topics">Elements</li><li class="topics">Settings</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/script-blackboxing/" class="title">Script Blackboxing</a> <ul><li class="topics">JavaScript</li><li class="topics">Settings</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/sources-tab/" class="title">Sources Tab</a> <ul><li class="topics">CSS</li><li class="topics">DOM</li><li class="topics">Events</li><li class="topics">JavaScript</li><li class="topics">Network</li><li class="topics">Settings</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/symbolic-breakpoints/" class="title">Symbolic Breakpoints</a> <ul><li class="topics">JavaScript</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/timelines-tab/" class="title">Timelines Tab</a> <ul><li class="topics">Console</li><li class="topics">CPU</li><li class="topics">CSS</li><li class="topics">DOM</li><li class="topics">Events</li><li class="topics">JavaScript</li><li class="topics">Media</li><li class="topics">Memory</li><li class="topics">Network</li><li class="topics">Timelines</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/url-breakpoints/" class="title">URL Breakpoints</a> <ul><li class="topics">JavaScript</li><li class="topics">Network</li><li class="topics">Sources</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/web-inspector-interface/" class="title">Web Inspector Interface</a> <ul><li class="topics">Console</li><li class="topics">Interface</li><li class="topics">Mobile</li><li class="topics">Search</li><li class="topics">Settings</li></div> <div class="reference"><a href="https://webkit.org/web-inspector/web-inspector-settings/" class="title">Web Inspector Settings</a> <ul><li class="topics">Accessibility</li><li class="topics">Console</li><li class="topics">CSS</li><li class="topics">Elements</li><li class="topics">Interface</li><li class="topics">JavaScript</li><li class="topics">Media</li><li class="topics">Settings</li><li class="topics">WebRTC</li></div> </section> <p>Can't find something? Contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter and let the team know.</p> <script> let filtersForm = document.getElementById('reference-filters'); let topicFiltersList = document.getElementById('topic-filters'); let filtersToggleButton = document.getElementsByClassName('filters-toggle-button')[0]; let inputField = document.getElementById('search'); let topicFilterToggles = topicFiltersList.getElementsByClassName('filter-toggle'); let list = document.getElementById('reference-list'); let referenceList = list.getElementsByClassName('reference'); function filterReferenceList (e) { let searchTerm = inputField.value.trim().toLowerCase(); let filteredTopics = topicFiltersList.querySelectorAll('.filter-toggle:checked'); if (searchTerm.length === 0 && filteredTopics.length === 0) { for (const ref of referenceList) ref.classList.remove('hidden'); return; } for (const ref of referenceList) { ref.classList.add('hidden'); for (const filteredTopic of filteredTopics) { if (ref.getElementsByTagName('ul')[0].textContent.includes(filteredTopic.value)) { ref.classList.remove('hidden'); break; } } if (filteredTopics.length > 0 && ref.classList.contains('hidden')) continue; if (searchTerm.length === 0) continue; referenceText = ref.getElementsByClassName('title')[0].textContent + ref.getElementsByTagName('ul')[0].textContent; if (referenceText.toLowerCase().includes(searchTerm)) ref.classList.remove('hidden'); else ref.classList.add('hidden'); } let activeTopics = []; for (const checkbox of filteredTopics.values()) activeTopics.push(checkbox.value); updateURL(searchTerm, activeTopics); } function searchTermFromURL() { let search = window.location.search; let searchRegExp = /.*search=([^&]+)/; let result; if (result = window.location.href.match(searchRegExp)) return decodeURIComponent(result[1]); return ''; } function topicsFromURL() { let search = window.location.search; let topicRegExp = /\#.*topics=([^&]+)/; let result; if (result = window.location.href.match(topicRegExp)) return result[1].split(','); return []; } function updateURL(searchTerm, activeTopicFilters) { let searchString = ''; function appendDelimiter() { searchString += searchString.length ? '&' : '?'; } if (searchTerm.length > 0) { appendDelimiter(); searchString += 'search=' + encodeURIComponent(searchTerm); } if (activeTopicFilters.length > 0) { appendDelimiter(); searchString += 'topics=' + activeTopicFilters.join(','); } if (searchString.length) { let current = window.location.href; window.location.href = current.replace(/\??#(.*)$/, '') + '#' + searchString; } } function toggleSearchInputPrompt(changed) { if (changed.matches) inputField.placeholder = 'Search…'; else inputField.placeholder = 'Search Web Inspector Reference…'; } (function() { filtersToggleButton.addEventListener('click', function(e) { filtersForm.classList.toggle('opened'); }); let placeholderMediaQuery = window.matchMedia('(max-width: 600px)'); placeholderMediaQuery.addListener(toggleSearchInputPrompt); toggleSearchInputPrompt(placeholderMediaQuery); inputField.addEventListener('input', filterReferenceList); for (const toggle of topicFilterToggles) toggle.addEventListener('change', filterReferenceList); let searchTerm = searchTermFromURL(); let topicFilters = topicsFromURL(); for (const toggle of topicFilterToggles) { if (topicFilters.indexOf(toggle.value) !== -1) { filtersForm.classList.add('opened'); toggle.checked = true; } } if (searchTerm.length) { inputField.value = searchTerm; inputField.placeholder = ''; inputField.dispatchEvent(new InputEvent('input')); } }()); </script> </div> </main> <footer> <div class="page-width"> <nav id="footer-nav" aria-label="Footer menu"><div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-7617" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7617"><a rel="me" href="https://front-end.social/@webkit">@webkit@front-end.social</a></li> <li id="menu-item-5365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5365"><a href="https://webkit.org/sitemap/">Site Map</a></li> <li id="menu-item-4185" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4185"><a href="http://www.apple.com/legal/privacy/">Privacy Policy</a></li> <li id="menu-item-4287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4287"><a href="https://webkit.org/licensing-webkit/">Licensing WebKit</a></li> <li id="menu-item-4187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4187"><a href="https://webkit.org/terms-of-use/">WebKit and the WebKit logo are trademarks of Apple Inc.</a></li> </ul></div></nav> </div> </footer> <script type="text/javascript" src="https://webkit.org/wp-content/themes/webkit/scripts/global.js?ver=1.0" id="theme-global-js"></script> </body> </html>

CINXE.COM

Web Inspector Reference | WebKit