Unlocking the Power of Chrome DevTools Snippets

Justin — Thu, 09 Jan 2025 15:14:59 +0000

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 h1 = document.querySelector('h1').innerText;
console.log(h1);

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.

document.getElementById("contact").scrollIntoView();

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!

Moving beyond console.log

Justin — Wed, 18 Dec 2024 00:22:56 +0000

Exploring the Browser Console: Practical Examples for Web Developers

For a long time my primary JavaScript debugging methods consisted of basically console.log() and console.error(). Once I learned to leverage the other browser console object's methods my JavaScript game definitely took a giant leap forwarding.

Below are 8 ways I utilize the console window object when working through JavaScript projects and scripts and practical usage of each.

1. `console.log()` - General Logging

Intent: Output general information for debugging or tracking program flow.

Practical Example: Use console.log to inspect variable values:

const user = { name: 'Alice', age: 30 };
console.log('User details:', user);

Example Output:

2. `console.error()` - Highlight Errors

Intent: Display error messages in the console with a stack trace. console.error() has different formatting helping it standout typically with a red background and error icon.

Practical Example: Log errors when API calls fail:

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Failed to fetch data');
  })
  .catch(error => console.error('Fetch error:', error));

Example Output:

3. `console.warn()` - Warn About Potential Issues

Intent: Highlight non-critical issues or deprecations. console.warn() has different formatting helping it standout. Typically a yellow background with a warning icon.

Practical Example: Warn about invalid user input:

const userInput = '';
if (!userInput) console.warn('User input is empty. Default value will be used.');

Example Output:

4. `console.table()` - Display Data in a Table Format

Intent: Visualize arrays or objects in a tabular format for clarity. Helpful with visualizing large array of objects.

Practical Example: Inspect API response data:

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
console.table(data);

Example Output:

5. `console.group()` and `console.groupEnd()` - Organize Logs into Groups

Intent: Group related logs for better readability.

Practical Example: Debug API responses and metadata:

console.group('API Response');
console.log(`Status: ${response.status}`);
console.log(`Data:`, data);
console.groupEnd();

Example Output:

6. `console.time()` and `console.timeEnd()` - Measure Performance

Intent: Track how long a block of code takes to execute. Good for performance testing and blocking time.

Practical Example: Optimize a sorting function:

console.time('Sort Timer');
const arr = [5, 3, 8, 1, 2, 50000000, 192, 50, 21, 159999, 7, 9,0];
arr.sort();
console.timeEnd('Sort Timer');

Example Output:

7. `console.assert()` - Test Assumptions

Intent: Log messages only when a condition is false. Helpful when you want to conditionally render an error message. Typically has a red background with a warning icon and the text "Asserting failed."

Practical Example: Validate user permissions:

const hasAccess = false;
console.assert(hasAccess, 'Access denied for the user.');

Example Output:

8. `console.trace()` - Show the Call Stack

Intent: Display the call stack to trace function calls. Trace the steps leading to the console.trace() call, which is helpful when data is tracked through multiple function calls.

Practical Example: Debug where a function was invoked:

function fetchData() {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => showData(json))
}  
function showData(fData) {
  console.trace('Show data', fData);
}

const fData = fetchData();

Example Output:

9. `console.count()` - Count Log Occurrences

Intent: Count how many times a line of code has been executed. Helpful in instances where you need to count the number of times a function has been called or a loop has looped.

Practical Example: Count loops:

const array1 = ['a', 'b', 'c', 'd'];
for (const element of array1) {
  console.count()
}

Example Output:

10. `console.clear()` - Clean Up the Console

Intent: Clear cluttered logs during testing.

Practical Usage:

console.clear();

Forem: Justin

Unlocking the Power of Chrome DevTools Snippets

What is the Snippets Panel?

How to Access

But Why?

Practical Uses

Demos

Scraping Sites

Repetitive Tasks

Moving beyond console.log

Exploring the Browser Console: Practical Examples for Web Developers

1. console.log() - General Logging

2. console.error() - Highlight Errors

3. console.warn() - Warn About Potential Issues

4. console.table() - Display Data in a Table Format

5. console.group() and console.groupEnd() - Organize Logs into Groups

6. console.time() and console.timeEnd() - Measure Performance

7. console.assert() - Test Assumptions

8. console.trace() - Show the Call Stack

9. console.count() - Count Log Occurrences

10. console.clear() - Clean Up the Console

1. `console.log()` - General Logging

2. `console.error()` - Highlight Errors

3. `console.warn()` - Warn About Potential Issues

4. `console.table()` - Display Data in a Table Format

5. `console.group()` and `console.groupEnd()` - Organize Logs into Groups

6. `console.time()` and `console.timeEnd()` - Measure Performance

7. `console.assert()` - Test Assumptions

8. `console.trace()` - Show the Call Stack

9. `console.count()` - Count Log Occurrences

10. `console.clear()` - Clean Up the Console