Unlocking the Power of Chrome DevTools Snippets

The Snippets panel in Chrome DevTools is a powerful tool that often gets overlooked. Snippets allows a developer to write, save, and run custom JavaScript code directly in the browser. This feature can be helpful to experiment, debug, and demo JavaScript without needing to spin up a new local/dev/staging instance.

In this article, I want to highlight the capabilities of the Snippets panel while giving a few practical uses for your daily dev job.

What is the Snippets Panel?

The Snippets panel in Chrome DevTools is essentially a mini-code editor where you can write and save reusable JavaScript code. Unlike typing commands in the console, Snippets allow you to:

• Save your code for reuse.
• Run scripts with a single click.
• Share code between browser sessions.
• Debug scripts using breakpoints and watch expressions.

How to Access

You can access Snippets by opening DevTools (Right-click > Inspect > Sources > Snippets).

But Why?

In my previous article I went into different ways to use console to help with debugging your website. Snippets goes a bit beyond this. Adding JavaScript directly to the console works, but is a bit tiresome for repeated tasks. That's where Snippets comes into play. This allows a way to repeat and expand scripts.

Snippets lies in the middle ground between console and spinning up your own local instance.

Practical Uses

Demos

At some point in your career you probably need to interact directly with a client or demo something for an internal team. Snippets allows you to show on a live site where you don't have access to the code to show potential updates. I've used snippets to show clients the potential of certain changes including bulk CSS updates, rearranging sections, and manipulation of a live site. Manipulating the CSS via the console or Elements console works fine for a single instance, but Snippets shines for bulk updates.

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

Scraping Sites

Depending on your agency you may be in the position where you need to convert an onboarding client to your own company's proprietary templates. Depending on the client's setup you may not be able to use a prebuilt scraper opting for your own custom one. I've used snippets to test scraping sites to ensure we're only pulling in data from the appropriate elements. This is helpful when you're working on difficult to scrape sites where the data needed is on the page and not available in a backend.

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

Repetitive Tasks

If you're manually testing a site and new to repeat a task over and over again. Maybe you need to repeat a click events to see what a user is experiencing. Writing a snippet is very helpful to execute this repeatedly. Couple the snippet with breakpoints in the script to help with longer workflows.

const h1 = document.querySelector('h1').innerText;
console.log(h1);

Conclusion

The Snippets panel is a versatile tool that can enhance your development workflow. By automating tasks, debugging efficiently, and analyzing content, you’ll save time and effort in your daily work.

Have a different use case for Snippets? Share it in the comments below!

The above is the detailed content of Unlocking the Power of Chrome DevTools Snippets. For more information, please follow other related articles on the PHP Chinese website!