Chrome DevTools Snippets Tutorial: Automate Your Browser Workflow

Chrome DevTools Snippets are small JavaScript programs you can write, save, and execute directly within your browser’s developer tools. They bridge the gap between console one-liners and full browser extensions, giving developers a powerful way to automate repetitive tasks, debug complex issues, and prototype ideas without leaving Chrome.

If you find yourself typing the same console commands repeatedly or manually manipulating the DOM during testing, Snippets will transform your workflow.

Accessing the Snippets Panel

Open Chrome DevTools using F12 or Cmd+Opt+I (Mac) / Ctrl+Shift+I (Windows). Navigate to the Sources tab, then look for the Snippets section in the left sidebar. If you don’t see it, click the dropdown menu (three dots) and enable “Snippets.”

The Snippets panel functions like a lightweight code editor with syntax highlighting, line numbers, and automatic saving. You can create multiple snippets, organize them into folders, and run any snippet with a keyboard shortcut.

Creating Your First Snippet

Click the + New Snippet button in the Snippets panel. Name it something descriptive—perhaps hello-snippet. Enter the following code:

function greetDeveloper(name) {
  return `Hello, ${name}! Ready to automate something?`;
}

console.log(greetDeveloper('Developer'));

To run the snippet, press Cmd+Enter (Mac) or Ctrl+Enter (Windows), or right-click the snippet name and select “Run.”

The output appears in the Console, confirming your snippet executed successfully. This basic example demonstrates the core workflow: write code, save automatically, execute on demand.

Practical Examples for Real Development

1. List All Event Listeners on an Element

Debugging event attachment becomes effortless with a snippet that retrieves all listeners:

function getEventListeners(element) {
  if (!element) {
    console.error('No element selected. Select an element in the Elements panel first.');
    return;
  }
  
  const listeners = getEventListeners(element);
  
  if (Object.keys(listeners).length === 0) {
    console.log('No event listeners found on this element.');
    return;
  }
  
  console.log('Event listeners on selected element:');
  Object.entries(listeners).forEach(([type, handlers]) => {
    console.log(`  ${type}:`, handlers.map(h => h.listener.name || 'anonymous'));
  });
}

getEventListeners($0);

This snippet uses $0, a DevTools shortcut that references the currently selected element in the Elements panel. Run it after selecting a DOM element to see all attached listeners.

2. Measure Function Execution Time

Performance profiling often requires timing specific operations:

function measureExecution(fn, label = 'Function') {
  const start = performance.now();
  const result = fn();
  const end = performance.now();
  
  console.log(`${label} took ${(end - start).toFixed(3)} ms`);
  return result;
}

// Example usage:
measureExecution(() => {
  const arr = Array.from({ length: 10000 }, (_, i) => i);
  return arr.filter(n => n % 2 === 0).reduce((a, b) => a + b, 0);
}, 'Sum of even numbers');

Wrap any function in measureExecution to get immediate timing feedback without setting up full profiling sessions.

3. Simulate Network Latency

Testing how your application handles slow connections becomes simple:

function setNetworkThrottle( latencyMs, downloadKbps, uploadKbps ) {
  const conditions = {
    download: downloadKbps,
    upload: uploadKbps,
    latency: latencyMs
  };
  
  return new Promise((resolve, reject) => {
    if (chrome && chrome.devtools && chrome.devtools.network) {
      chrome.devtools.network.onRequestFinished.addListener(request => {
        request.response.headers.forEach(header => {
          if (header.name === 'Date') {
            console.log('Network throttling active');
          }
        });
      });
    }
    
    // Use Chrome's Network Throttling API
    console.log(`Throttling: ${latencyMs}ms latency, ${downloadKbps}Kbps down, ${uploadKbps}Kbps up`);
    console.log('Note: Use the Network tab dropdown to enable throttling programmatically.');
    resolve(conditions);
  });
}

setNetworkThrottle(200, 1024, 512);

Note that programmatic throttling requires Chrome’s more advanced APIs, but this snippet documents the settings and reminds you to enable throttling through the Network panel.

4. Export LocalStorage Data

Backing up test data becomes trivial:

function exportLocalStorage() {
  const data = {};
  
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    try {
      data[key] = JSON.parse(localStorage.getItem(key));
    } catch (e) {
      data[key] = localStorage.getItem(key);
    }
  }
  
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = url;
  a.download = `localstorage-backup-${Date.now()}.json`;
  a.click();
  
  URL.revokeObjectURL(url);
  console.log('LocalStorage exported successfully');
}

exportLocalStorage();

This snippet serializes all LocalStorage entries and triggers a download, preserving your test data between sessions.

Keyboard Shortcuts That Speed Up Workflow

Master these shortcuts to navigate Snippets efficiently:

Action	Mac	Windows
Run snippet	Cmd+Enter	Ctrl+Enter
Save	Cmd+S	Ctrl+S
New snippet	Cmd+N	Ctrl+N
Close editor	Cmd+W	Ctrl+W

Additionally, you can execute any saved snippet from the Command Palette by typing “!” followed by the snippet name.

Snippets Versus Console Versus Extensions

Understanding when to use each approach prevents unnecessary complexity:

Console: Quick calculations and one-off commands. No persistence between sessions.

Snippets: Reusable scripts you edit frequently. Persist across browser sessions and support multiple files.

Extensions: Full-blown features requiring distribution, installation, and browser restarts. Overkill for personal workflow automation.

Snippets hit the sweet spot for developer productivity tools you build for yourself.

Organizing Your Snippet Library

As your collection grows, organize snippets using the folder feature in the left sidebar. Create logical groupings like “Debug,” “Testing,” or “Data Export.” Prefix snippet names with numbers to control sort order—01-debug-listener, 02-debug-cookies—ensuring your most-used tools appear at the top.

Snippets live in your browser profile, not your code repository. To share snippets with teammates, either:

Copy the snippet code and commit it to your project repository under a devtools-snippets folder
Use a Chrome extension designed for snippet synchronization
Maintain a personal Gist and import snippets as needed

Version-controlling your snippets ensures consistency across team members and preserves your automation investments.

Conclusion

Chrome DevTools Snippets unlock browser-side automation without the overhead of building extensions. Whether you’re debugging event handlers, timing performance-critical functions, or exporting test data, snippets provide a fast, persistent, and executable solution.

Start with one snippet that solves a daily annoyance. Build from there. Your browser will become a more powerful development environment with each addition.

Built by theluckystrike — More at zovo.one