Developer Tools
6 power-user tricks for developer tools
Power-User Tips
Curated tricks for Chrome, Edge, Brave, Vivaldi & Opera GX.
Hidden Features
Discover experimental flags, DevTools hacks, and productivity boosters.
Console Mastery
The `copy()` Console Utility
Move large objects or JSON from the console to your system clipboard instantly.
Use `copy(variable)` in the console.
All ChromiumConsole `table()` for Data Visualization
Render arrays of objects as a clean, sortable table instead of a nested tree.
Pass an array to the `console.table()` function.
All ChromiumCSS Selector Reference `$()` & `$()`
Fast shorthand for `querySelector` and `querySelectorAll` directly in the console.
Use the jQuery-style shorthand in the console.
All Chromium
Inspection & Analysis
3D Visual Stack (Z-Index) View
Debug 'hide-and-seek' UI issues by visualizing the DOM stacking in a 3D space.
Open the '3D View' panel in DevTools.
EdgeVisual CSS Coverage
Identify exactly which lines of CSS aren't being used on the current page load.
Record a session in the Coverage panel.
ChromeEdgeBravePersistent Edits with Local Overrides
Save CSS and JS changes you make in DevTools permanently to your desk.
Select a local folder in the Overrides sub-tab of Sources.
ChromeEdgeBrave