d:["$","html",null,{"lang":"en","children":[["$","head",null,{"children":[["$","meta",null,{"name":"viewport","content":"width=device-width, maximum-scale=1, initial-scale=1"}],["$","meta",null,{"httpEquiv":"content-language","content":"en-gb"}],["$","meta",null,{"name":"theme-color","content":"#000000"}],["$","link",null,{"rel":"canonical","href":"https://canidev.tools"}],["$","link",null,{"rel":"icon","href":"/favicon.ico","sizes":"any"}],["$","link",null,{"rel":"apple-touch-icon","href":"/apple-icon?","type":"image/","sizes":""}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","title":"RSS Feed","href":"/feed.xml"}],["$","$L10",null,{}]]}],["$","body",null,{"children":[["$","$L11",null,{"theme":{"fontFamily":"mono","fontFamilyMonospace":"mono","primaryColor":"dark","primaryShade":4,"defaultRadius":0,"breakpoints":{"sm":"700px","md":"1150px"}},"defaultColorScheme":"auto","children":["$","$L12",null,{"features":[{"Name":"Add audio breakpoint","Description":"Can I add an audio breakpoint for debugging the source code?","Category":"Debugger","Newsletter":"tips-tricks-21","Authors":["@pankajparashar"],"Tags":["safari"],"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1578644933266747392","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665212770/add-audio-breakpoint-safari_vqjryz.mp4","Notes":"1. In **Sources** > Add a breakpoint by clicking the line number > Right click and select \"Edit Breakpoint...\".\n2. Click **Add Action** > Select \"Play Sound\" to hear a beep sound each time the statement is executed.\n"},"LastModifiedTime":"2/9/2024","Slug":"add-audio-breakpoint"},{"Name":"Add class to element","Description":"Can I add an existing CSS class to an HTML element?","Category":"CSS","Newsletter":"tips-tricks-22","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["chrome","firefox","edge","safari","polypane"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1578999582402699264","Notes":"1. Inspect the element > Look for \".cls\" button in the Styles pane next to the Filter field.\n2. Click the button and search for the existing class names to add to the element.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665291348/add-class-element-chrome_vlzwkv.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1578999582402699264","Notes":"1. Inspect the element > Look for \".cls\" button in the styles section next to the Filter Styles field.\n2. Click the button and search for the existing class names to add to the element.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665292235/add-class-element-firefox_s2lp0w.mp4"},"Edge":{"Notes":["1. Select the element in the DOM tree. In the **Styles** pane, click **.cls** and search from the list of available class names in the **Add new class** textbox. Press `Enter` to add the class to the element."],"Share":"https://twitter.com/CanIDevTools/status/1578999582402699264","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665293114/add-class-element-edge_abosm6.mp4","References":["1. Add class to an element, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/css/reference#add-a-class-to-an-element)"]},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1579000031553916928","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665293973/add-class-element-safari_r5xzwg.mp4","Notes":"1. Inspect the element > Look for \"Classes\" button in bottom row of the styles section next to the Filter field.\n2. Click the button and search for the existing class names to add to the element.\n"},"Polypane":{"Notes":"1. Inspect the element > Open the \"attributes\" tab \n2. Add a new class into the class field, known classes from the page and CSS will automatically be suggested.\n3. If there is no class attribute yet, add it as a new attribute and known classes will also be automatically suggested.","References":"1. \"Add class to an element\" [documentation](https://polypane.app/docs/elements-panel/#classes)\n"},"LastModifiedTime":"2/9/2024","Slug":"add-class-element"},{"Name":"Add conditional breakpoint","Description":"Can I set a conditional breakpoint for debugging?","Category":"Debugger","Newsletter":"tips-tricks-32","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1584450115083075584","Notes":"1. In **Sources**, right click the line number and select \"Add a conditional breakpoint...\"\n2. Input the conditional expression on which the execution should pause, and press `Enter`.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666587566/add-conditional-breakpoint-chrome_jbfwrd.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1584450626469400576","Notes":["1. In **Debugger**, right click the line number and select \"Add condition\"\n2. Input the conditional expression on which the execution should pause, and press `Enter`."],"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666594638/add-conditional-breakpoint-firefox_ynn6wb.mp4"},"Edge":{"Notes":["1. In the **Sources** panel, right click on the line number and select **Add conditional breakpoint...**. Enter the conditional expression and press `Enter`."],"Share":"https://twitter.com/CanIDevTools/status/1584450115083075584","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666589421/add-conditional-breakpoint-edge_s1vqzn.mp4","References":["1. Conditional line-of-code breakpoints, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/breakpoints#conditional-line-of-code-breakpoints)"]},"LastModifiedTime":"2/9/2024","Slug":"add-conditional-breakpoint"},{"Name":"Add custom device","Description":"Can I add a custom device for a responsive design mode?","Category":"Other","Newsletter":"tips-tricks-11","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["chrome","firefox","edge","polypane"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1556184233353179137","Notes":"1. Open **Settings** (`F1` or `Shift+?`) > Devices > Click \"Add custom device...\". \n2. Enter the \"Device Name\" and other details associated with the device. Click the \"Add\" button.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659854384/add-custom-device-chrome_g3ad70.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1556184931604172800","Notes":"1. Open **Responsive** **Design** **Mode** (`Cmd+Opt+M` or `Ctrl+Shift+M`) > Select \"Edit List...\" from the list of devices.\n2. In **Device** **Settings**, click \"Add Custom Device...\" > Enter the **Name** and other related details > Click \"Save\".\n","References":"1. \"Responsive Design Mode\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/)\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659856478/add-custom-device-firefox_uqwxrz.mp4"},"Edge":{"Notes":["1. Open **Settings** (`F1` or `Shift+?`) > Devices > Click **Add custom device...**.","2. Enter the **Device Name** and other details associated with the device. Click **Add** to add the custom device."],"References":["1. Add a custom mobile device, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/#add-a-custom-mobile-device)"],"Share":"https://twitter.com/CanIDevTools/status/1556184233353179137","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659856864/add-custom-device-edge_gf1pjd.mp4"},"Polypane":{"Notes":"1. Click the \"+\" button in the workspace, double-click anywhere in the free space, or press `Ctrl/Cmd+N` \n2. Once the new device is added you can resize it manually and set the device and emulation options with the Emulation settings.","References":"1. \"Adding and removing panes\" [documentation](https://polypane.app/docs/pane-management/#adding-and-removing-panes)\n2. \"Emulation settings\" [documentation](https://polypane.app/docs/emulation/)\n"},"LastModifiedTime":"2/9/2024","Slug":"add-custom-device"},{"Name":"Add columns for response headers","Description":"Can I add custom header columns to the Network requests table?","Category":"Network","Authors":["@pankajparashar"],"Tags":["chrome","edge"],"Newsletter":"tips-and-tricks-45","Chrome":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/add-custom-header-columns-chrome.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/add-custom-header-columns-chrome-v1.png","Share":"https://twitter.com/CanIDevTools/status/1743765689276490034","Notes":["1. In the **Network** panel, right click on the column headers > Response Headers > Manage Header Columns.","2. In the **Manage Header Columns** popup window, click \"Add Custom Header\". Enter the custom header name, and click **Add** to add a new column to the Network requests table.\n"]},"Edge":{"Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/add-custom-header-columns-edge.png","Notes":["1. In the **Network** panel, right click on the column headers > Response Headers > Manage Header Columns.","2. In the **Manage Header Columns** popup window, click \"Add Custom Header\". Enter the custom header name, and click **Add** to add a new column to the Network requests table."],"References":["1. Add columns for custom headers, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/reference#add-columns-for-response-headers)."]},"LastModifiedTime":"2/9/2024","Slug":"add-custom-header-columns"},{"Name":"Add inline styles","Description":"Can I add inline styles to an HTML element?","Category":"CSS","Newsletter":"tips-tricks-23","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["chrome","firefox","edge"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1579372110736416768","Notes":"1. Inspect element > In the **Styles** pane, click \"element.style\" to input the inline style.\n\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665378812/add-inline-styles-chrome_ljhuet.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1579372719636111360","Notes":"1. Inspect element > In the **Rules** pane, click \"element\" to input the inline style.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665379120/add-inline-styles-firefox_oqgjhw.mp4"},"Edge":{"Notes":["1. Select the element in the DOM tree > In the **Styles** pane, click **element.style** and add the **property: value** declaration."],"Share":"https://twitter.com/CanIDevTools/status/1579372110736416768","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665379280/add-inline-styles-edge_vqgpfk.mp4","References":["1. Add a CSS declaration to an element, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/css/#add-a-css-declaration-to-an-element)"]},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1579373307157413888","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665383735/add-inline-styles-safari_u3jyaq.mp4","Notes":"1. Inspect element > In the **Styles** pane, click inside \"Style Attribute\" braces to input the inline style.\n\n"},"Polypane":{"Notes":"1. Inspect element > In the **Styles** pane, click \"property\" under \"element.style\" to input the inline style.\n\n"},"LastModifiedTime":"2/9/2024","Slug":"add-inline-styles"},{"Name":"Add logpoint","Description":"Can I add log points to source code for debugging?","Category":"Debugger","Newsletter":"tips-tricks-24","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1580026407798775808","References":"1. \"What's new DevTools 73?\", on Chrome Developers [Blog](https://developer.chrome.com/blog/new-in-devtools-73/#logpoints)\n","Notes":"1. In **Sources** > Right click on the line number and select \"Add logpoint...\" > Input the log statement to print in the **Console** without actually writing `console.log` statements.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665473593/add-logpoint-chrome_v2t0my.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1580027197435232257","Notes":"1. In **Debugger** > Right click on the line number and select \"Add log\" > Input the log statement to print in the **Console** without actually writing `console.log` statements.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665473935/add-logpoint-firefox_gxbla9.mp4"},"Edge":{"Notes":["1. In **Sources** > Right click on the line number and select \"Add logpoint...\" > Input the log statement to print in the **Console** without actually writing `console.log` statements.\n"],"References":["1. Logpoints, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/breakpoints#logpoints)"],"Share":"https://twitter.com/CanIDevTools/status/1580026407798775808","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665492823/add-logpoint-edge_sdfglb.mp4"},"LastModifiedTime":"2/9/2024","Slug":"add-logpoint"},{"Name":"Autocomplete styles using values","Description":"Can I autocomplete style declaration just using values?","Category":"CSS","Newsletter":"tips-tricks-26","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["chrome","edge","polypane"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1580827812797505537","Notes":"1. Inspect an element > Navigate to the styles section (next to the DOM tree).\n2. Add new styles by directly entering the values like \"bold\", \"italic\" etc., and the devtools will automatically suggest the corresponding `: ` pair for the given input.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665732492/autocomplete-styles-values-chrome_ubbzn4.mp4"},"Edge":{"Notes":"1. Inspect an element > Navigate to the styles section (next to the DOM tree).\n2. Add new styles by directly entering the values like \"bold\", \"italic\" etc., and the devtools will automatically suggest the corresponding `: ` pair for the given input.\n","Share":"https://twitter.com/CanIDevTools/status/1580827812797505537","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665732811/autocomplete-styles-values-edge_ato9gk.mp4"},"Polypane":{"Notes":"1. Inspect an element > Navigate to the styles tab \n2. Click the \"propety\" field under the style you want to edit, and the devtools will automatically suggest appropriate style properties and values for the current element. \n"},"LastModifiedTime":"2/9/2024","Slug":"autocomplete-styles-values"},{"Name":"Block request domain","Description":"Can I block all network requests of a domain?","Category":"Network","Newsletter":"tips-tricks-27","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1581551114427674624","Notes":"1. In the **Network** panel, right click on the network request, and select \"Block request domain\". This will open the **Network request blocking** drawer that will let you manage blocked network requests. \n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665901195/block-request-domain-chrome_fi7oxw.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1581551653446045696","Notes":"1. In the **Network** panel, click the \"Request Blocking\" icon in the toolbar to open the **Blocking** pane in the left sidebar.\n2. Add the domain name in the input box to block all the matching requests for that domain.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665901185/block-request-domain-firefox_l8vozt.mp4"},"Edge":{"Notes":["1. In the **Network** panel, right click on the network request, and select **Block request domain**. This will open the **Network request blocking** drawer that will let you manage the blocked network requests."],"Share":"https://twitter.com/CanIDevTools/status/1581551114427674624","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665901192/block-request-domain-edge_sbo8bn.mp4","References":["1. Block a network request by using the Network tool, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network-request-blocking/network-request-blocking-tool#block-a-network-request-by-using-the-network-tool)"]},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1581555292138967040","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665901197/block-request-domain-safari_hwx933.mp4","Notes":"1. In the **Network** panel, right click on the request and select \"Create Response Local Override\" to open the **Sources** panel, which contains the list of all local overrides.\n2. Right click on the override and select \"Edit Local Override...\". Add the domain name in the URL pattern and use Status as `404: Not Found` to block all the network requests for that domain.\n"},"LastModifiedTime":"2/9/2024","Slug":"block-request-domain"},{"Name":"Block request pattern","Description":"Can I block all network request matching a URL pattern?","Category":"Network","Newsletter":"tips-tricks-29","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1582354903963299840","Notes":"1. Open **Command** **Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Network request blocking\". This will open the **Network request blocking** drawer.\n2. Click the \"+\" button and add the URL pattern > Add. Reload the page for the changes to take effect. Filter on **Blocked Requests** by enabling the checkbox in the toolbar.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666076803/block-request-url-pattern-chrome_u9vpbn.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1582356038358994944","Notes":"1. In the **Network** panel, click the **Request** **Blocking** icon in the toolbar, to open the **Blocking** pane in the left sidebar. \n2. Input the URL pattern and press `Enter`. Reload the page to see the changes take effect.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666077757/block-request-url-pattern-firefox_cfnvk3.mp4"},"Edge":{"Share":"https://twitter.com/CanIDevTools/status/1582354903963299840","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666079035/block-request-url-pattern-edge_h9c5ig.mp4","Notes":"- Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) and Run \\\"Show Network request blocking\\\". Press `Enter` to open the **Network request blocking** drawer.\n- Click the **Add pattern** button and add the URL pattern > **Add**. Reload the page for the changes to take effect. \n- The number of blocked network requests is indicated in the **Network request blocking** tool. In the **Network** panel, enable **Blocked Requests** to filter on the all the requests blocked by the DevTools in the Network table.\n- Hover on the URL pattern to either remove or edit the pattern. Click the **Remove all patterns** button to remove all the URL patterns.","References":"1. Block a network request, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network-request-blocking/network-request-blocking-tool#block-a-network-request).\n2. Block requests, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/#block-requests).\t\t\t"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1582357792546951168","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666084565/block-request-url-pattern-safari_u8c6fj.mp4","Notes":"1. In the **Sources** panel, Add a new **Local** **Override** by clicking the \"+\" (Create Resource) button.\n2. Select the **Type** as \"Block\", and enter the regex for the URL pattern to override the network request for. Reload the page to see the changes take effect.\n"},"LastModifiedTime":"2/9/2024","Slug":"block-request-pattern"},{"Name":"Block request URL","Description":"Can I block a specific network request by URL?","Category":"Network","Newsletter":"tips-tricks-5","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1581156847859683330","References":"1. \"What's new in DevTools 59\", on Chrome Developers [Blog](https://developer.chrome.com/blog/new-in-devtools-59/#block-requests)\n","Notes":"1. In the **Network** tab, right click on the request and select \"Block request URL\". This will open the \"Network request blocking\" drawer that will let you manage all your blocked requests.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665807339/block-request-url-chrome_hrzmg8.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1581157374915932161","Notes":"1. In the **Network** tab, right click on the request and select \"Block URL\". This will open the \"Blocking\" pane in the left sidebar to manage all the blocking requests.\n","References":"1. \"Network request list\", on Firefox Source [Docs](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/request_list/index.html#blocking-specific-urls)\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665811617/block-request-url-firefox_tloii5.mp4"},"Edge":{"Notes":["1. In the **Network** panel, right click on the request and select **Block request URL**. This will open the **Network request blocking** drawer that will let you manage all the blocked requests."],"Share":"https://twitter.com/CanIDevTools/status/1581156847859683330","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665811615/block-request-url-edge_inumug.mp4","References":["1. Block a network request by using the Network tool, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network-request-blocking/network-request-blocking-tool#block-a-network-request-by-using-the-network-tool)"]},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1581157800893644800","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665811626/block-request-url-safari_nbxcu1.mp4","Notes":"1. In the **Network** tab, right click on the request **Name**, and select \"Block Request URL\".\n2. In the **Sources** tab, under the **Local Overrides** section in the left sidebar, you can manage the blocked request.\n"},"LastModifiedTime":"2/9/2024","Slug":"block-request-url"},{"Name":"Capture full page screenshot","Description":"Can I take full page screenshot of a website?","Category":"Other","Tags":["screenshot"],"Newsletter":"tips-tricks-33","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1598732034297729024","Notes":"1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) & Run > \"Capture full size screenshot\" and press `Enter`.\n2. This will save a PNG image with url as the filename in the **Downloads** directory.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1669922647/capture-full-page-screenshot-chrome_dqi6a5.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1598734109400076293","Notes":"1. In the **Inspector** panel, right click on the `html` node > select \"Screenshot Node\".\n2. This will save a PNG image with current date time as the filename in the **Downloads** directory.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1668374467/capture-full-page-screenshot-firefox_hjns0z.mp4"},"Edge":{"Notes":"1. Open **Command** **Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) & Run > \"Capture full size screenshot\" and press `Enter`.\n2. This will save a PNG image with url as the filename in the **Downloads** directory.\n","Share":"https://twitter.com/CanIDevTools/status/1598732034297729024","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1668372196/capture-full-page-screenshot-edge_r873ce.mp4"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1598734869181468678","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1669923062/capture-full-page-screenshot-safari_xrfv9z.mp4","Notes":"1. In the **Elements** panel, right click on the `html` node and select \"Capture Screenshot\".\n2. This will save a PNG image with current date time as the filename in the **Downloads** directory.\n"},"Polypane":{"Notes":"1. Click the \"Camera\" icon above the pane you want to screenshot and select \"Full page\". This will open the screenshot in the screenshot editor.\n","References":"1. \"Single page screenshots\" [documentation](https://polypane.app/docs/making-screenshots/#single-page-screenshots)\n"},"LastModifiedTime":"2/9/2024","Slug":"capture-full-page-screenshot"},{"Name":"Capture HD screenshot","Description":"Can I capture a high definition screenshot of the page?","Category":"Other","Tags":["screenshot"],"Authors":["@pankajparashar"],"Firefox":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/capture-hd-screenshot-firefox.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/capture-hd-screenshot-firefox.png","Share":"https://twitter.com/CanIDevTools/status/1718369812928184650","Notes":["1. In the **Console** panel, run the command `:screenshot --dpr 3` to take a high definition screenshot of the page with the device pixel ratio set to 3.\n"],"References":["1. \"Web console helpers\", [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html#web-console-helpers).","2. \"Take high resolution screenshots of web pages\", [Devtools Tips](https://devtoolstips.org/tips/en/take-high-res-screenshots/)."]},"Chrome":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/capture-hd-screenshot-chrome.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/capture-hd-screenshot-chrome.png","Share":"https://twitter.com/CanIDevTools/status/1716201822698807701","Notes":["1. In DevTools, click the **Toggle device toolbar** icon (`Cmd+Shift+M` or `Ctrl+Shift+M`) to enter the responsive design mode.","2. In the device toolbar, click **More options** (`⋮`) > **Add device pixel ratio**. In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu.","3. Click **More options** > select **Capture screenshot** for viewport or **Capture full size screenshot** for the entire page.\n"],"References":["1. \"Set device pixel ratio\", [Chrome Devtools Docs](https://developer.chrome.com/docs/devtools/device-mode/#dpr).","2. \"Take high resolution screenshots of web pages\", [Devtools Tips](https://devtoolstips.org/tips/en/take-high-res-screenshots/)."]},"Edge":{"Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/capture-hd-screenshot-edge.png","Notes":["1. In Devtools, click the **Toggle device toolbar** icon (`Cmd+Shift+M` or `Ctrl+Shift+M`) to enter the responsive design mode.","2. In the device toolbar, click **More options** (`⋮`) > **Add device pixel ratio**. In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu.","3. Click **More options** > select **Capture screenshot** for viewport or **Capture full size screenshot** for the entire page.\n"],"References":["1. \"Take high resolution screenshots of web pages\", [Devtools Tips](https://devtoolstips.org/tips/en/take-high-res-screenshots/)."]},"LastModifiedTime":"2/9/2024","Slug":"capture-hd-screenshot"},{"Name":"Capture node screenshot","Description":"Can I take a screenshot of the DOM node?","Category":"Elements","Tags":["screenshot"],"Newsletter":"tips-tricks-37","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1621023980206583809","Notes":"1. In the **Elements** panel, right click on the node and select \"Capture node screenshot\".\n2. It retains visible background colour of elements with no background colour applied.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1675241512/capture-node-screenshot-chrome_wvdumf.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1621025611530780673","Notes":"1. In the **Inspector** panel, right click on the node, and select \"Screenshot Node\".\n2. Firefox does not retain background transparency of the element in the screenshot.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1675241512/capture-node-screenshot-firefox_qmq5if.mp4","Thumbnail":"https://res.cloudinary.com/canidevtools/video/upload/l_play,w_200,o_50/capture-node-screenshot-firefox_qmq5if.png"},"Edge":{"Notes":"- In the **Elements** panel, right click on the node and select \"Capture node screenshot\".\n- It retains visible background colour of the elements with no background colour applied.\"","Share":"https://twitter.com/CanIDevTools/status/1539621151215058945","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1675577844/capture-node-screenshot-edge_z4fpvx.mp4","Thumbnail":"https://res.cloudinary.com/canidevtools/video/upload/l_play,w_200,o_50/capture-node-screenshot-edge_z4fpvx.png","References":"1. \"Capture node screenshots using the Elements tool context menu\", [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools#capture-node-screenshots-using-the-elements-tool-context-menu)."},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1621055417391673344","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1675241512/capture-node-screenshot-safari_jg6eup.mp4","Notes":"1. In the **Elements** panel, right click on the node in the DOM tree and click on \"Capture Screenshot\". \n2. Safari preserves the transparency for the elements with no applied background colour.\n"},"Polypane":{"Notes":"1. Click the \"Camera\" icon above the pane you want to screenshot and select \"Element\". 2. Click the element you want to screenshot. 3. Alternatively, click the \"Camera\" icon in the Element inspector to screenshot the selected DOM node.\n","References":"1. \"Element screenshots\" [documentation](https://polypane.app/docs/making-screenshots/#element-screenshots)\n"},"LastModifiedTime":"2/9/2024","Slug":"capture-node-screenshot"},{"Name":"Capture node stacktrace","Description":"Can I capture node creation stack trace?","Category":"Elements","Newsletter":"tips-tricks-40","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1627347721186312194","Notes":"1. Enable \"Capture node creation stacks\" in Settings (`F1`) > Experiments.\n2. In the **Elements** panel > Select the node > Open the **Stack Trace** pane in the side panel to show the stack trace of the node creation. \n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1676218498/capture-node-stacktrace-chrome_henchg.mp4"},"Edge":{"Notes":"1. Enable \"Capture node creation stacks\" in Settings (`F1`) > Experiments.\n2. In the **Elements** panel > Select the node > Open the **Stack** **Trace** pane in the side panel to show the stack trace of the node creation.\n","Share":"https://twitter.com/CanIDevTools/status/1627347721186312194","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1676219451/capture-node-stacktrace-edge_cqyzwu.mp4"},"LastModifiedTime":"2/9/2024","Slug":"capture-node-stacktrace"},{"Name":"Capture screenshot via console","Description":"Can I take screenshot of a web page from the console?","Category":"Console","Tags":["screenshot"],"Newsletter":"tips-tricks-41","Authors":["@pankajparashar"],"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1631050880052019203","Notes":"1. Firefox has a built-in helper function `:screenshot` to capture screenshot of the current page from the console. \n2. For example:\n```\n :screenshot\n :screenshot --fullpage\n :screenshot --selector .css-selector\n```\n","References":"1. \"Web Console Helpers\" on [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html).\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1677707601/capture-screenshot-console-firefox_sabddb.mp4"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1631051701514915841","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1677707601/capture-screenshot-console-safari_tvuokk.mp4","References":"1. \"Console Object API\", by [Webkit](https://webkit.org/web-inspector/console-object-api/#console-screenshot).\n","Notes":"1. In Safari, you can capture screenshot of the viewport from the **Console** using `console.screenshot()`. \n2. Alternatively, pass the target node to the function to capture screenshot of a specific node.\n"},"LastModifiedTime":"2/9/2024","Slug":"capture-screenshot-console"},{"Name":"Capture viewport screenshot","Description":"Can I take a screenshot of the viewport?","Category":"Other","Newsletter":"tips-tricks-44","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1646832267010998272","Notes":"1. Open **Command** **menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Capture screenshot\" > Press `Enter`. By default, the screenshot will be saved in the `Downloads` directory.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1681417211/capture-viewport-screenshot-chrome_bj2srr.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1646836515392176129","Notes":"1. In **Console**, use the built-in helper function `:screenshot` to capture screenshot of the current page. \n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1681421456/capture-viewport-screenshot-firefox_fzyd7m.mp4"},"Edge":{"Notes":"1. Open **Command** **menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Capture screenshot\" > Press `Enter`. By default, the screenshot will be saved in the `Downloads` directory.\n","Share":"https://twitter.com/CanIDevTools/status/1646832267010998272","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1681422232/capture-viewport-screenshot-edge_tmowvf.mp4"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1646836515392176129","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1681455678/capture-viewport-screenshot-safari_kmfbs2.mp4","Notes":"1. In **Console**, use `console.screenshot()` to capture the screenshot of the viewport. \n"},"Polypane":{"Notes":"1. Click the \"Camera\" icon above the pane you want to screenshot and select \"Viewport\". This will open the screenshot in the screenshot editor.\n","References":"1. \"Single page screenshots\" [documentation](https://polypane.app/docs/making-screenshots/#single-page-screenshots)\n"},"LastModifiedTime":"2/9/2024","Slug":"capture-viewport-screenshot"},{"Name":"Change color format","Description":"Can I change authored color format to other formats like hsl, hwb etc?","Category":"CSS","Newsletter":"tips-tricks-20","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1575491269878775811","References":"1. \"Support for the hwb() color function\" - [Chrome Developers](https://developer.chrome.com/blog/new-in-devtools-101/#hwb)\n","Notes":"1. In the **Styles** pane, hold the `Shift` key and click on the color preview box to cycle through the various color formats like `hex`, `rgb`, `hsl`, and `hwb`.\n2. Alternatively, you can change the color format in the [color picker](https://developer.chrome.com/docs/devtools/css/reference/#color-picker) using the up-down arrow keys.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1664460672/change-color-format-chrome_p9wek7.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1575495821470343176","Notes":"1. In the **Rules** pane, hold the `Shift` key and click on any color preview to change the color format.\n2. It is also available as an [optional default](https://firefox-source-docs.mozilla.org/devtools-user/settings/index.html#inspector).\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1664462075/change-color-format-firefox_kakch4.mp4"},"Edge":{"Notes":"1. In the **Styles** pane, hold the `Shift` key and click on the color preview box to cycle through the various color formats like `rgb`, `hsl`, and `hwb`.\n2. Alternatively, you can change the color format in the [color picker](https://developer.chrome.com/docs/devtools/css/reference/#color-picker) using the up-down arrow keys.\n","Share":"https://twitter.com/CanIDevTools/status/1575491269878775811"},"Safari":{"Notes":"1. In the **Styles** pane, hold the `Shift` key and click on the color preview box to cycle through the various color formats like `hex`, `rgb`, and `colors.`\n"},"LastModifiedTime":"2/9/2024","Slug":"change-color-format"},{"Name":"Change devtools language","Description":"Can I change the language of developer tools?","Category":"Other","Newsletter":"tips-tricks-43","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1641881002589954048","Notes":"1. Open **Settings** (`F1` or `Shift+?`) > Preferences > Under **Languages**, select the language from the dropdown > Reload DevTools.\n2. Alternatively, Run **Command** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Input the language > select the language labelled \"Appearance\" > Reload DevTools. \n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1680288722/change-devtools-language-chrome_xlzgjw.mp4"},"Edge":{"Notes":"1. Open **Settings** (`F1` or `Shift+?`) > Preferences > Under **Languages**, select the language from the dropdown > Reload DevTools.\n2. Alternatively, Run **Command** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Input the language > select the language labelled \"Appearance\" > Reload DevTools. \n","Share":"https://twitter.com/CanIDevTools/status/1641881002589954048","References":"1. \"Change DevTools language settings\", by Microsoft Edge Developer [documentation](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/customize/localization).\n"},"LastModifiedTime":"2/9/2024","Slug":"change-devtools-language"},{"Name":"Clear command history","Description":"Can I clear the command history of the console?","Category":"Console","Newsletter":"tips-tricks-9","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1555394008456646656","Notes":"In the **Console** tab, right click anywhere > select \"Clear console history\" to remove all the commands from its history.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659669026/clear-command-history-chrome_vmlcs6.mp4"},"Edge":{"Notes":"In the **Console** tab, right click anywhere > select \"Clear console history\" to remove all the commands from its history.\n","Share":"https://twitter.com/CanIDevTools/status/1555394008456646656"},"LastModifiedTime":"2/9/2024","Slug":"clear-command-history"},{"Name":"Clear console","Description":"Can I clear the previous commands in the console?","Category":"Console","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1714314933595250724","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1697558232/clear-console-chrome.mp4","Notes":"- Click the **Clear console** icon (top-left) or use the keyboard shortcut, `Ctrl+L` or `Cmd+K`.\n- Alternatively, you can run `console.clear()` in the console to clear the previous commands."},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1534416600954445824","Notes":"- Click the **Clear the Web Console output** icon in the toolbar or use `Ctrl+L` or `Cmd+K` to clear the console.\n- Alternatively, you can run `console.clear()` in the console to clear the previous commands."},"Edge":{"Notes":"- Click the **Clear console** icon (top-left) or use the keyboard shortcut, `Ctrl+L` or `Cmd+K`.\n- Alternatively, you can run `console.clear()` in the console to clear the previous commands.","Share":"https://twitter.com/CanIDevTools/status/1534418317062307840"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1534417568353906688","Notes":"- Click the **Clear log** button (trash icon) or use `Cmd+K` or `Shift+L` to clear the console.\n- Alternatively, you can run `console.clear()` in the console to clear the previous commands."},"Polypane":{"References":"1. Console, [Polypane Docs](https://polypane.app/docs/console/).","Notes":"- Click the **Clear console** icon (top-left) or use the keyboard shortcut, `Ctrl+L` or `Cmd+K`.\n- Alternatively, you can run `console.clear()` in the console to clear the previous commands."},"LastModifiedTime":"2/9/2024","Slug":"clear-console"},{"Name":"Clear network log","Description":"Can I clear all the requests in the network log?","Category":"Network","Authors":["@pankajparashar"],"Newsletter":"tips-and-tricks-46","Chrome":{"Notes":"- In the **Network** panel, click the **Clear network log** button in the toolbar or press `Cmd+K` or `Ctrl+L` to clear all the network requests."},"Edge":{"Share":"https://twitter.com/CanIDevTools/status/1746660149941403967","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/clear-network-log-edge.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/clear-network-log-edge-v1.png","Notes":"- In the **Network** panel, click the **Clear network log** button in the toolbar or press `Cmd+K` or `Ctrl+L` to clear all the network requests.","References":"1. Clear requests, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/reference#clear-requests)."},"Firefox":{"Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/clear-network-log-firefox.png","Notes":"- In the **Network** panel, click the **Clear** button (trash icon) to clear all the network requests."},"Safari":{"Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/clear-network-log-safari.png","Notes":"- In the **Network** panel, click the **Clear Network Items** button or press `Cmd+K` to clear all the network requests."},"LastModifiedTime":"2/9/2024","Slug":"clear-network-log"},{"Name":"Copy cURL request","Description":"Can I copy a network request as cURL?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":"In the **Network** tab, right click on the request, Copy > Copy as cURL will copy the request with cURL command to the clipboard.\n"},"Firefox":{"Notes":"1. In the **Network** tab, right click on the request, Copy > Copy as cURL will copy the request with cURL command to the clipboard.\n"},"Edge":{"Notes":"In the **Network** tab, right click on the request, Copy > Copy as cURL will copy the request with cURL command to the clipboard.\n"},"Safari":{"Notes":"In the **Network** tab, right click on the request, \"Copy as cURL\" will copy the request with cURL command to the clipboard.\n"},"LastModifiedTime":"2/9/2024","Slug":"copy-as-curl"},{"Name":"Copy as Fetch","Description":"Can I copy the request as window.fetch()?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, right click on the network request > Copy > Copy as fetch."]},"LastModifiedTime":"2/9/2024","Slug":"copy-as-fetch"},{"Name":"Copy as PowerShell","Description":"Can I copy the request as a powershell script?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, right click on the network request > Copy > Copy as PowerShell."]},"LastModifiedTime":"2/9/2024","Slug":"copy-as-powershell"},{"Name":"Copy as CSS selector","Description":"Can I copy a node's path as a CSS selector?","Category":"Elements","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Notes":["1. In the **Elements** tab, right click on the element in the DOM tree > Copy > Copy selector.\n"],"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658655363/copy-css-selector-chrome_ddz9za.mp4"},"Firefox":{"Notes":"1. In the **Inspector** tab, right click on the element in the DOM tree > Copy > CSS Selector.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658653910/copy-css-selector-firefox_zr9o7h.mp4"},"Edge":{"Notes":["1. In the **Elements** tab, right click on the element in the DOM tree > Copy > Copy selector.\n"]},"Safari":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658654528/copy-css-selector-safari_w2ncyn.mp4","Notes":"In the **Elements** tab, right click on the element in the DOM tree > Copy > Selector Path.\n"},"Polypane":{"Notes":["1. In the **Elements** tab, right click on the element in the DOM tree > Copy > Copy selector.\n"]},"LastModifiedTime":"2/9/2024","Slug":"copy-css-selector"},{"Name":"Copy image as data URI","Description":"Can I copy an image as a data URI?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, click the image request to open a side panel containing the request details. \n2. Open the **Preview** tab to preview the image and right click on the image > Copy image as data URI\n"],"References":"\"Convert images to data-urls\", [Devtools Tips](https://devtoolstips.org/tips/en/convert-image-to-data-url/)"},"Edge":{"Notes":["1. In the **Network** panel, click the image request to open a side panel containing the request details. \n2. Open the **Preview** tab to preview the image and right click on the image > Copy image as data URI\n"],"References":"\"Convert images to data-urls\", [Devtools Tips](https://devtoolstips.org/tips/en/convert-image-to-data-url/)"},"LastModifiedTime":"2/9/2024","Slug":"copy-image-uri"},{"Name":"Copy Img as background-image","Description":"Can I copy the image url as a background-image property to directly use in CSS?","Category":"CSS","Authors":["@pankajparashar"],"Tags":["polypane"],"Polypane":{"Version":17,"Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/copy-img-bgimg-polypane.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/copy-img-bgimg-polypane-v1.png","Share":"https://twitter.com/CanIDevTools/status/1738894453526376796","Notes":"- Right-click on the image, select **Copy** > **Copy as background-image**.","References":"- Polypane 17, [Polypane blog](https://polypane.app/blog/polypane-17-meta-panel-updates-reference-image-split-slider-and-chromium-120/)."},"LastModifiedTime":"2/9/2024","Slug":"copy-img-bgimg"},{"Name":"Copy as JS expression","Description":"Can I copy a node's path to be used as a JavaScript expression?","Category":"Elements","Authors":["@pankajparashar"],"Chrome":{"References":"[1] Copy JS path, by Chrome DevTools [Docs](https://developer.chrome.com/blog/new-in-devtools-72/#copy)\n","Notes":"1. In the **Elements** tab, right click on the node in the DOM tree > Copy > Copy JS path. This will copy the query selector to the node that can be used in the JS code.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658651084/copy-js-path-chrome_yh3wvj.mp4"},"Edge":{"Notes":"1. In the **Elements** tab, right click on the node in the DOM tree > Copy > Copy JS path. This will copy the query selector to the node that can be used in the JS code.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658651680/copy-js-path-edge_phl2db.mp4"},"LastModifiedTime":"2/9/2024","Slug":"copy-js-expression"},{"Name":"Copy node as HTML","Description":"Can I copy a node as HTML?","Category":"Elements","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Elements** panel, right click on the node > Copy > Copy outerHTML."]},"LastModifiedTime":"2/9/2024","Slug":"copy-node-as-html"},{"Name":"Copy node styles","Description":"Can I copy the styles applied to an element?","Category":"Elements","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Notes":["1. In the **Elements** panel, right click on the node > Copy > Copy styles."]},"Polypane":{"Notes":["1. In the **Elements** panel, go to the \"Computed\" tab and click the \"Copy styles\" button."]},"LastModifiedTime":"2/9/2024","Slug":"copy-node-styles"},{"Name":"Copy object","Description":"Can I copy an object from console?","Category":"Console","Newsletter":"tips-tricks-10","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1555788963855859712","References":"Console utilities API [reference](https://developer.chrome.com/docs/devtools/console/utilities/#copy-function)\n","Notes":["1. `copy(object)` copies a string representation of the specified object to the clipboard.\n"],"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659762914/copy-object-chrome_pyxbyj.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1555788963855859712","Notes":["1. `copy(object)` copies a string representation of the specified object to the clipboard.\n"]},"Edge":{"Notes":["1. `copy(object)` copies a string representation of the specified object to the clipboard.\n"],"Share":"https://twitter.com/CanIDevTools/status/1555788963855859712"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1555788963855859712","Notes":["1. `copy(object)` copies a string representation of the specified object to the clipboard.\n"]},"LastModifiedTime":"2/9/2024","Slug":"copy-object"},{"Name":"Copy response text","Description":"Can I copy the response object as text?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, right click on the network request > Copy > Copy response."]},"LastModifiedTime":"2/9/2024","Slug":"copy-response-text"},{"Name":"Copy styles as JS","Description":"Can I copy style declarations as JavaScript object?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"References":"[1] \"Copy as JS\", by Chrome Devtools [Docs](https://developer.chrome.com/blog/new-in-devtools-96/#copy-as-js)\n","Notes":"1. Inspect element > In the **Styles** pane, right click on the style declaration and select \"Copy declaration as JS\" or \"Copy all declarations as JS\" to copy one or all styles.\n"},"Edge":{"Notes":"1. Inspect element > In the **Styles** pane, right click on the style declaration and select \"Copy declaration as JS\" or \"Copy all declarations as JS\" to copy one or all styles.\n","References":"[1] \"What's new in DevTools 93?\", by Edge Devtools [Docs](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools#copy-a-declaration-in-the-styles-pane-for-css-in-js-libraries)\n"},"LastModifiedTime":"2/9/2024","Slug":"copy-styles-js"},{"Name":"Deactivate breakpoints","Description":"Can I temporarily deactivate breakpoints while debugging source code?","Category":"Debugger","Authors":["@pankajparashar"],"Tags":["chrome","edge"],"Chrome":{"Notes":["1. In the **Sources** panel, open the **Breakpoints** pane, click the **Deactivate breakpoints** (`Cmd+F8` or `Ctrl+F8`) icon to prevent the execution from pausing at breakpoints."],"References":["1. \"Force execution, skipping breakpoints, when paused\", [DevTools Tips](https://devtoolstips.org/tips/en/force-execution-at-breakpoint/)."]},"Edge":{"Notes":["1. In the **Sources** panel, open the **Breakpoints** pane, click the **Deactivate breakpoints** (`Cmd+F8` or `Ctrl+F8`) icon to prevent the execution from pausing at breakpoints."],"References":["1. \"Force execution, skipping breakpoints, when paused\", [DevTools Tips](https://devtoolstips.org/tips/en/force-execution-at-breakpoint/)."]},"LastModifiedTime":"2/9/2024","Slug":"deactivate-breakpoints"},{"Name":"Debug attr change","Description":"Can I set breakpoint and debug attr changes of a node?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome","edge","firefox","safari"],"Chrome":{"Notes":"1. Inspect element > Right click on the node in the DOM tree.\n2. Select \"Break on\" > \"attribute modifications\". Reload the page.\n"},"Firefox":{"Notes":"1. Inspect element > Right click on the node in the DOM tree.\n2. Select \"Break on...\" > \"Attribute Modification\". Reload the page.\n"},"Edge":{"Notes":"1. Inspect element > Right click on the node in the DOM tree > Select \"Break on\" > Select \"attribute modifications\". \n2. Reload the page.\n\n"},"Safari":{"Notes":"1. Inspect element > Right click on the DOM node > Select \"Break on\" > Select \"Attribute Modified\".\n2. Reload the page.\n"},"LastModifiedTime":"2/9/2024","Slug":"debug-attr-change"},{"Name":"Debug Event Listeners","Description":"Can I debug event listeners by setting a breakpoint on all or specific events?","Category":"Debugger","Authors":["@pankajparashar"],"Tags":["chrome","edge","firefox","safari"],"Chrome":{"References":"[1] \"Event listener breakpoints\", by Chrome DevTools [Docs](https://developer.chrome.com/docs/devtools/javascript/breakpoints/#event-listeners)\n","Notes":"1. In the **Sources** tab, expand the **Event Listeners Breakpoints** section to see the list of event categories.\n2. Expand a category and enable the checkbox for the event that needs to be debugged.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658474126/debug-event-listeners-chrome_sjiedd.mp4"},"Firefox":{"Notes":"1. Open devtools > Debugger > Find and expand the Event Listener Breakpoints section in the right hand column.\n2. To break when event listeners are hit, check the boxes next the events you are interested in. All of the standard events supported in your version of Firefox are listed, arranged by which API or API area they’re part of.\n","References":"1. \"Set event listener breakpoints\" by [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/debugger/set_event_listener_breakpoints/index.html).\n2. \"Examine Event Listeners\" by [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_event_listeners/index.html#examine-event-listeners).\n3. \"Issue #5\" by [@nclm](https://github.com/pankajparashar/canidev.tools/issues/5).\n"},"Edge":{"Notes":"1. In the **Sources** tab, expand the **Event** **Listeners** **Breakpoints** section to see the list of event categories.\n2. Expand a category and enable the checkbox for the event that needs to be debugged.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658474944/debug-event-listeners-edge_fksnq6.mp4"},"Safari":{"References":"[1] \"Event Breakpoints\" - [Webkit](https://webkit.org/web-inspector/event-breakpoints/)\n","Notes":"1. In the **Sources** tab, click the \"+\" button from the left sidebar in the **Breakpoints** section > Select \"Events Breakpoint\".\n2. Enter the name of the event in the popup form to apply a breakpoint for a specific event.\n3. Alternatively, you can set breakpoint on all the events by selecting \"All Events\" after clicking the \"+\" button.\n"},"LastModifiedTime":"2/9/2024","Slug":"debug-event-listeners"},{"Name":"Debug JavaScript","Description":"Can I debug JavaScript using devtools?","Category":"Debugger","Authors":["@pankajparashar"],"Tags":["chrome","edge","firefox","safari"],"Chrome":{"References":"[1] \"Debug JavaScript\", by Chrome DevTools [Docs](https://developer.chrome.com/docs/devtools/javascript/)\n","Notes":"1. In the **Sources** tab, open the `.js` file from the **Page** panel in the left sidebar. Set a breakpoint by clicking on the line number.\n2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.\n3. Use the toolbar on the right sidebar to step-in/step-out, watch expressions, local vars while debugging through the code.\n4. Alternatively, you can also add the `debugger;` statement in the code to pause execution of the code at that line.\n"},"Firefox":{"Notes":"1. In the **Debugger** tab, open the `.js` file from the **Sources** panel in the left sidebar. Set a breakpoint by clicking on the line number.\n2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.\n3. Use the toolbar on the right sidebar to step-in/step-out, watch expressions, local vars while debugging through the code.\n4. Alternatively, you can also add the `debugger;` statement in the code to pause execution of the code at that line.\n","References":"1. \"JavaScript Debugger\", by Firefox Source [Docs](https://firefox-source-docs.mozilla.org/devtools-user/debugger/)\n"},"Edge":{"Notes":"1. In the **Sources** tab, open the `.js` file from the **Page** panel in the left sidebar. Set a breakpoint by clicking on the line number.\n2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.\n3. Use the toolbar on the right sidebar to step-in/step-out, watch expressions, local vars while debugging through the code.\n4. Alternatively, you can also add the `debugger;` statement in the code to pause execution of the code at that line.\n","References":"[1] \"Use Debugger pane\", by Edge DevTools [Docs](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sources/#using-the-debugger-pane-to-debug-javascript-code)\n"},"Safari":{"References":"[1] \"Debugging JavaScript\", by [Webkit](https://webkit.org/web-inspector/sources-tab/#debugging-javascript)\n","Notes":"1. In the **Sources** tab, open the `.js` file from the the left sidebar. Set a breakpoint by clicking on the line number.\n2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.\n3. Once activated, use the toolbar on the left sidebar (top) to step-in/step-out, watch expressions, local vars while debugging through the code.\n4. Alternatively, you can also add the `debugger;` statement in the code to pause execution of the code at that line.\n"},"LastModifiedTime":"2/9/2024","Slug":"debug-javascript"},{"Name":"Debug node removal","Description":"Can I debug by setting a breakpoint when the node is removed from the DOM?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":"1. Inspect element > Right click on the node in the DOM tree.\n2. Select \"Break on\" > \"node removal\". Reload the page.\n"},"LastModifiedTime":"2/9/2024","Slug":"debug-node-removal"},{"Name":"Debug remote device pages","Description":"Can I debug websites on remote devices?","Category":"Other","Authors":["@pankajparashar"],"Tags":["safari"],"Safari":{"Notes":["1. In the Menu bar, select **Develop** > Select the device > Select the page to open the **Web Inspector** for that URL."],"References":"1. \"Develop menu\", [Safari Developer documentation](https://developer.apple.com/documentation/safari-developer-tools/develop-menu)."},"LastModifiedTime":"2/9/2024","Slug":"debug-remote-device-pages"},{"Name":"Debug scroll overflow","Description":"Can I debug container with scrollbars to identify the element causing it?","Category":"Elements","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["firefox","polypane"],"Firefox":{"Notes":"1. In the **Inspector** panel, elements with scrollbars are decorated with the `scroll` badge. Click on the badge to jump to the element that caused the overflow."},"Polypane":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1701936199/debug-scroll-overflow-polypane.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/v1701936626/debug-scroll-overflow-polypane-v1.png","Notes":"1. Use `Cmd+D` or `Ctrl+D` to turn on layout debugging. Elements causing a scrollbar are highlighted in red. There is also a **Horizontal overflow detector** icon in the bottom left of the page to quickly spot the element causing the scroll overflow.","References":"1. Layout Debugging, [Polypane Docs](https://polypane.app/docs/layout-debugging/)."},"LastModifiedTime":"2/9/2024","Slug":"debug-scroll-overflow"},{"Name":"Debug speculation rules","Description":"Can I debug speculation rules for prefetch/prerender next page navigations?","Category":"Network","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":["1. In the **Network** panel, prefetched resources have the **Type** as `prefetch` and the Request Headers will contain the header `Sec-Purpose: prefetch` which is used to identify such requests on the server-side.","2. In the **Application** panel, under the **Preloading** section, which has three panes: (1) **Speculation Rules**: list the rulesets on the page. (2) **Preloads**: list the prefetched & prerendered URLs from the rulesets. (3) **This Page**: lists the prerendered status of the current page."],"References":["1. Debug Speculation Rules, [Chrome Developers Blog](https://developer.chrome.com/blog/debugging-speculation-rules/)","2. Prerender pages in Chrome for instant page navigations, [Chrome Developers Blog](https://developer.chrome.com/blog/prerender-pages/)"]},"LastModifiedTime":"2/9/2024","Slug":"debug-speculation-rules"},{"Name":"Debug subtree change","Description":"Can I debug by setting a breakpoint when the subtree of the node changes?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":"1. Inspect element > Right click on the node in the DOM tree.\n2. Select \"Break on\" > \"subtree modifications\". Reload the page.\n"},"LastModifiedTime":"2/9/2024","Slug":"debug-subtree-change"},{"Name":"Debug XHR & Fetch calls","Description":"Can I debug XHR or fetch calls by setting a breakpoint for a specific or all requests??","Category":"Debugger","Authors":["@pankajparashar"],"Tags":["chrome","edge","firefox","safari"],"Chrome":{"References":"1. \"Pause your code with breakpoints\" by [Chrome Developers](https://developer.chrome.com/docs/devtools/javascript/breakpoints/#xhr).\n","Notes":"1. Click the **Sources** tab.\n2. Expand the **XHR Breakpoints** pane.\n3. Click **Add breakpoint**.\n4. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.\n5. Press Enter to confirm.\n"},"Firefox":{"Notes":"1. Open devtools > Debugger. \n2. In the right section, under \"XHR Breakpoints\", either use the checkbox to \"Pause on any URL\" or \"Break when the URL contains\" a specific keyword\n","References":"1. \"Set XHR Breakpoint\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/debugger/set_an_xhr_breakpoint/index.html)\n2. \"Issue #9\" - Nicolas ([@nclm](https://github.com/pankajparashar/canidev.tools/issues/9))\n"},"Edge":{"Notes":"1. Click the Sources tab.\n2. Expand the XHR Breakpoints pane.\n3. Click Add breakpoint.\n4. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.\n5. Press Enter to confirm.\n\n"},"Safari":{"References":"[1] \"URL Breakpoints\" - [Webkit](https://webkit.org/web-inspector/url-breakpoints/)\n","Notes":"1. In the **Sources** tab, click the \"+\" button in the left sidebar within the **Breakpoints** section > Select \"URL Breakpoint...\"\n2. Use the popup form to apply breakpoint on specific keywords and matching conditions.\n3. Alternatively, you can set breakpoint on all the requests by selecting \"All Requests\" after clicking the \"+\" button.\n"},"LastModifiedTime":"2/9/2024","Slug":"debug-xhr-fetch-calls"},{"Name":"Delete node","Description":"Can I delete a node from the DOM tree?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":["1. In the **Elements** panel, right click on the node and select \"Delete element\"."]},"LastModifiedTime":"2/9/2024","Slug":"delete-node"},{"Name":"Detect third-party cookies","Description":"Can I detect if a website uses third-party cookies?","Category":"Storage","Authors":["@pankajparashar"],"Tags":["chrome","edge"],"Chrome":{"Notes":["1. In the **Application** panel, under the **Storage** section, expand **Cookies**. All the entries with third-party domains are the ones using cookies."]},"Edge":{"Notes":["1. In the **Application** panel, under the **Storage** section, expand **Cookies**. All the entries with third-party domains are the ones using cookies."]},"LastModifiedTime":"2/9/2024","Slug":"detect-3p-cookies"},{"Name":"Detect memory leaks","Description":"Can I detect memory leaks in my web app using devtools?","Category":"JavaScript","Authors":["@pankajparashar"],"Tags":["chrome","edge","firefox","safari"],"Chrome":{"Share":"https://twitter.com/mgechev/status/1519534448227803138","References":"1. Minko Gechev (@mgechev) on [Twitter](https://twitter.com/mgechev/status/1519534448227803138).\n","Notes":"1. Open devtools using `Cmd+Opt+I` (on Mac) or `Ctrl+Shift+I` (on Windows/Linux) > Memory.\n2. Check memory usage > Memory going only ⬆️ is a bad sign! > Capture snapshot to preview memory allocation > Find redundant objects > Navigate to where you allocated them.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1652111060/Videos/detect-memory-leaks-chrome_eoycbd.mp4"},"Firefox":{"Notes":"1. In the **Memory** tab, use the camera icon (top-left) titled, \"Take snapshot\" to capture the heap stack and establish a baseline.\n2. Perform any operation on the app that is suspected to leak memory, and then take another snapshot.\n3. To compare two snapshots, click the button that looks like a Venn diagram next to the camera icon. The diff shows you where memory was allocated or freed between the two snapshots, indicating potential candidates leaking the memory.\n","References":"1. \"Memory\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/memory/basic_operations/index.html#basic-operations)\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1656508300/Videos/detect-memory-leaks-firefox_cc6tjf.mp4"},"Edge":{"Notes":"1. Open devtools using `Cmd+Opt+I` (on Mac) or `Ctrl+Shift+I` (on Windows/Linux) > Memory.\n2. Check memory usage > Memory going only ⬆️ is a bad sign! > Capture snapshot to preview memory allocation > Find redundant objects > Navigate to where you allocated them.\n\n"},"Safari":{"References":"[1] \"Memory Debugging\" - [Webkit](https://webkit.org/blog/6425/memory-debugging-with-web-inspector/)\n","Notes":"1. Open the **Timelines** tab. In the **Events** view, enable \"JavaScript Allocations\" panel in the left sidebar, by clicking the **Edit** button.\n2. Reload the page to start recording the timeline. Perform actions that are expected to be memory neutral.\n3. Take snapshot using the **Camera** icon after each repetition. Use the **Compare** button to compare the snapshots for any visible memory spikes.\n"},"LastModifiedTime":"2/9/2024","Slug":"detect-memory-leaks"},{"Name":"Detect missing meta tags","Description":"Can I detect the meta tags missing from the HTML?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["polypane"],"Polypane":{"Version":17,"Share":"https://twitter.com/CanIDevTools/status/1738196868432068818","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/detect-missing-meta-tags-polypane_v1.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/detect-missing-meta-tags-polypane.mp4","Notes":"- Navigate to **Info** > **Meta** panel, under the **Site information** section, expand **Meta tags** to identify the required and optional missing meta tags on the page.","References":"1. Polypane 17, [Polypane Blog](https://polypane.app/blog/polypane-17-meta-panel-updates-reference-image-split-slider-and-chromium-120/)."},"LastModifiedTime":"2/9/2024","Slug":"detect-missing-meta-tags"},{"Name":"Disable cache","Description":"Can I disable cache for the network requests?","Category":"Network","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["chrome","edge","firefox","safari","polypane"],"Chrome":{"Notes":"1. Open Network panel > Look for \"Disable cache\" in the toolbar at the top.\n"},"Firefox":{"Notes":"1. Open Network panel > Look for \"Disable Cache\" in the toolbar at the top.\n"},"Edge":{"Notes":"1. Open Network panel > Look for \"Disable Cache\" in the toolbar at the top.\n"},"Safari":{"Notes":"1. Open Network panel > Look for the icon in the top right of the toolbar with tooltip \"Ignore the resource cache when loading resources\".\n"},"Polypane":{"Notes":"1. In the Edit menu, select \"Disable cache\" and choose to disable it just for the current session, or persistently.\n"},"LastModifiedTime":"2/9/2024","Slug":"disable-cache"},{"Name":"Disable debugger statement","Description":"Can I prevent the debugger from pausing at the debugger statement?","Category":"Debugger","Authors":["@pankajparashar"],"Tags":["firefox"],"Firefox":{"Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/disable-debugger.statement-firefox.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/disable-debugger.statement-firefox.mp4","Share":"https://twitter.com/CanIDevTools/status/1729433210709524538","Notes":["1. In the **Debugger** panel, expand the **Breakpoints** pane, and unselect the **Pause on debugger statement** option to prevent the debugger from pausing at the `debugger` statement."]},"LastModifiedTime":"2/9/2024","Slug":"disable-debugger-statement"},{"Name":"Disable JavaScript","Description":"Can I disable JavaScript on a web page?","Category":"JavaScript","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["chrome","edge","firefox","safari","polypane"],"Chrome":{"Notes":"1. Open devtools. Press `Shift+Cmd+P` on Mac or `Ctrl+Shit+P` on Windows/Linux/Chrome OS to open the Command Menu.\n2. Search for \"Disable JavaScript\" and press `Enter` to execute the command.\n3. The yellow warning icon next to the Sources panel is the indicator that the JavaScript is disabled. It will continue to be disabled until the devtools is closed.\n"},"Firefox":{"Notes":"1. Navigate to `about:config` in the address bar. Click on \"Accept the Risk and Continue\" while proceeding with caution.\n2. Search for \"javascript.enabled\" in the preference textbox.\n3. Toggle the boolean value to False, using the `⇋` button.\n\n"},"Edge":{"Notes":"1. Open devtools. Press `Shift+Cmd+P` on Mac or `Ctrl+Shit+P` on Windows/Linux/Chrome OS to open the Command Menu.\n2. Search for \"Disable JavaScript\" and press `Enter` to execute the command.\n3. The yellow warning icon next to the Sources panel is the indicator that the JavaScript is disabled. It will continue to be disabled until the devtools is closed.\n\n"},"Safari":{"Notes":"1. In the menu bar, navigate to Safari > Preferences.\n2. Click on the Security tab. Under the Web Content section, uncheck the \"Enable JavaScript\" checkbox.\n"},"Polypane":{"Notes":"1. Open the \"debug tools\" of an individual pane.\n2. under \"Disable features\", select \"Disable JS\".\n"},"LastModifiedTime":"2/9/2024","Slug":"disable-javascript"},{"Name":"Disable local fonts","Description":"Can I disable local fonts to validate @font-face rules?","Category":"CSS","Authors":["@pankajparashar"],"Tags":["chrome","edge"],"Chrome":{"Notes":["1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Rendering\" to open the **Rendering** drawer.","2. Scroll down to locate the **Disable local fonts** option and select the checkbox to disable local fonts. Reload the page to apply the setting."],"References":["1. Disable local fonts, [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/rendering/apply-effects/#disable-local-fonts)."]},"Edge":{"Notes":["1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Rendering\" to open the **Rendering** drawer.","2. Scroll down to locate the **Disable local fonts** option and select the checkbox to disable local fonts. Reload the page to apply the setting."]},"LastModifiedTime":"2/9/2024","Slug":"disable-local-fonts"},{"Name":"Display FPS on page","Description":"Can I display the current frames per second (FPS) of the page?","Category":"Performance","Authors":["@pankajparashar"],"Tags":["chrome","edge"],"Chrome":{"Notes":["1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show frames per second (FPS) meter\".\n"]},"Edge":{"Notes":["1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show frames per second (FPS) meter\".\n"]},"LastModifiedTime":"2/9/2024","Slug":"display-fps"},{"Name":"Drag & Drop element","Description":"Can I drag & drop nodes anywhere inside the DOM tree?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome","edge","firefox","safari"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1523314607418318851","Notes":"1. Inspect element or Press `Cmd+Opt+I` (on Mac) or `Ctrl+Shift+I` (on Windows/Linux).\n2. Select the node and drag-n-drop to a different part of the DOM tree.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1652021001/Videos/drag-drop-element-chrome_g9hfse.mp4"},"Firefox":{"Notes":"1. Right click > Inspect element or Press `Cmd+Opt+I` (on Mac) or `Ctrl+Shift+I` (on Windows/Linux).\n2. Select the node and drag-n-drop to a different part of the DOM tree.\n","References":"1. \"Examine and edit HTML\" by [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/index.html#drag-and-drop).\n2. \"Issue #3\" by [Nicolas](https://github.com/pankajparashar/canidev.tools/issues/3).\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1654356748/Videos/drag-drop-element-firefox.mp4"},"Edge":{"Notes":"1. Right click > Inspect element or Press `Cmd+Opt+I` (on Mac) or `Ctrl+Shift+I` (on Windows/Linux).\n2. Select the node and drag-n-drop to a different part of the DOM tree.\n\n"},"Safari":{"References":"[1] \"Elements Tab\" - [Webkit](https://webkit.org/web-inspector/elements-tab/)\n","Notes":"1. Select any DOM node from the DOM tree, drag and drop anywhere in the tree to place the element.\n"},"LastModifiedTime":"2/9/2024","Slug":"drag-drop-element"},{"Name":"Duplicate node","Description":"Can I duplicate a node in the DOM tree?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":["1. In the **Elements** panel, right click on the node and select \"Duplicate element\"."]},"LastModifiedTime":"2/9/2024","Slug":"duplicate-node"},{"Name":"Edit node as HTML","Description":"Can I edit the node as HTML?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":["1. In the **Elements** panel, right click on the node and select \"Edit as HTML\"."]},"LastModifiedTime":"2/9/2024","Slug":"edit-node-html"},{"Name":"Edit and resend requests","Description":"Can I edit and resend network requests?","Category":"Network","Authors":["@pankajparashar"],"Tags":["firefox","edge"],"Firefox":{"Notes":"- In the **Network** panel, right click on the request and select **Edit and Resend**.\n- This will open a **New Request** panel, where you can edit the method, URL, query string, headers and the body of the request.\n- Click **Send** to dispatch the request."},"Edge":{"Notes":"- In the **Network** panel, right click on the request and select **Edit and Resend**.\n- This will open the **Network Console** panel where you can edit the method, URL, query string, headers and the body of the request.\n- Click **Send** to dispatch the request.","References":"1. Compose and send web API requests using the Network Console tool, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network-console/network-console-tool)"},"LastModifiedTime":"2/9/2024","Slug":"edit-resend-requests"},{"Name":"Emulate blurred vision","Description":"Can I emulate blurred vision on a page?","Category":"Accessibility","Tags":["chrome","edge","polypane"],"Newsletter":"tips-tricks-3","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1637145317995937793","Notes":"1. Run **Command** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > \"Show Rendering\" (Drawer).\n2. Navigate to the **Emulate vision deficiencies** section and choose \"Blurred vision\".\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1678802960/emulate-blurred-vision-chrome_aj62ff.mp4"},"Edge":{"Notes":"1. Run **Command** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > \"Show Rendering\" (Drawer).\n2. Navigate to the **Emulate** **vision** **deficiencies** section and choose \"Blurred vision\".\n","Share":"https://twitter.com/CanIDevTools/status/1637145317995937793","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1679160200/emulate-blurred-vision-edge_muhj59.mp4"},"Polypane":{"Notes":"1. Open the \"debug tools\" of an individual pane.\n2. Go to the \"Simulators\" tab.\n3. Choose between \"Far-sightedness\" and \"Astigmatism\".\n"},"LastModifiedTime":"2/9/2024","Slug":"emulate-blurred-vision"},{"Name":"Emulate color schemes","Description":"Can I emulate different color schemes for dark and light mode?","Category":"CSS","Tags":["chrome","firefox","edge","safari","polypane"],"Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/jecfish/status/1514209534566313986","Notes":"1. Open devtools > Inside the \"Styles\" pane, right next to the \"+\" button, click the Icon \"Toggle common rendering emulations\".\n2. Choose the `prefers-color-scheme` option to emulate the corresponding color scheme.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1649915966/Videos/emulate-color-schemes-chrome.mp4"},"Firefox":{"Notes":"1. Open devtools > Inspector > Next to the \"Filter Styles\" section, are the icons to toggle between light, dark color schemes.\n","References":"1. \"Examine CSS Rules\" by [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#examine-css-rules).\n2. \"Issue #7\" by [@nclm](https://github.com/pankajparashar/canidev.tools/issues/7).\n"},"Edge":{"Notes":"1. Open devtools > Inside the \"Styles\" pane, right next to the \"+\" button, click the Icon \"Toggle common rendering emulations\".\n2. Choose the `prefers-color-scheme` option to emulate the corresponding color scheme.\n"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1534536052563918850","References":"1. \"Disable Safari's Dark Mode\" - [StackOverflow](https://stackoverflow.com/questions/65588087/disable-safaris-dark-mode-independently-from-os-setting/65588220#65588220)\n2. \"Issue #16\" - Haroen Viaene ([@Haroenv](https://github.com/pankajparashar/canidev.tools/issues/16))\n","Notes":"Open **Web Inspector** using `Cmd+Opt+I`. Look for the icon in the top right of the Elements panel, to toggle between \"Force Dark Appearance\" and \"Use Default Appearance\".\n"},"Polypane":{"References":"1. Media emulation [documentation](https://polypane.app/docs/emulation/#media)\n","Notes":"1. Open the \"Media and Emulation\" settings of a pane.\n2. Under \"Media features\", Toggle between light and dark values for `prefers-color-scheme`.\n"},"LastModifiedTime":"2/9/2024","Slug":"emulate-color-schemes"},{"Name":"Emulate devices","Description":"Can I emulate devices to test responsiveness of a page?","Category":"Elements","Tags":["chrome","firefox","edge","safari","polypane"],"Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1533823550389637120","Notes":"1. Open devtools using `Cmd+Opt+I` (on MacOS) or `Ctrl+Shift+I` (on Windows/Linux).\n2. Press `Cmd+Shift+M` (on MacOS) or `Ctrl+Shift+M` (on Windows/Linux) or click the devices icon in the top right to \"Toggle device toolbar\".\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1654448196/Videos/emulate-devices-chrome_tdr5f4.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1533830432080691200","Notes":"There are three ways to toggle Responsive Design Mode:\n1. From the Firefox menu: Select **Responsive Design Mode** from the **Web Developer** submenu in the Firefox Menu (or **Tools** menu if you display the menu bar or are on macOS).\n2. From the Developer Tools toolbox: Press the **Responsive Design Mode** button in the Toolbox’s toolbar.\n3. From the keyboard: Press **Ctrl**+**Shift**+**M** (or **Cmd**+**Opt**+**M** on macOS).\n","References":"1. \"Responsive Design Mode\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/)\n"},"Edge":{"Notes":"1. Open devtools using `Cmd+Opt+I` (on MacOS) or `Ctrl+Shift+I` (on Windows/Linux).\n2. Press `Cmd+Shift+M` (on MacOS) or `Ctrl+Shift+M` (on Windows/Linux) or click the devices icon in the top right to \"Toggle device toolbar\".\n","Share":"https://twitter.com/CanIDevTools/status/1533824857859063808","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1654526481/Videos/emulate-devices-edge_dilkky.mp4","References":"1. \"Device Emulation\" - [Microsoft Edge Docs](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/)\n"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1533833879949549568","References":"1. \"How to enable responsive design mode\" - [BrowserStack](https://www.browserstack.com/guide/enable-responsive-design-mode-in-safari-and-firefox)\n","Notes":"1. From the menu bar: Develop > Enter Responsive Design Mode (or press `Ctrl+Cmd+R`).\n"},"Polypane":{"Notes":"1. Click the title of a pane.\n2. Select one of the 30+ available device presets\n3. Optionally, switch between the _viewport size_ and _device size_. Viewport size takes the device UI into account to give you the real available space.\n","References":"1. \"Device presets\" - [documentation](https://polypane.app/docs/device-presets/)\n"},"LastModifiedTime":"2/9/2024","Slug":"emulate-devices"},{"Name":"Emulate idle detection","Description":"Can I emulate detection of the user state as idle?","Category":"Accessibility","Tags":["chrome"],"Authors":["@pankajparashar"],"Chrome":{"Notes":"1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Sensors\" > Press `Enter`.\n2. Scroll down to the section \"Emulate Idle Detector state\" and select the appropriate option to force the selected idle state for emulation.\n"},"LastModifiedTime":"2/9/2024","Slug":"emulate-idle-detection"},{"Name":"Emulate print styles","Description":"Can I emulate print media query?","Category":"CSS","Tags":["chrome","firefox","edge","safari","polypane"],"Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Notes":"1. Launch devtools > Open \"Command Menu\" using `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows, Linux, Chrome OS).\n2. Search for \"Show Rendering\" and press Enter (this will open the Rendering panel next to the Console).\n3. Scroll down to the section \"Emulate CSS Media Type\" and select \"print\".\n"},"Firefox":{"Notes":"1. Inspect > In the \"Filter Styles\" section on the right, look for the icon with the title, \"Toggle print media simulation for the page\".\n","References":"1. \"Examine and edit CSS\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#view-media-rules-for-print)\n2. \"Issue #8\" - Nicolas ([@nclm](https://github.com/pankajparashar/canidev.tools/issues/8))\n"},"Edge":{"Notes":"1. Launch devtools > Open \"Command Menu\" using `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows, Linux, Chrome OS).\n2. Search for \"Show Rendering\" and press Enter (this will open the Rendering panel next to the Console).\n3. Scroll down to the section \"Emulate CSS Media Type\" and select \"print\".\n"},"Safari":{"Notes":"1. In the **Elements** panel, click the printer icon in the toolbar at the top to force the page to use the print media styles.\n"},"Polypane":{"Share":"https://twitter.com/CanIDevTools/status/1667169735845314570","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1686315555/emulate-print-styles-polypane_pltycu.mp4","Notes":["1. Click **Change Media and Emulations** from the top toolbar > **Media** (tab) > Select **print** to emulate the print media styles."]},"LastModifiedTime":"2/9/2024","Slug":"emulate-print-styles"},{"Name":"Emulate reduced transparency","Description":"Can I emulate reduced transparency CSS media feature?","Category":"CSS","Tags":["chrome","polypane"],"Authors":["@pankajparashar"],"Chrome":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/emulate-reduced-transparency-chrome.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/emulate-reduced-transparency-chrome.png","Share":"https://twitter.com/CanIDevTools/status/1720938896555397567","Version":"118","Notes":["1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Rendering\". Scroll down to the **Emulate CSS media** features section and select `prefers-reduced-transparency: reduce` to apply the effect.\n"],"References":["1. \"Emulate prefers-reduced-transparency media feature\", [What's New in DevTools (Chrome 118)](https://developer.chrome.com/blog/new-in-devtools-118/#reduced-transparency)."]},"Polypane":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/emulate-reduced-transparency-polypane.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/emulate-reduced-transparency-polypane.png","Version":"16","Share":"https://twitter.com/CanIDevTools/status/1721105411598639384","Notes":["1. In Developer Tools, click the **Change Media and Emulations** button in the toolbar to open the popup.","2. In the **Media** tab, click the **reduce** toggle button to preview the page with reduced transparency effect. Revert the effect by clicking the **no-preference** button.\n"]},"LastModifiedTime":"2/9/2024","Slug":"emulate-reduced-transparency"},{"Name":"Expand DOM nodes recursively","Description":"Can I expand DOM nodes recursively in the DOM tree?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"Notes":"1. Right click on the node in the DOM tree, select \"Expand recursively\". \n2. (Or) Use `Opt+Click` or `Alt+Click` on the arrow preceding the node with the keyboard.\n"},"Firefox":{"Notes":"1. Right click on the node in the DOM tree, select \"Expand All\". \n2. (Or) Use `Opt+Click` or `Alt+Click` on the arrow preceding the node with the keyboard.\n\n"},"Edge":{"Notes":"1. Right click on the node in the DOM tree, select \"Expand recursively\". \n2. (Or) Use `Opt+Click` or `Alt+Click` on the arrow preceding the node with the keyboard.\n"},"Safari":{"Notes":"1. Right click on the node in the DOM tree, select \"Expand All\".\n2. (Or) Use `Opt+Click` or `Alt+Click` on the arrow preceding the node with the keyboard.\n"},"LastModifiedTime":"2/9/2024","Slug":"expand-dom-nodes-recursively"},{"Name":"Extend DevTools UI","Description":"Can I extend DevTools to customise UI?","Category":"Other","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"References":"1. Extending Chrome DevTools, by [Chrome Developers](https://developer.chrome.com/docs/extensions/mv3/devtools/).\n","Notes":"1. Chrome DevTools can be extended to add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more.\n2. Refer the official guide to extend [Chrome DevTools](https://developer.chrome.com/docs/extensions/mv3/devtools/).\n"},"Firefox":{"Notes":"1. Firefox uses WebExtensions APIs to extend the browser's built-in developer tools. Follow the [link](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools) to know how to develop extensions for the devtools.\n","References":"1. \"Extending the developer tools\", by [MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)\n"},"Edge":{"Notes":"1. Edge DevTools can be extended to add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more.\n2. Refer the official guide to extend [Edge DevTools](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/developer-guide/devtools-extension).\n\n","References":"1. Create an extension that customizes the DevTools UI, by [Edge DevTools](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/developer-guide/devtools-extension).\n"},"Safari":{"References":"1. \"Create a Safari web extension\", by [Apple Developers](https://developer.apple.com/documentation/safariservices/safari_web_extensions/creating_a_safari_web_extension)\n","Notes":"1. To create a Safari web extension, you create an Xcode project using the Safari Extension App template. The project includes the Safari web extension as a macOS or iOS app extension that users can download from the App Store and install in Safari.\n"},"LastModifiedTime":"2/9/2024","Slug":"extend-devtools-ui"},{"Name":"Filter blocked cookies requests","Description":"Can I filter network requests with blocked response cookies?","Category":"Network","Tags":["chrome"],"Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, enable the **Has blocked cookies** option to only show requests with blocked response cookies."]},"LastModifiedTime":"2/9/2024","Slug":"filter-blocked-cookies-requests"},{"Name":"Filter blocked requests","Description":"Can I filter blocked network requests?","Category":"Network","Tags":["chrome"],"Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, enable the **Blocked requests** option to show only blocked requests."]},"LastModifiedTime":"2/9/2024","Slug":"filter-blocked-requests"},{"Name":"Filter multiple resources","Description":"Can I filter multiple resource types in the Network tab?","Category":"Network","Newsletter":"tips-tricks-1","Authors":["@pankajparashar"],"Tags":["filter","chrome","firefox","edge","safari"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1510248523178348546","References":"1. \"Filter request by Type\" by [Chrome Developers](https://developer.chrome.com/docs/devtools/network/reference/#filter-by-type) \n2. \"Tips & Tricks #1\" of the [Newsletter](https://www.getrevue.co/profile/CanIDevTools/issues/tips-tricks-1-1155265)\n","Notes":["1. Open devtools > Open the \"Network\" tab. Hold `Cmd` or `Ctrl` key while clicking on the Resource type.\n"],"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1648905592/Videos/filter-multiple-resources-chrome.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1510251619841372166","Notes":["1. In **Network** tab. Hold `Cmd` or `Ctrl` key while clicking on the Resource type.\n"],"References":"1. \"Tips & Tricks #1\" of the [Newsletter](https://www.getrevue.co/profile/CanIDevTools/issues/tips-tricks-1-1155265)\n\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1648906779/filter-multiple-resources-firefox.mp4"},"Edge":{"Notes":["1. Open devtools > Open the \"Network\" tab. Hold `Cmd` or `Ctrl` key while clicking on the Resource type.\n"],"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1649059426/Videos/filter-multiple-resources-edge.mp4","References":"1. \"Tips & Tricks #1\" of the [Newsletter](https://www.getrevue.co/profile/CanIDevTools/issues/tips-tricks-1-1155265)\n"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1510289220757176323","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1648915688/filter-multiple-resources-safari.mp4","References":"1. \"Tips & Tricks #1\" of the [Newsletter](https://www.getrevue.co/profile/CanIDevTools/issues/tips-tricks-1-1155265)\n\n","Notes":["1. Open devtools > Open the \"Network\" tab. Hold `Cmd` or `Ctrl` key while clicking on the Resource type.\n"]},"LastModifiedTime":"2/9/2024","Slug":"filter-multiple-resources"},{"Name":"Filter requests by domain","Description":"Can I filter network requests by domain name?","Category":"Network","Newsletter":"tips-tricks-17","Authors":["@pankajparashar"],"Tags":["filter","chrome","firefox","edge"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1572513134426071042","References":"1. \"Filter requests\", by Chrome DevTools [Docs](https://developer.chrome.com/docs/devtools/network/reference/#filter)\n","Notes":"1. In **Network** > Enter `domain:` in the \"Filter\" field followed by the domain to filter the network requests on.\n2. **Filter** field also suggests the list of domain names to choose from.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663731188/filter-requests-domain-chrome_sr5dpw.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1572513775655460864","Notes":"1. In **Network** > Enter `domain:` in the \"Filter URLs\" field followed by the domain to filter the network requests on.\n2. Filter field also suggests the list of domain names to choose from.\n","References":"1. \"Network request list\", by Firefox Source [Docs](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/request_list/index.html)\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663742255/filter-requests-domain-firefox_ycc2zr.mp4"},"Edge":{"Notes":"1. In **Network** > Enter `domain:` in the \"Filter\" field followed by the domain to filter the network requests on.\n2. **Filter** field also suggests the list of domain names to choose from.\n","Share":"https://twitter.com/CanIDevTools/status/1572513134426071042","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663745085/filter-requests-domain-edge_hyrti4.mp4","References":"1. \"Network features reference\", by Edge Developer [Docs](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/reference#filter-requests-by-properties)\n"},"LastModifiedTime":"2/9/2024","Slug":"filter-requests-domain"},{"Name":"Filter requests by keyword","Description":"Can I filter requests in the Network tab with a keyword?","Category":"Network","Tags":["filter","chrome","firefox","edge","safari"],"Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1535512330456408065","Notes":"1. Open the **Network** tab > Use the \"Filter\" input field to filter network requests based on a specific keyword. \n2. Use the \"Invert\" checkbox to filter on requests which does not match the keyword.\n"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1535513572410900485","Notes":"1. In the **Network** tab, use the \"Filter URLs\" text field to filter the network requests for a specific keyword. \n2. Prepending a minus (`-`) negates the filter. You can combine different filters together by separating them with a space.\n","References":"1. \"Filtering by properties\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/request_list/#filtering-by-properties)\n"},"Edge":{"Notes":"1. Open the **Network** tab > Use the \"Filter\" input field to filter network requests based on a specific keyword. \n2. Use the \"Invert\" checkbox to filter on requests which does not match the keyword.\n"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1535514483094917120","Notes":"1. In the **Network** tab, use the \"Filter Full URL\" input field to filter network requests for a specific keyword.\n"},"LastModifiedTime":"2/9/2024","Slug":"filter-requests-keyword"},{"Name":"Filter requests by properties","Description":"Can I filter requests in the Network tab using specific properties?","Category":"Network","Authors":["@pankajparashar"],"Tags":["filter","chrome","firefox","edge"],"Chrome":{"References":"[1] \"Filter by property\" - [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/network/reference/#filter-by-property)\n","Notes":"1. Use the **Filter** text box to filter requests by properties, such as the domain or size of the request.\n2. You can use multiple properties simultaneously by separating each property with a space. For example, `mime-type:image/gif larger-than:1K` displays all GIFs that are larger than one kilobyte. These multi-property filters are equivalent to AND operations. OR operations are currently not supported.\n"},"Firefox":{"Notes":"1. In the **Network** panel, use the \"Filter URLs\" field to filter network requests by properties such as domain, mime-type, size etc.,\n"},"Edge":{"Notes":"1. Use the Filter text box to filter requests by properties, such as the domain or size of the request.\n2. You can use multiple properties simultaneously by separating each property with a space. For example, `mime-type:image/gif larger-than:1K` displays all GIFs that are larger than one kilobyte. These multi-property filters are equivalent to AND operations. OR operations are currently not supported.\n","References":"1. \"Network features reference\", by Edge Developer [Docs](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/reference#filter-requests-by-properties)\n"},"LastModifiedTime":"2/9/2024","Slug":"filter-requests-properties"},{"Name":"Filter third party requests","Description":"Can I filter third party network requests?","Category":"Network","Authors":["@pankajparashar"],"Tags":["filter","chrome"],"Chrome":{"Notes":["1. In the **Network** panel, enable the **Third-party requests** option to show only requests with origin different from page origin."]},"LastModifiedTime":"2/9/2024","Slug":"filter-third-party-requests"},{"Name":"Find broken links","Description":"Can I find links on a page that return Error 404, 500?","Category":"Other","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["polypane"],"Polypane":{"Share":"https://twitter.com/CanIDevTools/status/1667588930152087554","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1686418102/find-broken-links-polypane_oer4vx.mp4","Notes":["1. Open DevTools panel (`Cmd/Ctrl+Shift+P`) > Info > Outline. Select \"Links\" from the dropdown menu at the top.","2. Scroll through the list of links to identify broken links reporting status code with 404, 500."]},"LastModifiedTime":"2/9/2024","Slug":"find-broken-links"},{"Name":"Find by XPath","Description":"Can I find elements in the DOM tree using xpath?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"Notes":"1. Open devtools using Cmd+Opt+I (on MacOS) or Ctrl+Shift+I (on Windows/Linux/ChromeOS) > Elements.\n2. Press Cmd+F or Ctrl+F to open the search bar at the bottom of the Elements panel.\n3. Enter XPath to find the element in the DOM node.\n"},"Firefox":{"Notes":"1. Open devtools using Cmd+Opt+I (on MacOS) or Ctrl+Shift+I (on Windows/Linux/ChromeOS) > Inspector.\n2. Press Cmd+F or Ctrl+F to open the search bar at the top of the Inspector panel.\n3. Enter the xpath to find the element in the DOM node.\n"},"Edge":{"Notes":"1. Open devtools using Cmd+Opt+I (on MacOS) or Ctrl+Shift+I (on Windows/Linux/ChromeOS) > Elements.\n2. Press Cmd+F or Ctrl+F to open the search bar at the bottom of the Elements panel.\n3. Enter XPath to find the element in the DOM node.\n\n"},"Safari":{"Notes":"1. In the **Elements** tab, use `Cmd+F` or `Ctrl+F` to open the search bar at the top of the Elements panel.\n2. Enter the xpath to find the element in the DOM node.\n\n"},"LastModifiedTime":"2/9/2024","Slug":"find-by-xpath"},{"Name":"Find color contrast","Description":"Can I find the contrast ratio of a color?","Category":"Accessibility","Authors":["@pankajparashar","@kilianvalkhof"],"Tags":["chrome","firefox","edge","polypane"],"Chrome":{"References":"[1] \"Color Picker\" - [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/css/reference/#color-picker)\n","Notes":"1. Inspect element > In the **Styles** pane, click the color square next to the `color` property. This will open the color panel.\n2. Expand the \"Contrast Ratio\" section to see more details whether the color value meets the W3C recommendation.\n3. Use the \"reload\" icon next to AA/AAA to use the suggested color to fix the low color contrast ratio.\n"},"Firefox":{"Notes":"1. Inspect the text element (this will open the devtools panel).\n2. In the pane next to the DOM tree, look for the section where the `color` property is set for the element.\n3. Click on the color circle next to the `color` property. This will open the color panel.\n"},"Edge":{"Notes":"1. Inspect element > In the **Styles** pane, click the color square next to the `color` property. This will open the color panel.\n2. Expand the \"Contrast Ratio\" section to see more details whether the color value meets the W3C recommendation.\n3. Use the \"reload\" icon next to AA/AAA to use the suggested color to fix the low color contrast ratio.\n"},"Polypane":{"Notes":"1. Inspect element > In the Navigator you can see the contrast ratio score (AA, A or an X for failing contrast). Hover it for the precise ratio or go to the A11y tab for more information.\n2. To get a fix, go to the \"Debug tools\" of a pane, then under \"Accessibility\" click \"Contrast checker\". Suggestions will be shown in the page.\n","References":"1. \"Element Navigator\" - [Polypane Docs](Element info)\n2. \"Contrast checker\" - [Polypane Docs](https://polypane.app/docs/debug-tools/#contrast-checker)\n"},"LastModifiedTime":"2/9/2024","Slug":"find-color-contrast"},{"Name":"Find element with CSS selector","Description":"Can I find elements in the DOM tree using CSS selector?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"Notes":"1. Open devtools > Click the \"Elements\" panel > Press `Cmd+F` (on Mac) or `Ctrl+F` (on Windows/Linux/Chrome OS) to open the search bar.\n2. Enter the CSS selector to search an element in the DOM tree.\n"},"Firefox":{"Notes":"1. Open devtools > Click the \"Inspector\" tab to open the DOM tree > Under the Inspector tab, locate the \"Search HTML\" field.\n2. Enter the CSS selector to search the element in the DOM tree.\n"},"Edge":{"Notes":"1. Open devtools > Click the \"Elements\" panel > Press `Cmd+F` (on Mac) or `Ctrl+F` (on Windows/Linux/Chrome OS) to open the search bar.\n2. Enter the CSS selector to search an element in the DOM tree.\n\n"},"Safari":{"Notes":"1. In the **Elements** tab, use `Cmd+F` or `Ctrl+F` to open the search box. Type the CSS selector and then press `Enter` to find elements matching the condition.\n"},"LastModifiedTime":"2/9/2024","Slug":"find-element-css-selector"},{"Name":"Find expensive CSS selectors","Description":"Can I find expensive CSS selectors?","Category":"CSS","Newsletter":"tips-tricks-38","Authors":["@pankajparashar"],"Tags":["edge"],"Edge":{"Notes":"1. In the **Performance** panel, Enable \"advanced rendering instrumentation (slow)\" in **Settings**.\n2. Click **Record**, and perform the operation on the page that affects rendering.\n3. In the recorded profile, identify a long style recalculation and select it in the waterfall view (“Main” section).\n4. In the bottom tab bar, click **Selector Stats.** Sort the selectors based on Elapsed Time, Match Attempts etc., to identify expensive selectors.\n","Share":"https://twitter.com/CanIDevTools/status/1622224371409645569","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1675600274/find-expensive-selectors-edge_aue2fg.mp4","References":"1. \"The truth about CSS selector performance\", by [Patrick Brosset](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/)\n"},"LastModifiedTime":"2/9/2024","Slug":"find-expensive-selectors"},{"Name":"Find in files","Description":"Can I find in files for a specific keyword?","Category":"Debugger","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"References":"[1] \"Search: Find text..\", by Chrome DevTools [Docs](https://developer.chrome.com/docs/devtools/search/)\n","Notes":"1. Open **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run > \"Show Search\" (Drawer).\n2. Enter the search query in the text field and press `Enter` to search across all download resources.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658465804/find-in-files-chrome_ty4bkl.mp4"},"Firefox":{"Notes":"1. In the **Debugger** tab, press `Cmd+Shift+F` or `Ctrl+Shift+F` to find in files for a specific keyword.\n"},"Edge":{"Notes":"1. Open **Command** **Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run > \"Show Search\" (Drawer).\n2. Enter the search query in the text field and press `Enter` to search across all download resources.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1658470540/find-in-files-edge_fs5y4c.mp4"},"Safari":{"Notes":"1. Anywhere in the web inspector, press `Cmd+Shift+F` to find in files for a specific keyword.\n"},"LastModifiedTime":"2/9/2024","Slug":"find-in-files"},{"Name":"Find inactive styles","Description":"Can I find inactive styles applied to an element?","Category":"CSS","Newsletter":"tips-tricks-15","Authors":["@pankajparashar"],"Tags":["chrome","firefox","edge","safari"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1571519143115108353","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663480849/find-inactive-styles-chrome_f0qouj.mp4","Notes":["1. Enable authoring hints, by opening **Settings** (`F1`) > **Experiments** > Filter on \"authoring hints\" > Check \"Enable CSS Authoring hints...\"","2. In **Elements** > Locate the authored styles in the **Styles** pane > Inactive declarations have an \"i\" icon, which on hover reveals a tooltip displaying more information.\n"]},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1571520604150575114","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663497088/find-inactive-styles-firefox_ip5jow.mp4","Notes":["1. In **Inspector** > Locate the styles in the **Rules** pane. Inactive styles will have an \"i\" icon next to it, which on hover will reveal more information about it.\n"]},"Edge":{"Share":"https://twitter.com/CanIDevTools/status/1571519895124475904","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663483151/find-inactive-styles-edge_m0f4mc.mp4","Notes":["1. Enable authoring hints, by opening **Settings** (`F1`) > **Experiments** > Filter on \"authoring hints\" > Check \"Enable CSS Authoring hints...\"","2. In **Elements** > Locate the authored styles in the **Styles** pane > Inactive declarations have an \"i\" icon, which on hover reveals a tooltip displaying more information.\n"]},"LastModifiedTime":"2/9/2024","Slug":"find-inactive-styles"},{"Name":"Find offset parent","Description":"Can I find the offset parent of an element?","Category":"CSS","Authors":["@kilian"],"Tags":["polypane"],"Polypane":{"Notes":["1. Inspect the element in the **Elements** panel. Open the **Debug** tab, scroll down to the **Context** section to find the offset parent of the element."],"References":["1. Offset parent, [Polypane Blog](https://polypane.app/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions/)"]},"LastModifiedTime":"2/9/2024","Slug":"find-offset-parent"},{"Name":"Find unused CSS","Description":"Can I find unused styles on a web page?","Category":"CSS","Authors":["@pankajparashar"],"Tags":["chrome","edge"],"Chrome":{"Notes":"1. Launch Devtools > Open Command Menu using \"Cmd+Shift+P\" (on Mac) or \"Ctrl+Shift+P\" (on Windows/Linus/Chrome OS).\n2. Search for \"Show Coverage\" (this will open the Coverage drawer next to the Console).\n3. Click the \"Reload\" button to see the unused styles per CSS file. \n"},"Edge":{"Notes":"1. Launch Devtools > Open Command Menu using \"Cmd+Shift+P\" (on Mac) or \"Ctrl+Shift+P\" (on Windows/Linus/Chrome OS).\n2. Search for \"Show Coverage\" (this will open the Coverage drawer next to the Console).\n3. Click the \"Reload\" button to see the unused styles per CSS file. \n"},"LastModifiedTime":"2/9/2024","Slug":"find-unused-css"},{"Name":"Find unused JavaScript","Description":"Can I find unused JavaScript code on the page?","Category":"JavaScript","Authors":["@pankajparashar"],"Tags":["chrome","edge","safari"],"Chrome":{"References":"[1] \"Coverage: Find unused JavaScript and CSS\" - [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/coverage/)\n","Notes":"1. Open **Command** Menu using `Cmd+Shift+P` or `Ctrl+Shift+P`. Search for \"Show Coverage\" and press `Enter`. (this will open the **Coverage** drawer next to the Console).\n2. Click the \"Reload\" button to see the unused JavaScript bytes per file. Clicking the row, will open the file in the **Sources** panel highlighting the unused lines with red colour.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1656651888/Videos/find-unused-javascript-chrome_h5ow6g.mp4"},"Edge":{"Notes":"1. Open **Command** Menu using `Cmd+Shift+P` or `Ctrl+Shift+P`. Search for \"Show Coverage\" and press `Enter`. (this will open the **Coverage** drawer next to the Console).\n2. Click the \"Reload\" button to see the unused JavaScript bytes per file. Clicking the row, will open the file in the **Sources** panel highlighting the unused lines with red colour.\n"},"Safari":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1678134567/find-unused-js-safari_zmtpjp.mp4","Notes":"1. In the **Sources** panel, open the JS file from the left sidebar. Click the \"C\" icon in the toolbar (top-right) to fade unexecuted code. \n2. Reload the page to fade unexecuted code.\n"},"LastModifiedTime":"2/9/2024","Slug":"find-unused-js"},{"Name":"Focus form elements","Description":"Can I focus on form elements in the DOM?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":["1. In the **Elements** panel, right click on the node and select \"Focus\"."]},"LastModifiedTime":"2/9/2024","Slug":"focus-form-elements"},{"Name":"Force node states","Description":"Can I force the node to emulate a user action state like focus, hover etc?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["chrome"],"Chrome":{"Notes":["1. In the **Elements** panel, right click on the node > Force state > Select from `:hover`, `:active`, `:focus`, `:visited` etc."]},"LastModifiedTime":"2/9/2024","Slug":"force-node-states"},{"Name":"Fuzzy autocomplete styles","Description":"Can I fuzzy autocomplete CSS properties?","Category":"CSS","Authors":["@pankajparashar"],"Tags":["safari"],"Safari":{"Notes":"1. Safari allows you to autocomplete CSS properties with fuzzy matching like, entering `gtc` will suggest `grid-template-columns` in the suggestions box.\n"},"LastModifiedTime":"2/9/2024","Slug":"fuzzy-autocomplete-styles"},{"Name":"Get detached elements","Description":"Can I get a list of all the detached elements to investigate memory leaks?","Category":"Performance","Authors":["@pankajparashar"],"Edge":{"Notes":["1. Open Command Menu and Run Show Detached Elements. Click the Get detached elements button to list all of the currently detached elements.","2. Click the Analyze button to take a memory heap snapshot. Once done, you can then double-click any of the detached elements' Ids to find the link between these elements and your JavaScript code in the Memory panel.","3. Don't forget to click the Collect garbage button every once in a while to force garbage collection. Then get the detached elements again. Indeed, some elements may remain in memory simply because the browser hasn't yet cleaned them up. Forcing GC makes sure the list only contains the elements that are detached and cannot be cleaned up."],"References":["1. Debug DOM memory leaks with the Detached Elements tool, [Microsoft Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks)"]},"LastModifiedTime":"2/9/2024","Slug":"get-detached-elements"},{"Name":"Get Event Listeners","Description":"Can I get all the event listeners on a web page?","Category":"Tricks","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1739329624750891423","Image":"https://res.cloudinary.com/canidevtools/image/upload/v1703523553/get-event-listeners.png","Code":"$$$(\"*\")\n .map(node => ({\n node, \n listeners: getEventListeners(node) \n }))\n .filter(obj => Object.keys(obj.listeners).length);"},"Edge":{"Share":"https://twitter.com/CanIDevTools/status/1739329624750891423","Image":"https://res.cloudinary.com/canidevtools/image/upload/v1703523553/get-event-listeners.png","Code":"$$$(\"*\")\n .map(node => ({\n node, \n listeners: getEventListeners(node) \n }))\n .filter(obj => Object.keys(obj.listeners).length);"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1739329624750891423","Image":"https://res.cloudinary.com/canidevtools/image/upload/v1703523553/get-event-listeners.png","Code":"$$$(\"*\")\n .map(node => ({\n node, \n listeners: getEventListeners(node) \n }))\n .filter(obj => Object.keys(obj.listeners).length);"},"LastModifiedTime":"2/9/2024","Slug":"get-event-listeners"},{"Name":"Get last evaluated value","Description":"Can I get the last evaluated value in the console?","Category":"Console","Newsletter":"tips-tricks-7","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1553378242366545920","References":"1. \"Console Utilities\", by Chrome DevTools [Docs](https://developer.chrome.com/docs/devtools/console/utilities/#recent)\n","Notes":"1. `$_` returns the value of the most recently evaluated expression.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659185438/get-last-value-chrome_udgaci.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1553378242366545920","Notes":"1. `$_` returns the value of the most recently evaluated expression.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659187996/get-last-value-firefox_u8azho.mp4"},"Edge":{"Notes":"1. `$_` returns the value of the most recently evaluated expression.\n","Share":"https://twitter.com/CanIDevTools/status/1553378242366545920","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659188555/get-last-value-edge_gujpbg.mp4"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1553378242366545920","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659188866/get-last-value-safari_ckgbub.mp4","References":"1. \"Console Command Line API\", by [Webkit](https://webkit.org/web-inspector/console-command-line-api/)\n\n","Notes":"1. `$_` returns the value of the most recently evaluated expression.\n2. Additionally, Safari also lets you access past values in chronological order, using `$1, $2, $3`, ...\n"},"Polypane":{"References":"1. \"Available console commands\", [Polypane Docs](https://polypane.app/docs/console/#available-commands)\n","Notes":"1. `$_` returns the value of the most recently evaluated expression.\n"},"LastModifiedTime":"2/9/2024","Slug":"get-last-value"},{"Name":"Get node XPath","Description":"Can I get the xpath of a node in the DOM tree?","Category":"Elements","Newsletter":"tips-tricks-4","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1542517123536539648","Notes":"1. Inspect the element > Right click on the node in the DOM tree > Copy > Copy full XPath\n"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1542517879241076737","Notes":"1. Inspect element > Right click on the node in the DOM tree > Copy > XPath\n"},"Edge":{"Notes":"1. Inspect element > Right click on the node in the DOM tree > Copy > Copy full XPath\n","Share":"https://twitter.com/CanIDevTools/status/1542518234439892992"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1542518565508874240","Notes":"1. Inspect element > Right click on the node in the DOM tree > Copy > XPath.\n"},"Polypane":{"Notes":"In the **Elements** panel, click the \"Copy\" icon in the navigator, then select \"Copy Xpath\"\n"},"LastModifiedTime":"2/9/2024","Slug":"get-node-xpath"},{"Name":"Get selected node","Description":"Can I refer the currently selected node in the DOM tree from the console?","Category":"Console","Newsletter":"tips-tricks-16","Authors":["@pankajparashar","@kilianvalkhof"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1553610736454184960","References":"1. \"Console Utilities\", by Chrome DevTools [Docs](https://developer.chrome.com/docs/devtools/console/utilities/#recent-many)\n","Notes":"1. Use `$0` to access the currently selected node. Additionally, `$1`, `$2`, `$3`, ... will give you the last selected nodes in the reverse chronological order.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1659243167/get-selected-node-chrome_uf5o4m.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1553610736454184960","Notes":"1. Use `$0` to access the currently selected node.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663600859/get-selected-node-firefox_vrqglw.mp4"},"Edge":{"Notes":"1. Use `$0` to access the currently selected node. Additionally, `$1`, `$2`, `$3`, ... will give you the last selected nodes in the reverse chronological order.\n","Share":"https://twitter.com/CanIDevTools/status/1553610736454184960","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663602758/get-selected-node-edge_wefhlh.mp4"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1553610736454184960","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663669806/get-selected-node-safari_ayqhwl.mp4","References":"1. \"Console Command Line API\", by [Webkit](https://webkit.org/web-inspector/console-command-line-api/)\n","Notes":"1. Use `$0` to access the currently selected node.\n\n"},"Polypane":{"Notes":"1. Use `$0` to access the currently selected node. Additionally, `$1`, `$2`, `$3` and `$4` will give you the last selected nodes in the reverse chronological order.\n","References":"1. Console commands, [Polypane docs](https://polypane.app/docs/console/#available-commands)\n"},"LastModifiedTime":"2/9/2024","Slug":"get-selected-node"},{"Name":"Get viewport size","Description":"Can I get the viewport size?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. Open DevTools panel docked to the page. Resize the Devtools panel to view the current viewport size in top-right."],"References":"\"See the viewport size\", [Devtools Tips](https://devtoolstips.org/tips/en/see-viewport-size/)"},"Firefox":{"Notes":["1. Open DevTools and go to the Settings panel (F1).","2. Under Available Toolbox Buttons, select the Toggle rulers for the page setting. The Toggle rulers for the page icon appears in the DevTools toolbar.","3. Click the ruler icon to display rulers in the webpage. In addition to the top and left rulers which now are visible in the webpage, the viewport size is displayed in an overlay, in the top-right corner of the webpage."],"References":"\"See the viewport size\", [Devtools Tips](https://devtoolstips.org/tips/en/see-viewport-size/)"},"Edge":{"Notes":["1. Open DevTools panel docked to the page. Resize the Devtools panel to view the current viewport size in top-right."],"References":"\"See the viewport size\", [Devtools Tips](https://devtoolstips.org/tips/en/see-viewport-size/)"},"Safari":{"Notes":["1. In Web Inspector, click the Show Rulers button to enable the ruler and viewport size on the page."],"References":"\"See the viewport size\", [Devtools Tips](https://devtoolstips.org/tips/en/see-viewport-size/)"},"LastModifiedTime":"2/9/2024","Slug":"get-viewport-size"},{"Name":"Go to file","Description":"Can I jump to a file by searching with a filename?","Category":"Debugger","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/jecfish/status/1523451005626593280","Notes":"1. Run Command menu using `Cmd+Shift+P` (on Mac) or `Ctrl+Shift+P` (on Windows/Linux) > Type filename to filter on the matching files > Press `Enter`.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1652108007/Videos/search-files-chrome.mp4"},"Firefox":{"Notes":"1. In the **Debugger** tab, use `Cmd+P` or `Ctrl+P` to open the search panel where you can type keyword to search for matching filenames.\n2. Press `Enter` to trigger the search.\n"},"Edge":{"Notes":"1. Open devtools using `Cmd+Opt+I` (on Mac) or `Ctrl+Shift+I` (on Windows/Linux) > Sources.\n2. Run Command menu using `Cmd+Shift+P` (on Mac) or `Ctrl+Shift+P` (on Windows/Linux) > Type filename to filter on the matching files > Press `Enter`.\n\n"},"Safari":{"Notes":"1. Anywhere in the web inspector, press `Cmd+P` to search for files matching the filename.\n"},"LastModifiedTime":"2/9/2024","Slug":"go-to-file"},{"Name":"Hide extention requests","Description":"Can I hide network requests sent by extensions?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, check the **Hide extension URLs** option in the toolbar."]},"LastModifiedTime":"2/9/2024","Slug":"hide-extention-requests"},{"Name":"Ignore extension scripts","Description":"Can I ignore extention scripts while debugging?","Category":"JavaScript","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. Open **Settings** (`F1`) > Ignore List > Disable \"Content scripts injected by extensions\"."],"References":"1. \"Ignore Chrome Extensions scripts\", [Chrome Developers](https://developer.chrome.com/docs/devtools/settings/ignore-list/#skip-extensions)."},"LastModifiedTime":"2/9/2024","Slug":"ignore-extension-scripts"},{"Name":"Ignore scripts while debugging","Description":"Can I ignore scripts while debugging?","Category":"Debugger","Newsletter":"tips-tricks-42","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1637174916431659010","References":"1. \"Ignore irrelevant scripts during debugging\", by [Chrome Developers](https://developer.chrome.com/blog/new-in-devtools-112/#ignore-list).\n","Notes":"1. In **Sources** > Open **Page** (left sidebar) > Right click on the script to be ignored and select \"Add script to ignore list\". Debugger will omit this script from the call stack and gray out in the file tree.\n2. Alternatively, you can also add a script to the ignore list from the **Call** **Stack** pane by using the same option from the right click menu.\n3. To ignore multiple scripts using a pattern, open **Settings** (`F1`) > Ignore List > Enable Ignore Listing. Click the \"Add Pattern\" button and enter the regex pattern matching the scripts to be ignored.\n4. All the ignored scripts will be available under **Custom exclusion rules** section in **Ignore List**.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1679166363/ignore-scripts-debug-chrome_dsg0yu.mp4"},"Edge":{"Notes":"1. In **Sources** > Open **Page** (left sidebar) > Right click on the script to be ignored and select \"Add script to ignore list\". Debugger will omit this script from the call stack and gray out in the file tree.\n2. Alternatively, you can also add a script to the ignore list from the **Call** **Stack** pane by using the same option from the right click menu.\n3. To ignore multiple scripts using a pattern, open **Settings** (`F1`) > Ignore List > Enable Ignore Listing. Click the \"Add Pattern\" button and enter the regex pattern matching the scripts to be ignored.\n4. All the ignored scripts will be available under **Custom** **exclusion** **rules** section in **Ignore** **List**.\n","Share":"https://twitter.com/CanIDevTools/status/1637174916431659010","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1679174753/ignore-scripts-debug-edge_evanbj.mp4","References":"1. \"Ignore a script or a pattern of scripts\", by [Edge DevTools Docs](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/reference#ignore-a-script-or-pattern-of-scripts).\n"},"Safari":{"Notes":["1. In the **Sources** panel, right click on any script and select **Blackbox script** or click the eye icon next to the script name in the source tree.","2. To ignore multiple scripts with a pattern, go to Settings > Blackbox > Enter the regex pattern to ignore scripts in bulk."],"References":"1. \"Script blackboxing\", by [Webkit Docs](https://webkit.org/web-inspector/script-blackboxing/)."},"Firefox":{"Notes":["1. In the **Debugger** panel, right click on the filename in the source list pane, and select \"Ignore source\" or (\"Unignore source\").","2. If the source file is displayed in the source pane, click the \"crossed out source\" icon at the bottom to ignore the script."],"References":"1. \"Ignore a source\", [Firefox DevTools Docs](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/ignoring_sources/index.html#ignore-a-source)."},"LastModifiedTime":"2/9/2024","Slug":"ignore-scripts-debug"},{"Name":"Ignore third-party scripts","Description":"Can I ignore third-party scripts while debugging?","Category":"Debugger","Authors":["@pankajparashar"],"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1725109290225316229","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/ignore-third-party-scripts-firefox.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/ignore-third-party-scripts-firefox.png","Notes":["1. In the **Debugger** panel, open **Debugger Settings** and select **Ignore Known Third-partyScripts** to ignore the third-party scripts defined in the [ignoreList](https://developer.chrome.com/articles/x-google-ignore-list/) sourcemaps extension."],"References":["1. Ignore third-party scripts, [Firefox source docs](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/ignoring_sources/index.html#ignore-third-party-scripts)","2. The ignoreList source map extension, [Chrome Developer Articles](https://developer.chrome.com/articles/x-google-ignore-list/#what-is-ignorelist)"]},"LastModifiedTime":"2/9/2024","Slug":"ignore-third-party-scripts"},{"Name":"Import & Export HAR file","Description":"Can I import and export network activity to a HAR file?","Category":"Network","Newsletter":"tips-tricks-30","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1583003304161779712","Notes":"1. In the **Network** panel, use the **Up** (↑) and **Down** (↓) arrow buttons in the toolbar to **Import** and **Export** all the network activity into a HAR file.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666245808/import-export-har-chrome_u7mouu.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1583005616817115137","Notes":"1. In the **Network** panel, click the **Gear** icon to open the **Network** **Settings**.\n2. Click \"Save All As HAR\" to export the HAR file and \"Import HAR File\" to import the HAR file.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666246865/import-export-har-firefox_fzub67.mp4"},"Edge":{"Notes":"1. In the **Network** panel, use the **Up** (↑) and **Down** (↓) arrow buttons in the toolbar to **Import** and **Export** all the network activity into a HAR file.\n\n","Share":"https://twitter.com/CanIDevTools/status/1583003304161779712","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666249898/import-export-har-edge_zvwlr2.mp4"},"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1583006182087630848","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1666247499/import-export-har-safari_axrxre.mp4","Notes":"1. In the **Network** panel, use the **Import** & **Export** buttons to import and export HAR file respectively.\n"},"LastModifiedTime":"2/9/2024","Slug":"import-export-har"},{"Name":"Import source maps","Description":"Can I import source maps manually to debug production code?","Category":"Debugger","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Sources** panel, open the script, right click in the Editor, and select **Add source map...** from the menu.","2. Enter the source map URL, click Add. On successful addition, the source map will appear in the **Developer Resources** drawer and the editor status bar."],"References":["1. \"Load a source map manually\", [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/developer-resources/#load)."]},"Edge":{"Notes":["1. In the **Sources** panel, open the script, right click in the Editor, and select **Add source map...** from the menu.","2. Enter the source map URL, click Add. On successful addition, the source map will appear in the **Developer Resources** drawer and the editor status bar."],"References":["1. \"Mapping minified code to your source code to show readable code\", [Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sources/#mapping-minified-code-to-your-source-code-to-show-readable-code)."]},"LastModifiedTime":"2/9/2024","Slug":"import-source-maps"},{"Name":"Inspect Box shadow","Description":"Can I inspect CSS box shadow using an editor?","Category":"CSS","Newsletter":"tips-tricks-18","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1572808549335302144","References":"1. \"CSS Box shadow editor\", by Chrome DevTools [Docs](https://developer.chrome.com/docs/devtools/css/reference/#shadow-editor)\n","Notes":"1. Inspect the element with box shadow > In the Styles pane, click the icon next to the `box-shadow` property to open the box shadow editor.\n2. Change the shadow properties:\n - **Type** (only for `box-shadow`). Pick **Outset** or **Inset**.\n - **X and Y offsets**. Drag the blue dot or specify values.\n - **Blur**. Drag the slider or specify a value.\n - **Spread** (only for `box-shadow`). Drag the slider or specify a value.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663767294/inspect-box-shadow-chrome_xdo6e7.mp4"},"Edge":{"Notes":"1. Inspect the element with box shadow > In the **Styles** pane, click the icon next to the `box-shadow` property to open the box shadow editor.\n2. Change the shadow properties:\n - **Type** (only for `box-shadow`). Pick Outset or Inset.\n - **X** and **Y** offsets. Drag the blue dot or specify values.\n - **Blur**. Drag the slider or specify a value.\n - **Spread** (only for `box-shadow`). Drag the slider or specify a value.\n","Share":"https://twitter.com/CanIDevTools/status/1572808549335302144","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1663775064/inspect-box-shadow-edge_jnbhin.mp4"},"Safari":{"Notes":["1. Inspect Element with `box-shadow` property applied. Click the square icon before the box shadow value to open the box shadow editor.","2. In the editor, you can change the Offset X/Y, Inset, Blur, Spread and Color properties of the box shadow"]},"LastModifiedTime":"2/9/2024","Slug":"inspect-box-shadow"},{"Name":"Inspect container queries","Description":"Can I inspect and debug container queries in the devtools?","Category":"CSS","Authors":["@pankajparashar","@kilianvalkhof"],"Firefox":{"Version":"116","Share":"https://twitter.com/CanIDevTools/status/1729880961406611778","Image":"https://res.cloudinary.com/canidevtools/image/upload/v1701269027/inspect-container-queries-firefox.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1701269339/inspect-container-queries-firefox-v1.mp4","Notes":["1. Elements with `container-type` as `inline-size` or `size` are decorated with the **container** badge in the **Inspector** panel.","2. In the **Rules** view, `@container` declaration is underlined, on hover displays the container element. Click the crosshair icon to jump to the element in the Element tree."],"References":["1. Networking, [Firefox 116 DevTools Newsletter](https://fxdx.dev/firefox-devtools-newsletter-116/)"]},"Chrome":{"References":["1. Container Queries, [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/css/container-queries/)"],"Notes":["1. Every element defined as a query container has a `container` badge next to it in the **Elements** panel. The badge toggles a dotted-line overlay of the container and its descendants.","2. To find and select a container element that caused the query to take effect, hover over and click the element name above the `@container` declaration.","3. When hovered over, the name turns into a link to the element in the **Elements** panel and the **Styles** pane displays the queried property and its current value."],"Video":"https://res.cloudinary.com/canidevtools/video/upload/v1656825850/Videos/inspect-container-queries-chrome_fiy7sn.mp4"},"Safari":{"Notes":["1. Inspect the element with `container-type` property. All the child elements using the Container query will have the `@container` decorator on top of the selector, which can be edited to affect the size of the container."]},"Polypane":{"Notes":["1. Inspect the element with `container-type` property. All the child elements using the Container query will have the `@container` decorator on top of the selector."]},"LastModifiedTime":"2/9/2024","Slug":"inspect-container-queries"},{"Name":"Inspect CSS angles","Description":"Can I inspect & tweak the CSS angle unit values applied to a property? ","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Notes":"1. Inspect the element using CSS angle unit values > Styles > Click the icon next to the angle unit to open a visual editor to apply the angle value.\n"},"Edge":{"Notes":"1. Inspect the element using CSS angle unit values > Styles > Click the icon next to the angle unit to open a visual editor to apply the angle value.\n\n"},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-angles"},{"Name":"Inspect CSS Animation","Description":"Can I inspect CSS animations & keyframes using the devtools?","Category":"CSS","Newsletter":"tips-tricks-12","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1558358446914748416","References":["1. Inspect animations, on [Chrome Developers Docs](https://developer.chrome.com/docs/devtools/css/animations/).","2. How to inspect animations, by [Chrome Developers on YouTube](https://youtu.be/lVLzkleL_CE).\n"],"Notes":"1. Open **Command** **Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Animations\" and press `Enter.`\n2. Trigger the animation to record it on the timeline. Now you can use the buttons in the **Controls** section to adjust the replay speed of the animation.\n3. Use the **Timeline** section to scrub the animation or jump to a specific point in animation. Use the **Details** section modify the timing & the delay of the animation.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1660375651/inspect-css-animation-chrome_xz5w96.mp4"},"Firefox":{"Notes":"1. Inspect the element which uses CSS animation. Click on the **Animations** pane next to the DOM tree in the side panel.\n","References":["1. Work with animations - Firefox source [docs](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/work_with_animations/index.html)."]},"Edge":{"Notes":"1. Open **Command** **Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Animations\" and press `Enter.`\n2. Trigger the animation to record it on the timeline. Now you can use the buttons in the **Controls** section to adjust the replay speed of the animation.\n3. Use the **Timeline** section to scrub the animation or jump to a specific point in animation. Use the **Details** section modify the timing & the delay of the animation.\n","Share":"https://twitter.com/CanIDevTools/status/1558358446914748416","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1647789160/Videos/debug-css-animation-chrome.mp4"},"Safari":{"Notes":"1. Open devtools > Open the \"Timelines\" tab > Ensure that \"Media and Animations\" is enabled in the left panel.\n2. Now reload the page or trigger the animation to see the timeline in the bottom panel. \n"},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-animation"},{"Name":"Inspect CSS @property rule","Description":"Can I inspect the @property CSS at-rules applied to an element?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. To inspect your registered custom properties, in **Elements > Styles**, hover over the property name and see its descriptors in a tooltip. In the tooltip, click the link to view the registered property in the collapsible @property section."],"References":["1. New section for custom properties in Elements > Styles, [What's new in DevTools 118](https://developer.chrome.com/blog/new-in-devtools-118/#css)."]},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-at-property"},{"Name":"Inspect CSS Filters","Description":"Can I inspect CSS filters using an editor in devtools?","Category":"CSS","Authors":["@pankajparashar"],"Firefox":{"Notes":"1. In **Rules** > identify the filter property and click the swatch icon next to the filter value.\n2. Use the editor to add, modify or remove filter functions, reorder and create presets to reuse later.\n"},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-filters"},{"Name":"Inspect CSS Flexbox","Description":"Can I inspect CSS flexbox?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"References":"[1] \"Inspect and Debug CSS Flexbox layouts\" - [Chrome Developers](https://developer.chrome.com/docs/devtools/css/flexbox/)\n","Notes":"1. When an HTML element on your page has `display: flex` or `display: inline-flex` applied to it, you can see a `flex` badge next to it in the **Elements** panel.\n2. In the **Styles** pane, you can see the flexbox editor button next to the `display: flex` declaration.\n3. Click on it to open the flexbox editor. The editor displays a list of flexbox properties. Each property's value options are displayed as icon buttons.\n"},"Firefox":{"Notes":"1. When an HTML element on your page has [display: flex](https://developer.mozilla.org/en-US/docs/Web/CSS/display) applied to it, a number of features are made available in the DevTools to provide easy access to Flexbox layout features.\n2. In the [CSS pane](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#page-inspector-ui-tour-rules-view)’s Rules view, any instance of a [display: flex](https://developer.mozilla.org/en-US/docs/Web/CSS/display) declaration gets a small Flexbox icon next to the word `flex`. Clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item:\n3. The flex items within the flex container are displayed as a numbered list in the Flex Items section. Each entry displays the item’s selector. Hover over an element to highlight it on the page. If you click on the item, the display shifts to show details about that element.\n","References":"1. \"CSS Flexbox Inspector\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)\n"},"Edge":{"Notes":"1. When an HTML element on your page has `display: flex` or `display: inline-flex` applied to it, you can see a `flex` badge next to it in the Elements panel.\n2. In the Styles pane, you can see the flexbox editor button next to the `display: flex` declaration.\n3. Click on it to open the flexbox editor. The editor displays a list of flexbox properties. Each property's value options are displayed as icon buttons.\n\n"},"Safari":{"Notes":"1. In the **Elements** tab, select the node with label \"flex\" from the DOM tree. \n2. From the right sidebar, select \"Layout\", and scroll down to the **Flexbox** section, that has few page overlay options to help visualize and debug flexbox containers.\n"},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-flexbox"},{"Name":"Inspect CSS Grid","Description":"Can I inspect CSS grid?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"References":"[1] \"Inspect CSS Grid\" - [Chrome Developers](https://developer.chrome.com/docs/devtools/css/grid/)\n","Notes":"1. When an HTML element on your page has `display: grid` or `display: inline-grid` applied to it, you can see a `grid` badge next to it in the **Elements** panel.\n2. Clicking the badge to toggle the display of a grid overlay on the page. The overlay appears over the element, laid out like a grid to show the position of its grid lines and tracks.\n3. Open the **Layout** pane. When grids are included on a page, the Layout pane includes a **Grid** section containing a number of options for viewing those grids^[1]\n"},"Firefox":{"Notes":"1. When an HTML element on your page has `display: grid` or `display: inline-grid` applied to it, you can see a `grid` badge next to it in the Elements panel.\n2. Clicking the badge to toggle the display of a grid overlay on the page. The overlay appears over the element, laid out like a grid to show the position of its grid lines and tracks.\n3. Open the **Layout** pane. When grids are included on a page, the Layout pane includes a Grid section containing a number of options for viewing those grids.\n","References":"1. \"CSS Grid Inspector\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)\n"},"Edge":{"Notes":"1. When an HTML element on your page has `display: grid` or `display: inline-grid` applied to it, you can see a `grid` badge next to it in the **Elements** panel.\n2. Clicking the badge to toggle the display of a grid overlay on the page. The overlay appears over the element, laid out like a grid to show the position of its grid lines and tracks.\n3. Open the **Layout** pane. When grids are included on a page, the Layout pane includes a Grid section containing a number of options for viewing those grids.\n\n"},"Safari":{"References":"[1] \"Introducing CSS Grid Inspector\" - [Webkit](https://webkit.org/blog/11588/introducing-css-grid-inspector/)\n","Notes":"1. When an HTML element on your page has `display: grid` or `display: inline-grid` applied to it, you can see a `grid` badge next to it in the Elements panel.\n2. Clicking the badge to toggle the display of a grid overlay on the page. The overlay appears over the element, laid out like a grid to show the position of its grid lines and tracks.\n3. Open the **Layout** pane. When grids are included on a page, the Layout pane includes a Grid section containing a number of options for viewing those grids.\n"},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-grid"},{"Name":"Inspect CSS Nesting","Description":"Can I inspect CSS nesting rules applied to an element?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1724839203903852600","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/inspect-css-nesting-chrome.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/inspect-css-nesting-chrome.mp4","Notes":["1. Inspect the element that has CSS nesting rules applied. Nesting rules are available in the **Styles** pane to view and edit."],"References":["1. Debugging CSS Nesting with Chrome DevTools, [Chrome Developers Articles](https://developer.chrome.com/articles/css-nesting/#debugging-with-chrome-devtools)"]},"Edge":{"Notes":["1. Inspect the element that has CSS nesting rules applied. Nesting rules are available in the **Styles** pane to view and edit."]},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1724838865058586979","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/inspect-css-nesting-firefox.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/inspect-css-nesting-firefox.mp4","Notes":["1. Inspect the element that has CSS nesting rules applied. Nesting rules are available in the **Rules** pane to view and edit."]},"Polypane":{"Share":"https://twitter.com/CanIDevTools/status/1724838246277067190","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/inspect-css-nesting-polypane.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/inspect-css-nesting-polypane.mp4","Notes":["1. Inspect the element that has CSS nesting rules applied. Nesting rules are available in the **Style** pane to view and edit."]},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-nesting"},{"Name":"Inspect CSS Position","Description":"Can I inspect & edit the absolutely positioned elements visually?","Category":"CSS","Authors":["@pankajparashar"],"Firefox":{"Notes":"1. Inspect element with `position:relative` or `position:absolute` applied to it in the **Inspector** panel.\n2. Open the **Layout** sidebar panel, and scroll down to the Box Model section.\n3. Find the \"Edit Position\" icon and click it.\n4. Use the handles in the page to move the element around, within its positioned ancestor.\n","References":["1. \"Reposition elements in the page\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/reposition_elements_in_the_page/index.html)\n"]},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-position"},{"Name":"Inspect CSS Shapes","Description":"Can I inspect CSS shapes properties like clip-path, shape-outside, etc?","Category":"CSS","Authors":["@pankajparashar"],"Firefox":{"Notes":"1. Inspect the element with CSS shape properties like `clip-path` & `shape-outside` > Rules > Click the \"shape\" icon next to the value to open the **Shape Path Editor** tool.\n2. Click & Drag the control points highlighted on the shape to modify the shape.\n","References":"1. \"Edit Shape Paths in CSS\" - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)\n"},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-shapes"},{"Name":"Inspect CSS specificity","Description":"Can I inspect specificity of a CSS selector?","Category":"CSS","Newsletter":"tips-tricks-19","Authors":["@pankajparashar"],"Safari":{"Share":"https://twitter.com/CanIDevTools/status/1573634703047151616","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1664018473/inspect-css-specificity-safari_tphvrw.mp4","Notes":["1. Inspect element > In the **Styles** pane, hover over the selector to reveal a tooltip displaying the specificity of that selector."]},"Polypane":{"Share":"https://twitter.com/CanIDevTools/status/1665378741940363265","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1685890182/inspect-css-specificity-polypane_claqbw.mp4","Notes":["1. Inspect element (`Cmd+Shift+C` or `Ctrl+Shift+C`) > In the **Style** pane, the specificity is shown adjacent to the selector under the file name.","2. Click the specificity to open the CSS Specificity calculator in the **Browse** panel."]},"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1667023497002991616","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1686283557/inspect-css-specificity-chrome_exa4yc.mp4","Notes":["1. In **Elements** > **Styles** pane, hover over the selector name to see the specificity in a tooltip."],"References":"1. \"Selector specificity in tooltips\", on [Chrome Developers](https://developer.chrome.com/blog/new-in-devtools-115/#specificity)."},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-specificity"},{"Name":"Inspect CSS Subgrid","Description":"Can I inspect CSS subgrids?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In **Elements**, nodes with `grid-template-columns` or `grid-template-rows` set as `subgrid` shows a **subgrid** badge next to it.","2. Click the badge to inspect the nested grid and toggle an overlay that shows columns, rows, and track numbers on top of the element in the viewport."],"References":"1. \"New CSS subgrid badge\", on [Chrome Developers](https://developer.chrome.com/blog/new-in-devtools-115/#subgrid)."},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-subgrid"},{"Name":"Inspect CSS vars","Description":"Can I inspect CSS variables?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In **Styles** pane, hover over the variable name to see the value in the tooltip. Click the link to jump to the section where the variable is defined.\n"]},"Edge":{"Notes":["1. In **Styles** pane, hover over the variable name to see the value in the tooltip. Click the link to jump to the section where the variable is defined.\n"]},"LastModifiedTime":"2/9/2024","Slug":"inspect-css-vars"},{"Name":"Inspect custom element","Description":"Can I inspect the source code of a custom element?","Category":"Elements","Authors":["@pankajparashar"],"Tags":["firefox"],"Firefox":{"Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/inspect-custom-element-firefox-img.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/inspect-custom-element-firefox.mp4","Share":"https://twitter.com/CanIDevTools/status/1739273098463990041","Notes":"- Open the **Inspector** panel. Custom elements are decorated with the `custom` badge to make them easier to identify them in the Element tree.\n- Click the badge to directly jump to the JavaScript source code in the **Debugger** panel."},"LastModifiedTime":"2/9/2024","Slug":"inspect-custom-element"},{"Name":"Inspect devtools","Description":"Can I inspect the browser's developer tool?","Category":"Other","Newsletter":"tips-tricks-34","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1604580723549151233","Notes":"1. Inside devtools, press `Cmd+Shift+I `or `Ctrl+Shift+I` to inspect the devtools panel itself using new instance of devtools.\n2. Important to note, you can keep using this shortcut to inspecting new instance of devtools recursively.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1670234069/inspect-devtools-chrome_zzawbc.mp4"},"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1604582373890396162","Notes":"1. Open Devtools **Settings** (`F1`) > Under **Advanced Settings**, enable \"Enable browser ... toolboxes\" and \"Enable remote debugging\".\n2. Open Firefox Menu (via hamburger icon) > More tools > Browser Toolbox. You’ll be able to inspect the browser’s chrome windows and see, and be able to debug, all the JavaScript files loaded by the browser itself and by any add-ons that are running.\n","References":"1. Browser Toolbox - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html)\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1671371544/inspect-devtools-firefox_yrpkig.mp4"},"Edge":{"Notes":"1. Inside devtools, press `Cmd+Shift+I `or `Ctrl+Shift+I` to inspect the devtools panel itself using new instance of devtools.\n2. Important to note, you can keep using this shortcut to inspecting new instance of devtools recursively.\n","Share":"https://twitter.com/CanIDevTools/status/1604580723549151233","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1671373792/inspect-devtools-edge_itdw2p.mp4"},"LastModifiedTime":"2/9/2024","Slug":"inspect-devtools"},{"Name":"Inspect DNS over HTTPS","Description":"Can I inspect the network requests that were resolved with DoH (DNS over HTTPS)?","Category":"Network","Authors":["@pankajparashar"],"Firefox":{"Share":"https://twitter.com/CanIDevTools/status/1729521446614077739","Version":"116","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/inspect-dns-over-https-firefox.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/inspect-dns-over-https-firefox.mp4","Notes":["1. In the **Network** panel, open the request to see the details in the side pane. In the **Headers** tab, verify that the **DNS Resolution** property has the value **DNS over HTTPS**."],"References":["1. Networking, [Firefox 116 DevTools Newsletter](https://fxdx.dev/firefox-devtools-newsletter-116/)"]},"LastModifiedTime":"2/9/2024","Slug":"inspect-dns-over-https"},{"Name":"Inspect fetch priority","Description":"Can I inspect the fetchpriority applied to the resources?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. In the **Network** panel, enable **Big request rows** from the network **Settings**. Right click on the any of the column headers, and select **Priority** from the menu.","2. This will add a new column in the **Network** table indicating the `fetchpriority` for each resource with values like `Low|High|Lowest|Highest`.\n"],"References":["1. Changes in Fetch priority for network events, [Chrome Developers Blog](https://developer.chrome.com/blog/new-in-devtools-117/#performance).","2. Optimizing resource loading with the Fetch Priority API, [Web.dev Articles](https://web.dev/articles/fetch-priority)."]},"Firefox":{"Notes":["1. In the **Network** panel, right click on the any of the column headers, and select **Priority** from the menu. This will add a new column in the **Network** table indicating the `fetchpriority` for each resource."]},"Edge":{"Notes":["1. In the **Network** panel, enable **Big request rows** from the network **Settings**. Right click on the any of the column headers, and select **Priority** from the menu.","2. This will add a new column in the **Network** table indicating the `fetchpriority` for each resource with values like `Low|High|Lowest|Highest`.\n"]},"Safari":{"Notes":["1. In the **Network** panel, right click on the any of the column headers, and select **Priority** from the menu. This will add a new column in the **Network** table indicating the `fetchpriority` for each resource."]},"LastModifiedTime":"2/9/2024","Slug":"inspect-fetch-priority"},{"Name":"Inspect Font properties","Description":"Can I inspect and edit various CSS font properties like, font-size, line-height etc?","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Notes":["1. Open **Settings** (`F1` or `Shift+?`) > Experiments > Check the \"Enable the new Font Editor tool within the Styles pane\" box > Reload.","2. In the **Styles** pane, click the \"AA\" icon in the bottom right of the selector box to open the **Font Editor** tool which allows you to tweak various font properties.\n"]},"Firefox":{"Notes":["1. Inspect the element using font properties > Navigate to the **Fonts** pane in the sidebar > Use the editor tool to tweak the various font properties.\n"]},"Edge":{"Notes":["1. Open **Settings** (`F1` or `Shift+?`) > Experiments > Check the \"Enable the new Font Editor tool within the Styles pane\" box > Reload.","2. In the **Styles** pane, click the \"AA\" icon in the bottom right of the selector box to open the **Font Editor** tool which allows you to tweak various font properties.\n"]},"Safari":{"Notes":["1. Inspect element > Navigate to the **Font** panel to see information about the active font for the selected DOM node in the DOM Tree, providing computed values for both basic properties (e.g. size, style, weight, etc.) and advanced properties (e.g. ligatures, alternate glyphs, variations, etc.)\n"],"References":"1. \"Font Panel in the Elements Tab\", on [Webkit Docs](https://webkit.org/web-inspector/elements-tab/#font-panel)."},"LastModifiedTime":"2/9/2024","Slug":"inspect-font-properties"},{"Name":"Inspect Local storage","Description":"Can I inspect the localstorage of a website?","Category":"Storage","Authors":["@pankajparashar"],"LastModifiedTime":"2/9/2024","Slug":"inspect-localstorage"},{"Name":"Inspect popup overlays","Description":"Can I inspect the popup overlay elements like the Dropdown lists, menus, etc.,","Category":"CSS","Authors":["@pankajparashar"],"Chrome":{"Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/inspect-popup-overlays-chrome.png","Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/inspect-popup-overlays-chrome.mp4","Share":"https://twitter.com/CanIDevTools/status/1723756605685256606","Notes":["1. Open the **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Rendering\" to open the **Rendering** drawer.","2. Scroll down and select **Emulate a focused page** option to inspect the popup element in DevTools."],"References":["1. Emulate a focused page, [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/rendering/apply-effects/#emulate-a-focused-page)."]},"Edge":{"Notes":["1. Open the **Command Menu** (`Cmd+Shift+P` or `Ctrl+Shift+P`) > Run \"Show Rendering\" to open the **Rendering** drawer.","2. Scroll down and select **Emulate a focused page** option to inspect the popup element in DevTools."]},"LastModifiedTime":"2/9/2024","Slug":"inspect-popup-overlays"},{"Name":"Inspect requests","Description":"Can I inspect Network requests?","Category":"Network","Authors":["@pankajparashar"],"Chrome":{"Notes":"1. Open devtools > Click on the Network panel (This will show a section containing table of network requests).\n"},"Firefox":{"Notes":"1. Open devtools > Click on the Network panel (This will show a section containing table of network requests).\n"},"Edge":{"Notes":"1. Open devtools > Click on the Network panel (This will show a section containing table of network requests).\n"},"Safari":{"Notes":"1. Open devtools > Click on the Network panel (This will show a section containing table of network requests).\n"},"LastModifiedTime":"2/9/2024","Slug":"inspect-requests"},{"Name":"Inspect @scope rules","Description":"Can I inspect the CSS @scope at-rules and the scoping root element?","Category":"CSS","Authors":["@pankajparashar"],"Polypane":{"Video":"https://res.cloudinary.com/canidevtools/video/upload/l_watermark,w_200,o_5/inspect-scope-at-rules-polypane.mp4","Image":"https://res.cloudinary.com/canidevtools/image/upload/l_watermark,w_200,o_5/inspect-scope-at-rules-polypane.png","Version":"16","Share":"https://twitter.com/CanIDevTools/status/1721299138283716885","Notes":["1. Inspect the element that has `@scope` rules applied. The ruleset will be visible in the **Style** pane under the `@scope` block declaration.","2. Hover over the **scoping root element** to highlight the element on the page. Click the element to directly jump to the node in the **Element** tree.\n"],"References":["1. \"@scope support in the elements panel\", [Polypane blog](https://polypane.app/blog/polypane-16-workflow-improvements-scoped-styles-and-chromium-118/)."]},"Chrome":{"Version":"118","Notes":["1. Inspect the element that has `@scope` rules applied. The ruleset will be visible in the **Styles** pane under the `@scope` block declaration.\n"],"References":["1. \"Limit the reach of your selectors with the CSS @scope at-rule\", [Chrome Developer articles](https://developer.chrome.com/articles/at-scope/).","2. \"CSS @scope rule\", [New in Chrome 118](https://developer.chrome.com/blog/new-in-chrome-118/#css-scope)."]},"Edge":{"Version":"118","Notes":["1. Inspect the element that has `@scope` rules applied. The ruleset will be visible in the **Styles** pane under the `@scope` block declaration.\n"]},"LastModifiedTime":"2/9/2024","Slug":"inspect-scope-at-rules"},{"Name":"Inspect CSS scroll snap","Description":"Can I inspect & visualize CSS scroll snap layout?","Category":"CSS","Newsletter":"tips-tricks-25","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1580409354209009664","References":"1. \"Visualize CSS scroll-snap\", on Chrome DevTools [blog](https://developer.chrome.com/blog/new-in-devtools-91/#css-croll-snap) \n","Notes":"1. When an HTML element on your page (e.g. this [demo](https://mathiasbynens.github.io/css-dbg-stories/css-scroll-snap.html) page) has `scroll-snap-type` applied to it, you can see a `scroll-snap` badge next to it in the **Elements** panel. Click the badge to toggle the display of a scroll-snap overlay on the page.\n2. In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.\n","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665629478/inspect-scroll-snap-chrome_viut9g.mp4"},"Edge":{"Notes":"1. When an HTML element on your page (e.g. this [demo](https://mathiasbynens.github.io/css-dbg-stories/css-scroll-snap.html) page) has `scroll-snap-type` applied to it, you can see a `scroll-snap` badge next to it in the Elements panel. Click the badge to toggle the display of a scroll-snap overlay on the page.\n2. In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.\n\n","Share":"https://twitter.com/CanIDevTools/status/1580409354209009664","Video":"https://res.cloudinary.com/canidevtools/video/upload/v1665629994/inspect-scroll-snap-edge_nmnbbb.mp4"},"LastModifiedTime":"2/9/2024","Slug":"inspect-scroll-snap"},{"Name":"Inspect Session storage","Description":"Can I inspect the session storage of a website?","Category":"Storage","Authors":["@pankajparashar"],"Firefox":{"Notes":"- In the **Storage** panel, expand **Session Storage** from the left sidebar. Select the host to view all the items stored in the session in a key-value format. Double-click the item to edit, **+** to add a new item and right-click > **Delete** to remove the item from the session storage. ","References":"1. Local Storage && Session Storage, [Firefox Source Docs](https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/local_storage_session_storage/index.html)."},"Chrome":{"Notes":"- In the **Application** panel, under the **Storage** section, expand **Session storage** from the left sidebar. Select the origin to view all the items stored in the session in a key-value format. Double-click the item to edit, right-click > **Delete** to remove the item from the session storage. "},"Edge":{"Notes":"- In the **Application** panel, under the **Storage** section, expand **Session storage** from the left sidebar. Select the origin to view all the items stored in the session in a key-value format. Double-click the item to edit, right-click > **Delete** to remove the item from the session storage. ","References":"1. View and edit session storage, [Micrsofot Edge DevTools Guide](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/storage/sessionstorage)."},"Safari":{"Notes":"- In the **Storage** panel, under **All Storage** select **Session Storage** to view all the items stored in the session in a table. Double-click to edit the item, or click the trash icon to **Clear Session Storage**."},"LastModifiedTime":"2/9/2024","Slug":"inspect-sessionstorage"},{"Name":"Inspect Shadow DOM","Description":"Can I inspect the shadow DOM of an element for a user-agent?","Category":"Elements","Authors":["@pankajparashar"],"Newsletter":"tips-and-tricks-48","Chrome":{"Notes":"- Open **Settings** (`F1` or `Shift+?`) > Under the **Elements** section, enable **Show user agent shadow DOM**.\n- In the **Elements** panel, expand the node to inspect the shadow DOM available under **shadow-root (user-agent)**."},"Edge":{"Notes":"- Open **Settings** (`F1` or `Shift+?`) > Under the **Elements** section, enable **Show user agent shadow DOM**.\n- In the **Elements** panel, expand the node to inspect the shadow DOM available under **shadow-root (user-agent)**."},"Safari":{"Notes":"- In the **Elements** panel, expand the element to reveal the **Shadow root (user-agent)** node, and its children, that were generated by the browser for this element."},"LastModifiedTime":"2/9/2024","Slug":"inspect-shadow-dom"},{"Name":"Inspect top layer","Description":"Can I inspect the top layer elements like dialog, popover etc?","Category":"Elements","Newsletter":"tips-tricks-35","Authors":["@pankajparashar"],"Chrome":{"Share":"https://twitter.com/CanIDevTools/status/1619713036604026883","Notes":"1. Inspect the `