• Open Settings (F1 or Shift+?) > Under the Elements section, enable Show user agent shadow DOM.

• In the Elements panel, expand the node to inspect the shadow DOM available under shadow-root (user-agent).

  

Safari

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

  

• In the Performance panel, open Settings using the gear icon and select the "CPU: No throttling" dropdown to choose "4x/6x slowdown."

References:

1. Simulate a mobile CPU, Microsoft Edge DevTools Guide.

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

  

Firefox

• In the Network panel, click the Clear button (trash icon) 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

  

  .

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.

   

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.

Safari

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

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.

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.

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

3. All the ignored scripts will be available under Custom exclusion rules section in Ignore List.

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

   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.

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.

1. In Sources, right click on the line number that throws an exception and select "Never pause here".

Firefox

1. In Debugger, right click on the line number that throws an exception and select "Never pause here".

Safari

1. In Sources, right click on the line that has a breakpoint, select "Edit Breakpoint..." > Enter the condition as false.

1. In the Performance panel, Enable "advanced rendering instrumentation (slow)" in Settings.

2. Click Record, and perform the operation on the page that affects rendering.

3. In the recorded profile, identify a long style recalculation and select it in the waterfall view (“Main” section).

4. In the bottom tab bar, click Selector Stats. Sort the selectors based on Elapsed Time, Match Attempts etc., to identify expensive selectors.

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.

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.

1. Firefox links the element referencing the ID attribute to its target element in the same DOM, highlighted with an underline.

2. Use Cmd+Click or Ctrl+Click to jump to the target element with the identifier.

1. Inspect the <dialog> element. Scroll down to the end of the DOM tree to the #top-layer section, to visualise the currently active dialog elements.

2. In the case of multiple elements, they stack on top of each other, and the last one is on top.

1. Inside devtools, press Cmd+Shift+I or Ctrl+Shift+I to inspect the devtools panel itself using new instance of devtools.

2. Important to note, you can keep using this shortcut to inspecting new instance of devtools recursively.

Firefox

1. Open Devtools Settings (F1) > Under Advanced Settings, enable "Enable browser ... toolboxes" and "Enable remote debugging".

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

1. Open Command Menu (Cmd+Shift+P or Ctrl+Shit+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.

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.

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.

Safari

1. In Sources, click the line number to Add Breakpoint > Right click on the line number and select "Edit Breakpoint...".

2. Input the conditional expression on which the execution should pause, and press Enter.

1. In the Rules pane, apply changes to the CSS declarations, and then click on the Changes pane to see the diff. Click "Copy All Changes" button to copy the modified styles, with previous declaration automatically commented.

Safari

1. In the Styles pane, apply changes to the CSS declarations, and then click on the Changes pane to see the diff.

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.

Firefox

1. In the Network panel, click the Gear icon to open the Network Settings.

2. Click "Save All As HAR" to export the HAR file and "Import HAR File" to import the HAR file.

Safari

1. In the Network panel, use the Import & Export buttons to import and export HAR file respectively.

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.

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.