CINXE.COM

<!doctype html> <html lang="pl"> <head> <base href="https://webkit.org/web-inspector/sources-tab/"> <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> Sources Tab | 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="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"> <link rel="canonical" href="https://webkit.org/web-inspector/sources-tab/"> <link rel="shortlink" href="https://webkit.org/?p=9714"> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://webkit.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwebkit.org%2Fweb-inspector%2Fsources-tab%2F"> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://webkit.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwebkit.org%2Fweb-inspector%2Fsources-tab%2F&format=xml"> <meta itemprop="name" content="Sources Tab"> <meta itemprop="description" content="The Sources Tab is the one-stop shop for all things related to the inspected target’s resources, including dynamic resources from things like XMLHttpRequest or fetch."> <meta itemprop="image" content="https://webkit.org/wp-content/uploads/web-inspector_Sources_Tab_Light.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image:src" content="https://webkit.org/wp-content/uploads/web-inspector_Sources_Tab_Light.png"> <meta name="twitter:site" content="@webkit"> <meta name="twitter:title" content="Sources Tab"> <meta name="twitter:description" content="The Sources Tab is the one-stop shop for all things related to the inspected target’s resources, including dynamic resources from things like XMLHttpRequest or fetch."> <meta name="twitter:creator" content="@dcrousso"> <meta property="og:title" content="Sources Tab"> <meta property="og:type" content="article"> <meta property="og:url" content="https://webkit.org/web-inspector/sources-tab/"> <meta property="og:image" content="https://webkit.org/wp-content/uploads/web-inspector_Sources_Tab_Light.png"> <meta property="og:description" content="The Sources Tab is the one-stop shop for all things related to the inspected target’s resources, including dynamic resources from things like XMLHttpRequest or fetch."> <meta property="og:site_name" content="WebKit"> <meta property="article:published_time" content="2020-01-14T10:23:47-08:00"> <meta property="article:modified_time" content="2022-10-31T18:09:29-07:00"> <meta property="fb:admins" content="1085088865"> <style type="text/css">.keyboard-shortcut > a code { padding: 0 0.8rem 0.2rem; color: inherit; box-shadow: inset 0px -2px 1px hsl(0, 0%, 0%, 0.15); } .keyboard-shortcut > a > code { font-family: 'SF Pro Text', 'Lucida Grande', -apple-system, system-ui, Helvetica } .keyboard-shortcut > a > strong { font-weight: initial; } @media (prefers-color-scheme: dark) { .keyboard-shortcut > a code { box-shadow: inset 0px -2px 1px hsl(0, 0%, 100%, 0.15); } }</style> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="fr"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=corsproxy" data-sourceurl="https://webkit.org/web-inspector/sources-tab/"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/exm=corsproxy/ed=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://webkit.org/web-inspector/sources-tab/"></script> <meta name="robots" content="none"> </head> <body class="web_inspector_page-template-default single single-web_inspector_page postid-9714"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=navigationui" data-environment="prod" data-proxy-url="https://webkit-org.translate.goog" data-proxy-full-url="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://webkit.org/web-inspector/sources-tab/" data-source-language="pl" data-target-language="fr" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://webkit.org/web-inspector/sources-tab/&anno=2" data-client="tr"></script> <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="https://webkit-org.translate.goog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <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.translate.goog/downloads/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#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.translate.goog/css-status/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/standards-positions/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" role="menuitem">Standards Positions</a></li> </ul></li> <li id="menu-item-9988" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9988"><input type="checkbox" id="toggle-9988" class="menu-toggle"><a href="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#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 menu-item-9989"><a href="https://webkit-org.translate.goog/web-inspector?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/tracking-prevention/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#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.translate.goog/project/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/bug-prioritization/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/bug-report-guidelines/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/code-style-guidelines/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/commit-and-review-policy/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/feature-policy/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/security-policy/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/tracking-prevention-policy/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#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.translate.goog/getting-started/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/contributing-code/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/testing-contributions/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/reporting-bugs/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=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="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#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.translate.goog/blog/category/news/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/css/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/contributing/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/privacy/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/performance/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/javascript/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/standards/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/web-inspector/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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.translate.goog/blog/category/safari-technology-preview/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" 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"> <article class="page with-toc" id="post-9714"> <h1><a href="https://webkit-org.translate.goog/web-inspector/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="landing-link">Web Inspector Reference</a><a href="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" rel="bookmark" title="Permanent Link: Sources Tab">Sources Tab</a></h1> <div class="bodycopy"><input type="checkbox" id="table-of-contents-toggle" class="menu-toggle"> <menu class="table-of-contents"> <menuitem class="list"><h6><label for="table-of-contents-toggle">Contents</label></h6> <ul class="level-2"> <li><a href="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#organizing-resources">Organizing Resources</a></li> <li><a href="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#filtering-resources">Filtering Resources</a></li> <li><a href="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#understanding-resources">Understanding Resources</a></li> <li><a href="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#creating-inspector-resources">Creating Inspector Resources</a></li> <li><a href="https://webkit-org.translate.goog/web-inspector/sources-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#debugging-javascript">Debugging JavaScript</a></li> </ul></menuitem> </menu> <p>The <strong>Sources</strong> Tab is the one-stop shop for all things related to the inspected target’s resources, including dynamic resources from things like <code>XMLHttpRequest</code> or <code>fetch</code>.</p> <figure class="image widescreen"> <picture title="Sources Tab"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10502"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10503"> </picture> </figure> <h2><a name="organizing-resources"></a>Organizing Resources</h2> <p>By default, resources are organized <strong>By Type</strong> in the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#navigation-sidebar"><em>Navigation Sidebar</em></a>, which places resources of similar type (e.g. Images, Scripts, Style Sheets, etc.), but only if there are so many resources that it would be confusing to navigate as a flat list.</p> <p>It’s possible to switch the organization to be <strong>By Path</strong>, which instead creates a hierarchy of folders that match the path of each resource.</p> <figure class="widescreen"><span class="image slice-right"> <picture title="Sources Tab organized By Type"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_organized_By_Type_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10506"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_organized_By_Type_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10507"> </picture></span> <span class="image slice-right"> <picture title="Sources Tab organized By Path"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_organized_By_Path_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10504"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_organized_By_Path_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10505"> </picture></span><br> </figure> <p>When organizing <strong>By Path</strong>, each origin is listed at the top-level, instead of in a <strong>Frames</strong> folder nested under the main resource.</p> <h2><a name="filtering-resources"></a>Filtering Resources</h2> <p>The filter bar in the bottom of the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#navigation-sidebar"><em>Navigation Sidebar</em></a> will show/hide resources based on whether the given search string exists in the URL of that resource.</p> <p>When enabled, <span class="image"> <picture title="Show resources with issues"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Show_resources_with_issues_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9876"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Show_resources_with_issues_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9877"> </picture></span> [<strong>Show resources with issues</strong>] will hide all resources that do not have any warnings or errors (including those created by <code><a href="https://webkit-org.translate.goog/web-inspector/console-object-api/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">console</a></code> functions).</p> <p>If the resource type selector is not set to <strong>All</strong>, only resources that match the selected type (e.g. Images, Scripts, Style Sheets, etc.) will be shown.</p> <h2><a name="understanding-resources"></a>Understanding Resources</h2> <p>In addition to being able to view the response content of the resource in the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#main-content-area"><em>Main Content Area</em></a>, Web Inspector also supports showing request data (assuming it exists), and will also show alternate representations of the content where applicable.</p> <ul> <li>If the request data or response content is JSON parseable, an object tree view is made available as if the contents had been logged to the <strong>Console</strong>.</li> <li>If the request data or response content is valid XML (including HTML and SVG), a <a href="https://webkit-org.translate.goog/web-inspector/elements-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#dom-tree"><em>DOM Tree</em></a> view is made available as if the contents had been shown in the <a href="https://webkit-org.translate.goog/web-inspector/elements-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><strong>Elements</strong> Tab</a>.</li> <li>If the response content is XML-like or valid JavaScript or valid CSS, <picture title="Pretty print"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Pretty_print_inactive_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10649"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Pretty_print_inactive_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10650"> </picture> [<strong>Pretty print</strong>] will reformat the content for readability when clicked.</li> <li>If the response content is valid JavaScript, <picture title="Show type information"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Type_profiler_inactive_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10663"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Type_profiler_inactive_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10664"> </picture> [<strong>Show type information</strong>] will toggle <a href="https://webkit-org.translate.goog/blog/3846/type-profiling-and-code-coverage-profiling-for-javascript/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript type profiling</a> when clicked.</li> <li>If the response content is valid JavaScript, <picture title="Fade unexecuted code"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Code_coverage_inactive_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10630"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Code_coverage_inactive_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10631"> </picture> [<strong>Fade unexecuted code</strong>] will toggle <a href="https://webkit-org.translate.goog/blog/3846/type-profiling-and-code-coverage-profiling-for-javascript/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript code coverage</a> when clicked.</li> <li>If the response content is an image, <picture title="Show transparency grid"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Transparency_grid_inactive_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10660"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Transparency_grid_inactive_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10661"> </picture> [<strong>Show transparency grid</strong>] will toggle the image transparency grid when clicked.</li> </ul> <p>Additional information about the resource is also shown in the <strong>Resource</strong> panel in the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#details-sidebar"><em>Details Sidebar</em></a>, such as MIME type and request/response headers.</p> <h2><a name="creating-inspector-resources"></a>Creating Inspector Resources</h2> <p>In addition to showing resources loaded by the inspected target, Web Inspector also has three different types of resources that can be created:</p> <figure class="image slice-right pull-right"> <picture title="Create Resource"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Create_Resource_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10500"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Create_Resource_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10501"> </picture> </figure> <ul> <li><strong>Local Override…</strong> can be used to replace the content and headers of any network response, based on URL, so long as Web Inspector is open.</li> <ul> <li>For more information, please read <a href="https://webkit-org.translate.goog/web-inspector/local-overrides/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Local Overrides</a>.</li> </ul> <li><strong>Console Snippet…</strong> allows for saving snippets of JavaScript into a resource to avoid having to repeatedly type (or copy and paste) that code in the Console.<p></p> <ul> <li>For more information, please read <a href="https://webkit-org.translate.goog/web-inspector/console-snippets/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Console Snippets</a>.</li> </ul></li> <li><strong>Inspector Bootstrap Script</strong> is a special JavaScript snippet that is guaranteed to evaluate before any other JavaScript in any page, as well as any sub-frames, so long as Web Inspector is open.</li> <ul> <li>For more information, please read <a href="https://webkit-org.translate.goog/web-inspector/inspector-bootstrap-script/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><i>Inspector Bootstrap Script</i></a>.</li> </ul> <li><strong>Inspector Style Sheet</strong> is a special <code><style></code> that is created by Web Inspector and silently added to the inspected page.</li> <ul> <li>One <strong>Inspector Style Sheet</strong> can be created per frame.</li> <li>Each <strong>Inspector Style Sheet</strong> is nested underneath its owner frame in the resource tree.</li> <li>When adding new CSS rules in the <a href="https://webkit-org.translate.goog/web-inspector/elements-tab/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><strong>Elements</strong> Tab</a>, if there is not already an <strong>Inspector Style Sheet</strong> for the owner frame, one is automatically created.</li> <li><strong>Inspector Style Sheet</strong> are not preserved across navigations or between Web Inspector sessions.</li> </ul> </ul> <div style="clear: both;"></div> <h2><a name="debugging-javascript"></a>Debugging JavaScript</h2> <p>At the top of the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#navigation-sidebar"><em>Navigation Sidebar</em></a>, there are some clickable icons that control the JavaScript debugger:</p> <figure class="image slice-right pull-right"> <picture title="Sources Tab with debugger paused"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_with_debugger_paused_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10476"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_with_debugger_paused_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10477"> </picture> </figure> <ul> <li><span class="image center"> <picture title="Disable all breakpoints"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Disable_all_breakpoints.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9871"> </picture></span> [<strong>Disable all breakpoints</strong>] is shown when breakpoints are <a href="https://webkit-org.translate.goog/web-inspector/javascript-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#state">globally enabled</a>. Clicking it will <a href="https://webkit-org.translate.goog/web-inspector/javascript-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#state">globally disable</a> breakpoints. Can also be toggled by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌘</code> <strong><code>Y</code></strong></a></span>.</li> <li><span class="image center"> <picture title="Enable all breakpoints"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Enable_all_breakpoints_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9872"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Enable_all_breakpoints_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9873"> </picture></span> [<strong>Enable all breakpoints</strong>] is shown when breakpoints are <a href="https://webkit-org.translate.goog/web-inspector/javascript-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#state">globally disabled</a>. Clicking it will <a href="https://webkit-org.translate.goog/web-inspector/javascript-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#state">globally enable</a> breakpoints. Can also be toggled by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌘</code> <strong><code>Y</code></strong></a></span>.</li> <li><span class="image center"> <picture title="Pause script execution"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Pause_script_execution_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9874"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Pause_script_execution_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9875"> </picture></span> [<strong>Pause script execution</strong>] is shown when JavaScript execution is not paused. Clicking it will tell the JavaScript debugger to pause JavaScript execution on the next statement. Can also be toggled by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌃</code> <code>⌘</code> <strong><code>Y</code></strong></a></span> or <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌘</code> <strong><code>\</code></strong></a></span>.</li> <li><span class="image center"> <picture title="Continue script execution"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9864"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9865"> </picture></span> [<strong>Continue script execution</strong>] is shown when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution. Can also be toggled by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌃</code> <code>⌘</code> <strong><code>Y</code></strong></a></span> or <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌘</code> <strong><code>\</code></strong></a></span>.</li> <li><span class="image center"> <picture title="Step over"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_over_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9894"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_over_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9895"> </picture></span> [<strong>Step over</strong>] is always shown, but only enabled when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution, and then pause JavaScript execution on the next statement to be executed in the current (or parent) function. If execution has reached the end of the current function and there is no parent function, clicking it will be behave just like <span class="image center"> <picture title="Continue script execution"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9864"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9865"> </picture></span> [<strong>Continue script execution</strong>]. Can also be done by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌘</code> <strong><code>'</code></strong></a></span> or <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><strong><code>F6</code></strong></a></span>.</li> <li><span class="image center"> <picture title="Step into"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_into_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9890"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_into_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9891"> </picture></span> [<strong>Step into</strong>] is always shown, but only enabled when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution, and then pause JavaScript execution at the next expression to be executed, including in newly called functions. If no such function is called, clicking it will behave just like <span class="image center"> <picture title="Step"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10449"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10450"> </picture></span> [<strong>Step</strong>]. If execution has reached the end of the current function and there is no parent function, clicking it will be behave just like <span class="image center"> <picture title="Continue script execution"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9864"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9865"> </picture></span> [<strong>Continue script execution</strong>]. Can also be done by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⌘</code> <strong><code>;</code></strong></a></span> or <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><strong><code>F7</code></strong></a></span>.</li> <li><span class="image center"> <picture title="Step out"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_out_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9892"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_out_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9893"> </picture></span> [<strong>Step Out</strong>] is always shown, but only enabled when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution, and then pause JavaScript execution on the first expression to be executed after leaving the current function. If there is no parent function, clicking it will be behave just like <span class="image center"> <picture title="Continue script execution"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9864"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9865"> </picture></span> [<strong>Continue script execution</strong>]. Can also be done by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⇧</code> <code>⌘</code> <strong><code>;</code></strong></a></span> or <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><strong><code>F8</code></strong></a></span>.</li> <li><span class="image center"> <picture title="Step"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10449"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Step_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10450"> </picture></span> [<strong>Step</strong>] is always shown, but only enabled when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution, and then pause JavaScript execution on the next expression to be executed in the current (or parent) function. If execution has reached the end of the current function and there is no parent function, clicking it will be behave just like <span class="image center"> <picture title="Continue script execution"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9864"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Continue_script_execution_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9865"> </picture></span> [<strong>Continue script execution</strong>]. Can also be done by pressing <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><code>⇧</code> <code>⌘</code> <strong><code>'</code></strong></a></span> or <span class="keyboard-shortcut"><a href="https://webkit-org.translate.goog/web-inspector/keyboard-shortcuts/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources-tab"><strong><code>F9</code></strong></a></span>.</li> </ul> <p>Below these icons is the <strong>Breakpoints</strong> section, which contains all existing <a href="https://webkit-org.translate.goog/web-inspector/javascript-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><em>JavaScript Breakpoints</em></a>, <a href="https://webkit-org.translate.goog/web-inspector/symbolic-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><em>Symbolic Breakpoints</em></a>, <a href="https://webkit-org.translate.goog/web-inspector/event-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><em>Event Breakpoints</em></a>, <a href="https://webkit-org.translate.goog/web-inspector/dom-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><em>DOM Breakpoints</em></a>, and <a href="https://webkit-org.translate.goog/web-inspector/url-breakpoints/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><em>URL Breakpoints</em></a>, as well as a <span class="image"> <picture title="Create Breakpoint"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Create_Breakpoint_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9866"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Create_Breakpoint_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9867"> </picture></span> [<strong>Create Breakpoint</strong>] that allows new ones to be created.</p> <p>When JavaScript execution is paused, additional sections are added to the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#navigation-sidebar"><em>Navigation Sidebar</em></a> that contain information about the current <strong>Pause Reason</strong> and <strong>Call Stack</strong>.</p> <p>When debugging code involving asynchronous activity (e.g. <code>queueMicrotask</code>, <code>setTimeout</code>, <code>addEventListener</code>, etc.), if Web Inspector was opened before the asynchronous task was enqueued, the location of where that happened will also be included in the <strong>Call Stack</strong> section.</p> <figure class="image slice-right"> <picture title="Call stack with an addEventListener boundary"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Call_Stack_with_an_addEventListener_boundary_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10576"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Call_Stack_with_an_addEventListener_boundary_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10577"> </picture> </figure> <p>Keep in mind that these call frames are not active, meaning that you won’t have access to any local values for those frames. They are there purely to help you understand how you got to that point. In these cases, the current evaluation context is indicated by a <span class="image center"> <picture title="Current Call Frame Indicator"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Current_Call_Frame_Indicator.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-9870"> </picture></span>.</p> <p>If the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-settings/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources"><strong>Show Scope Chain on pause</strong> setting</a> is enabled in the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-settings/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#sources"><strong>Sources</strong> pane</a> in the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-settings/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><strong>Settings</strong> Tab</a>, whenever JavaScript execution is paused, the <strong>Scope Chain</strong> panel in the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#details-sidebar"><em>Details Sidebar</em></a> will be automatically shown, which contains information about all variables that exist in each scope that is visible from the current JavaScript execution point.</p> <p>If there are any breakpoints with a <strong>Probe Expression</strong> action, the <strong>Probes</strong> panel in the <a href="https://webkit-org.translate.goog/web-inspector/web-inspector-interface/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#details-sidebar"><em>Details Sidebar</em></a> is shown.</p> <figure class="widescreen"> <span class="image slice-left float-left"> <picture title="Sources Tab with Scope Chain sidebar shown"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_with_Scope_Chain_sidebar_shown_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10497"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_with_Scope_Chain_sidebar_shown_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10498"> </picture></span> <span class="image slice-left float-left"> <picture title="Sources Tab with Probes sidebar shown"> <source media="(prefers-color-scheme: dark)" srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_with_Probes_sidebar_shown_Dark.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10495"> <img srcset="https://webkit-org.translate.goog/wp-content/uploads/web-inspector_Sources_Tab_with_Probes_sidebar_shown_Light.png?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB 2x" class="wp-image-10496"> </picture></span> </figure> </div> <div class="meta"> <hr> <p><img src="/wp-content/uploads/STP.png" width="51" height="51" class="icon"> Updated for <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a> 156. Try it out for the latest Web Inspector features, including all of the above and more.</p> <hr> <p class="written">Written January 14, 2020 by <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://twitter.com/dcrousso" target="_blank">Devin Rousso</a></p> <p class="updated">Last updated October 31, 2022 by Devin Rousso</p> </div> </article> </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://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=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.translate.goog/sitemap/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">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="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=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.translate.goog/licensing-webkit/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">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.translate.goog/terms-of-use/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">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> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'fr', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>