Running Code Snippets on Chrome’s Console

March 02, 2021 • 3 min read

THE PROBLEM

You want to test a registration form on a website. Instead of filling it up manually every time, you may come up with a snippet like this that does it automatically for you:

const inputFields = {
  "first-name": "John",
  "last-name": "Doe",
  "month-of-birth": "01",
  "day-of-birth": "01",
  "year-of-birth": "1990",
  "register-username": `test+autocomplete+${Math.floor(Math.random() * 10000000)}@example.com`,
  "register-password": "password1",
  "repeat-password": "password1",
  address1: "420 Surfing St.",
  address2: "42",
  city: "Santa Cruz",
  state: "California",
  "postal-code": "12345",
  country: "US",
};

// Populate fields
for (var prop in inputFields) {
  if (inputFields.hasOwnProperty(prop)) {
    if (document.getElementById(prop)) {
      document.getElementById(prop).value = inputFields[prop];
    }
  }
}

// Check checkboxes
document
  .querySelectorAll('input[type="checkbox"]')
  .forEach((input) => (!input.checked ? input.click() : null));

// Submit form
document.getElementById("buy-now-button").click();

Now, instead of copy-pasting it over and over, it would be great if we could store it on the browser so when we want to use it we can retrieve it and run it easily.

A SOLUTION

Fortunately, Chrome’s DevTools provide functionality for this: snippets.

Open Chrome’s DevTools.

Press ctrl/cmd + shift + p to show Chrome’s DevTools command menu:

Type “show snippets” and select that option

This will reveal the Snippets tab under the sources panel.

Tap on + New snippet

Name your snippet and input its content on the right-hand panel.

Now that your snippet is saved, you can press ctrl/cmd + enter to run iton the page!

Snippets will persist between browser sessions, so you can retrieve and run them easily.