Use Snippets to Store Behaviors in Chrome DevTools

Share this video with your friends

Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your browser against whatever website you’re looking at. This is a great way to store commonly used pieces of code that you rely on for debugging or customization.

Alexander Szarka

~ 8 years ago

Awesome!! Never tried Snippets before. Thank You for creating this video!!!!!!!

gaurav soni

~ 7 years ago

Can you provide some real project use cases? I mean some daily useful examples and can we add some third party libraries in snippets(e.g => lodash, underscore etc)?

ASD

~ 7 years ago

Can you provide some real project use cases? I mean some daily useful examples and can we add some third party libraries in snippets(e.g => lodash, underscore etc)?

You can use console-importer to import third-party libraries. Consequently, you can create a snippet with the next code $('lodash'); and it will load the library into the browser.

Brian

~ 5 years ago

Nice tip. I was able to put it to use immediately.

    const x = document.getElementsByClassName('unavailable')
    for (let i = 0; i < x.length; i++) {
      x[i].parentElement.style.display="none";
    }
}