Add audio breakpoint

Can I add an audio breakpoint for debugging the source code?

Safari:

1. In Sources > Add a breakpoint by clicking the line number > Right click and select "Edit Breakpoint...".
2. Click Add Action > Select "Play Sound" to hear a beep sound each time the statement is executed.

Add class to element

Can I add an existing CSS class to an HTML element?

Chrome:

1. Inspect the element > Look for ".cls" button in the Styles pane next to the Filter field.
2. Click the button and search for the existing class names to add to the element.

Firefox:

1. Inspect the element > Look for ".cls" button in the styles section next to the Filter Styles field.
2. Click the button and search for the existing class names to add to the element.

Edge:

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.

Safari:

1. Inspect the element > Look for "Classes" button in bottom row of the styles section next to the Filter field.
2. Click the button and search for the existing class names to add to the element.

Polypane:

1. Inspect the element > Open the "attributes" tab
2. Add a new class into the class field, known classes from the page and CSS will automatically be suggested.
3. If there is no class attribute yet, add it as a new attribute and known classes will also be automatically suggested.

Add conditional breakpoint

Can I set a conditional breakpoint for debugging?

Chrome:

1. In Sources, right click the line number and select "Add a conditional breakpoint..."
2. Input the conditional expression on which the execution should pause, and press Enter.

Firefox:

1. In Debugger, right click the line number and select "Add condition"
2. Input the conditional expression on which the execution should pause, and press Enter.

Edge:

1. In the Sources panel, right click on the line number and select Add conditional breakpoint.... Enter the conditional expression and press Enter.

Add custom device

Can I add a custom device for a responsive design mode?

Chrome:

1. Open Settings (F1 or Shift+?) > Devices > Click "Add custom device...".
2. Enter the "Device Name" and other details associated with the device. Click the "Add" button.

Firefox:

1. Open Responsive Design Mode (Cmd+Opt+M or Ctrl+Shift+M) > Select "Edit List..." from the list of devices.
2. In Device Settings, click "Add Custom Device..." > Enter the Name and other related details > Click "Save".

Edge:

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.

Polypane:

1. Click the "+" button in the workspace, double-click anywhere in the free space, or press Ctrl/Cmd+N
2. Once the new device is added you can resize it manually and set the device and emulation options with the Emulation settings.

Add columns for response headers

Can I add custom header columns to the Network requests table?

Chrome:

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.

Edge:

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.

Add inline styles

Can I add inline styles to an HTML element?

Chrome:

1. Inspect element > In the Styles pane, click "element.style" to input the inline style.

Firefox:

1. Inspect element > In the Rules pane, click "element​" to input the inline style.

Edge:

1. Select the element in the DOM tree > In the Styles pane, click element.style and add the property: value declaration.

Safari:

1. Inspect element > In the Styles pane, click inside "Style Attribute​" braces to input the inline style.

Polypane:

1. Inspect element > In the Styles pane, click "property" under "element.style" to input the inline style.

Add logpoint

Can I add log points to source code for debugging?

Chrome:

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.

Firefox:

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.

Edge:

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.

Autocomplete styles using values

Can I autocomplete style declaration just using values?

Chrome:

1. Inspect an element > Navigate to the styles section (next to the DOM tree).
2. Add new styles by directly entering the values like "bold", "italic" etc., and the devtools will automatically suggest the corresponding <property>: <value> pair for the given input.

Edge:

1. Inspect an element > Navigate to the styles section (next to the DOM tree).
2. Add new styles by directly entering the values like "bold", "italic" etc., and the devtools will automatically suggest the corresponding <property>: <value> pair for the given input.

Polypane:

1. Inspect an element > Navigate to the styles tab
2. 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.

Block request domain

Can I block all network requests of a domain?

Chrome:

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.

Firefox:

1. In the Network panel, click the "Request Blocking" icon in the toolbar to open the Blocking pane in the left sidebar.
2. Add the domain name in the input box to block all the matching requests for that domain.

Edge:

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.

Safari:

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.
2. 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.

Block request pattern

Can I block all network request matching a URL pattern?

Chrome:

1. Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P) > Run "Show Network request blocking". This will open the Network request blocking drawer.
2. 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.

Firefox:

1. In the Network panel, click the Request Blocking icon in the toolbar, to open the Blocking pane in the left sidebar.
2. Input the URL pattern and press Enter. Reload the page to see the changes take effect.

Edge:

• 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.
• Click the Add pattern button and add the URL pattern > Add. Reload the page for the changes to take effect.
• 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.
• Hover on the URL pattern to either remove or edit the pattern. Click the Remove all patterns button to remove all the URL patterns.

Safari:

1. In the Sources panel, Add a new Local Override by clicking the "+" (Create Resource) button.
2. 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.

Block request URL

Can I block a specific network request by URL?

Chrome:

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.

Firefox:

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.

Edge:

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.

Safari:

1. In the Network tab, right click on the request Name, and select "Block Request URL".
2. In the Sources tab, under the Local Overrides section in the left sidebar, you can manage the blocked request.

Capture full page screenshot

Can I take full page screenshot of a website?

Chrome:

1. Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P) & Run > "Capture full size screenshot" and press Enter.
2. This will save a PNG image with url as the filename in the Downloads directory.

Firefox:

1. In the Inspector panel, right click on the html node > select "Screenshot Node".
2. This will save a PNG image with current date time as the filename in the Downloads directory.

Edge:

1. Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P) & Run > "Capture full size screenshot" and press Enter.
2. This will save a PNG image with url as the filename in the Downloads directory.

Safari:

1. In the Elements panel, right click on the html node and select "Capture Screenshot".
2. This will save a PNG image with current date time as the filename in the Downloads directory.

Polypane:

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.

Capture HD screenshot

Can I capture a high definition screenshot of the page?

Chrome:

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.

Firefox:

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.

Edge:

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.

Capture node screenshot

Can I take a screenshot of the DOM node?

Chrome:

1. In the Elements panel, right click on the node and select "Capture node screenshot".
2. It retains visible background colour of elements with no background colour applied.

Firefox:

1. In the Inspector panel, right click on the node, and select "Screenshot Node".
2. Firefox does not retain background transparency of the element in the screenshot.

Edge:

• In the Elements panel, right click on the node and select "Capture node screenshot".
• It retains visible background colour of the elements with no background colour applied."

Safari:

1. In the Elements panel, right click on the node in the DOM tree and click on "Capture Screenshot".
2. Safari preserves the transparency for the elements with no applied background colour.

Polypane:

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.

Capture node stacktrace

Can I capture node creation stack trace?

Chrome:

1. Enable "Capture node creation stacks" in Settings (F1) > Experiments.
2. 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.

Edge:

1. Enable "Capture node creation stacks" in Settings (F1) > Experiments.
2. 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.

Capture screenshot via console

Can I take screenshot of a web page from the console?

Firefox:

1. Firefox has a built-in helper function :screenshot to capture screenshot of the current page from the console.
2. For example:

    :screenshot
    :screenshot --fullpage
    :screenshot --selector .css-selector

Safari:

1. In Safari, you can capture screenshot of the viewport from the Console using console.screenshot().
2. Alternatively, pass the target node to the function to capture screenshot of a specific node.

Capture viewport screenshot

Can I take a screenshot of the viewport?

Chrome:

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.

Firefox:

1. In Console, use the built-in helper function :screenshot to capture screenshot of the current page.

Edge:

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.

Safari:

1. In Console, use console.screenshot() to capture the screenshot of the viewport.

Polypane:

1. Click the "Camera" icon above the pane you want to screenshot and select "Viewport". This will open the screenshot in the screenshot editor.

Change color format

Can I change authored color format to other formats like hsl, hwb etc?

Chrome:

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.
2. Alternatively, you can change the color format in the color picker using the up-down arrow keys.

Firefox:

1. In the Rules pane, hold the Shift key and click on any color preview to change the color format.
2. It is also available as an optional default.

Edge:

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.
2. Alternatively, you can change the color format in the color picker using the up-down arrow keys.

Safari:

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.

Change devtools language

Can I change the language of developer tools?

Chrome:

1. Open Settings (F1 or Shift+?) > Preferences > Under Languages, select the language from the dropdown > Reload DevTools.
2. Alternatively, Run Command (Cmd+Shift+P or Ctrl+Shift+P) > Input the language > select the language labelled "Appearance" > Reload DevTools.

Edge:

1. Open Settings (F1 or Shift+?) > Preferences > Under Languages, select the language from the dropdown > Reload DevTools.
2. Alternatively, Run Command (Cmd+Shift+P or Ctrl+Shift+P) > Input the language > select the language labelled "Appearance" > Reload DevTools.

Clear command history

Can I clear the command history of the console?

Chrome: In the Console tab, right click anywhere > select "Clear console history" to remove all the commands from its history.

Edge: In the Console tab, right click anywhere > select "Clear console history" to remove all the commands from its history.

Clear console

Can I clear the previous commands in the console?

Chrome:

• Click the Clear console icon (top-left) or use the keyboard shortcut, Ctrl+L or Cmd+K.
• Alternatively, you can run console.clear() in the console to clear the previous commands.

Firefox:

• Click the Clear the Web Console output icon in the toolbar or use Ctrl+L or Cmd+K to clear the console.
• Alternatively, you can run console.clear() in the console to clear the previous commands.

Edge:

• Click the Clear console icon (top-left) or use the keyboard shortcut, Ctrl+L or Cmd+K.
• Alternatively, you can run console.clear() in the console to clear the previous commands.

Safari:

• Click the Clear log button (trash icon) or use Cmd+K or Shift+L to clear the console.
• Alternatively, you can run console.clear() in the console to clear the previous commands.

Polypane:

• Click the Clear console icon (top-left) or use the keyboard shortcut, Ctrl+L or Cmd+K.
• Alternatively, you can run console.clear() in the console to clear the previous commands.

Clear network log

Can I clear all the requests in the network log?

Chrome:

• 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.

Firefox:

• In the Network panel, click the Clear button (trash icon) to clear all the network requests.

Edge:

• 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.

Safari:

• In the Network panel, click the Clear Network Items button or press Cmd+K to clear all the network requests.

Copy cURL request

Can I copy a network request as cURL?

Chrome: In the Network tab, right click on the request, Copy > Copy as cURL will copy the request with cURL command to the clipboard.

Firefox:

1. In the Network tab, right click on the request, Copy > Copy as cURL will copy the request with cURL command to the clipboard.

Edge: In the Network tab, right click on the request, Copy > Copy as cURL will copy the request with cURL command to the clipboard.

Safari: In the Network tab, right click on the request, "Copy as cURL" will copy the request with cURL command to the clipboard.

Copy as Fetch

Can I copy the request as window.fetch()?

Chrome:

1. In the Network panel, right click on the network request > Copy > Copy as fetch.

Copy as PowerShell

Can I copy the request as a powershell script?

Chrome:

1. In the Network panel, right click on the network request > Copy > Copy as PowerShell.

Copy as CSS selector

Can I copy a node's path as a CSS selector?

Chrome:

1. In the Elements tab, right click on the element in the DOM tree > Copy > Copy selector.

Firefox:

1. In the Inspector tab, right click on the element in the DOM tree > Copy > CSS Selector.

Edge:

1. In the Elements tab, right click on the element in the DOM tree > Copy > Copy selector.

Safari: In the Elements tab, right click on the element in the DOM tree > Copy > Selector Path.

Polypane:

1. In the Elements tab, right click on the element in the DOM tree > Copy > Copy selector.

Copy image as data URI

Can I copy an image as a data URI?

Chrome:

1. In the Network panel, click the image request to open a side panel containing the request details.
2. Open the Preview tab to preview the image and right click on the image > Copy image as data URI

Edge:

1. In the Network panel, click the image request to open a side panel containing the request details.
2. Open the Preview tab to preview the image and right click on the image > Copy image as data URI

Copy Img as background-image

Can I copy the image url as a background-image property to directly use in CSS?

Polypane:

• Right-click on the image, select Copy > Copy as background-image.

Copy as JS expression

Can I copy a node's path to be used as a JavaScript expression?

Chrome:

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.

Edge:

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.

Copy node as HTML

Can I copy a node as HTML?

Chrome:

1. In the Elements panel, right click on the node > Copy > Copy outerHTML.

Copy node styles

Can I copy the styles applied to an element?

Chrome:

1. In the Elements panel, right click on the node > Copy > Copy styles.

Polypane:

1. In the Elements panel, go to the "Computed" tab and click the "Copy styles" button.

Copy object

Can I copy an object from console?

Chrome:

1. copy(object) copies a string representation of the specified object to the clipboard.

Firefox:

1. copy(object) copies a string representation of the specified object to the clipboard.

Edge:

1. copy(object) copies a string representation of the specified object to the clipboard.

Safari:

1. copy(object) copies a string representation of the specified object to the clipboard.

Copy response text

Can I copy the response object as text?

Chrome:

1. In the Network panel, right click on the network request > Copy > Copy response.

Copy styles as JS

Can I copy style declarations as JavaScript object?

Chrome:

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.

Edge:

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.

Deactivate breakpoints

Can I temporarily deactivate breakpoints while debugging source code?

Chrome:

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.

Edge:

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.

Debug attr change

Can I set breakpoint and debug attr changes of a node?

Chrome:

1. Inspect element > Right click on the node in the DOM tree.
2. Select "Break on" > "attribute modifications". Reload the page.

Firefox:

1. Inspect element > Right click on the node in the DOM tree.
2. Select "Break on..." > "Attribute Modification". Reload the page.

Edge:

1. Inspect element > Right click on the node in the DOM tree > Select "Break on" > Select "attribute modifications".
2. Reload the page.

Safari:

1. Inspect element > Right click on the DOM node > Select "Break on" > Select "Attribute Modified".
2. Reload the page.

Debug Event Listeners

Can I debug event listeners by setting a breakpoint on all or specific events?

Chrome:

1. In the Sources tab, expand the Event Listeners Breakpoints section to see the list of event categories.
2. Expand a category and enable the checkbox for the event that needs to be debugged.

Firefox:

1. Open devtools > Debugger > Find and expand the Event Listener Breakpoints section in the right hand column.
2. 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.

Edge:

1. In the Sources tab, expand the Event Listeners Breakpoints section to see the list of event categories.
2. Expand a category and enable the checkbox for the event that needs to be debugged.

Safari:

1. In the Sources tab, click the "+" button from the left sidebar in the Breakpoints section > Select "Events Breakpoint".
2. Enter the name of the event in the popup form to apply a breakpoint for a specific event.
3. Alternatively, you can set breakpoint on all the events by selecting "All Events" after clicking the "+" button.

Debug JavaScript

Can I debug JavaScript using devtools?

Chrome:

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.
2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.
3. Use the toolbar on the right sidebar to step-in/step-out, watch expressions, local vars while debugging through the code.
4. Alternatively, you can also add the debugger; statement in the code to pause execution of the code at that line.

Firefox:

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.
2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.
3. Use the toolbar on the right sidebar to step-in/step-out, watch expressions, local vars while debugging through the code.
4. Alternatively, you can also add the debugger; statement in the code to pause execution of the code at that line.

Edge:

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.
2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.
3. Use the toolbar on the right sidebar to step-in/step-out, watch expressions, local vars while debugging through the code.
4. Alternatively, you can also add the debugger; statement in the code to pause execution of the code at that line.

Safari:

1. In the Sources tab, open the .js file from the the left sidebar. Set a breakpoint by clicking on the line number.
2. Perform the action necessary to trigger that line of code, which will pause the execution at the breakpoint.
3. Once activated, use the toolbar on the left sidebar (top) to step-in/step-out, watch expressions, local vars while debugging through the code.
4. Alternatively, you can also add the debugger; statement in the code to pause execution of the code at that line.

Debug node removal

Can I debug by setting a breakpoint when the node is removed from the DOM?

Chrome:

1. Inspect element > Right click on the node in the DOM tree.
2. Select "Break on" > "node removal". Reload the page.

Debug remote device pages

Can I debug websites on remote devices?

Safari:

1. In the Menu bar, select Develop > Select the device > Select the page to open the Web Inspector for that URL.

Debug scroll overflow

Can I debug container with scrollbars to identify the element causing it?

Firefox:

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:

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.

Debug speculation rules

Can I debug speculation rules for prefetch/prerender next page navigations?

Chrome:

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.

Debug subtree change

Can I debug by setting a breakpoint when the subtree of the node changes?

Chrome:

1. Inspect element > Right click on the node in the DOM tree.
2. Select "Break on" > "subtree modifications". Reload the page.

Debug XHR & Fetch calls

Can I debug XHR or fetch calls by setting a breakpoint for a specific or all requests??

Chrome:

1. Click the Sources tab.
2. Expand the XHR Breakpoints pane.
3. Click Add breakpoint.
4. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.
5. Press Enter to confirm.

Firefox:

1. Open devtools > Debugger.
2. 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

Edge:

1. Click the Sources tab.
2. Expand the XHR Breakpoints pane.
3. Click Add breakpoint.
4. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.
5. Press Enter to confirm.

Safari:

1. In the Sources tab, click the "+" button in the left sidebar within the Breakpoints section > Select "URL Breakpoint..."
2. Use the popup form to apply breakpoint on specific keywords and matching conditions.
3. Alternatively, you can set breakpoint on all the requests by selecting "All Requests" after clicking the "+" button.

Delete node

Can I delete a node from the DOM tree?

Chrome:

1. In the Elements panel, right click on the node and select "Delete element".

Detect third-party cookies

Can I detect if a website uses third-party cookies?

Chrome:

1. In the Application panel, under the Storage section, expand Cookies. All the entries with third-party domains are the ones using cookies.

Edge:

1. In the Application panel, under the Storage section, expand Cookies. All the entries with third-party domains are the ones using cookies.

Detect memory leaks

Can I detect memory leaks in my web app using devtools?

Chrome:

1. Open devtools using Cmd+Opt+I (on Mac) or Ctrl+Shift+I (on Windows/Linux) > Memory.
2. 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.

Firefox:

1. In the Memory tab, use the camera icon (top-left) titled, "Take snapshot" to capture the heap stack and establish a baseline.
2. Perform any operation on the app that is suspected to leak memory, and then take another snapshot.
3. 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.

Edge:

1. Open devtools using Cmd+Opt+I (on Mac) or Ctrl+Shift+I (on Windows/Linux) > Memory.
2. 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.

Safari:

1. Open the Timelines tab. In the Events view, enable "JavaScript Allocations" panel in the left sidebar, by clicking the Edit button.
2. Reload the page to start recording the timeline. Perform actions that are expected to be memory neutral.
3. Take snapshot using the Camera icon after each repetition. Use the Compare button to compare the snapshots for any visible memory spikes.

Detect missing meta tags

Can I detect the meta tags missing from the HTML?

Polypane:

• 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.

Disable cache

Can I disable cache for the network requests?

Chrome:

1. Open Network panel > Look for "Disable cache" in the toolbar at the top.

Firefox:

1. Open Network panel > Look for "Disable Cache" in the toolbar at the top.

Edge:

1. Open Network panel > Look for "Disable Cache" in the toolbar at the top.

Safari:

1. Open Network panel > Look for the icon in the top right of the toolbar with tooltip "Ignore the resource cache when loading resources".

Polypane:

1. In the Edit menu, select "Disable cache" and choose to disable it just for the current session, or persistently.

Disable debugger statement

Can I prevent the debugger from pausing at the debugger statement?

Firefox:

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.

Disable JavaScript

Can I disable JavaScript on a web page?

Chrome:

1. Open devtools. Press Shift+Cmd+P on Mac or Ctrl+Shit+P on Windows/Linux/Chrome OS to open the Command Menu.
2. Search for "Disable JavaScript" and press Enter to execute the command.
3. 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.

Firefox:

1. Navigate to about:config in the address bar. Click on "Accept the Risk and Continue" while proceeding with caution.
2. Search for "javascript.enabled" in the preference textbox.
3. Toggle the boolean value to False, using the ⇋ button.

Edge:

1. Open devtools. Press Shift+Cmd+P on Mac or Ctrl+Shit+P on Windows/Linux/Chrome OS to open the Command Menu.
2. Search for "Disable JavaScript" and press Enter to execute the command.
3. 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.

Safari:

1. In the menu bar, navigate to Safari > Preferences.
2. Click on the Security tab. Under the Web Content section, uncheck the "Enable JavaScript" checkbox.

Polypane:

1. Open the "debug tools" of an individual pane.
2. under "Disable features", select "Disable JS".

Disable local fonts

Can I disable local fonts to validate @font-face rules?

Chrome:

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.

Edge:

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.

Display FPS on page

Can I display the current frames per second (FPS) of the page?

Chrome:

1. Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P) > Run "Show frames per second (FPS) meter".

Edge:

1. Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P) > Run "Show frames per second (FPS) meter".

Drag & Drop element

Can I drag & drop nodes anywhere inside the DOM tree?

Chrome:

1. Inspect element or Press Cmd+Opt+I (on Mac) or Ctrl+Shift+I (on Windows/Linux).
2. Select the node and drag-n-drop to a different part of the DOM tree.

Firefox:

1. Right click > Inspect element or Press Cmd+Opt+I (on Mac) or Ctrl+Shift+I (on Windows/Linux).
2. Select the node and drag-n-drop to a different part of the DOM tree.

Edge:

1. Right click > Inspect element or Press Cmd+Opt+I (on Mac) or Ctrl+Shift+I (on Windows/Linux).
2. Select the node and drag-n-drop to a different part of the DOM tree.

Safari:

1. Select any DOM node from the DOM tree, drag and drop anywhere in the tree to place the element.

Duplicate node

Can I duplicate a node in the DOM tree?

Chrome:

1. In the Elements panel, right click on the node and select "Duplicate element".

Edit node as HTML

Can I edit the node as HTML?

Chrome:

1. In the Elements panel, right click on the node and select "Edit as HTML".

Edit and resend requests

Can I edit and resend network requests?

Firefox:

• In the Network panel, right click on the request and select Edit and Resend.
• This will open a New Request panel, where you can edit the method, URL, query string, headers and the body of the request.
• Click Send to dispatch the request.

Edge:

• In the Network panel, right click on the request and select Edit and Resend.
• This will open the Network Console panel where you can edit the method, URL, query string, headers and the body of the request.
• Click Send to dispatch the request.

Emulate blurred vision

Can I emulate blurred vision on a page?

Chrome:

1. Run Command (Cmd+Shift+P or Ctrl+Shift+P) > "Show Rendering" (Drawer).
2. Navigate to the Emulate vision deficiencies section and choose "Blurred vision".

Edge:

1. Run Command (Cmd+Shift+P or Ctrl+Shift+P) > "Show Rendering" (Drawer).
2. Navigate to the Emulate vision deficiencies section and choose "Blurred vision".