The Most Underutilized Feature of Chrome DevTools

If you’ve read any of my other articles, you know I’m a DevTools nerd. I’m saddened and surprised that most front-end web developers don’t know about a feature of Google Chrome Developer Tools that I use EVERY SINGLE DAY.

Drumroll please

…

it’s…

THE SNIPPETS PANEL

Huzzzahhh

TL;DR Use the snippets panel to run longer chunks of Javascript code that are a pain to write on the console. Use it to learn JS, test out ES6 / ES7, scrape data from the web, inject JQuery, or even measure performance.

To start writing Javascript code in the Snippets panel, open DevTools (cmd+shift+I / ctrl+shift+I), then select Sources, then Snippets on the left hand panel.

Once you’re in, start coding by adding a new snippet.

Press the arrow, or use the keyboard shortcut to run!

Use Case 1: Learning

Think about all the stuff that needs to be set up to run & debug javascript code! You need to set up an HTML file, point to a JS file, maybe set up a server, then load up the code in your browser.

Using snippets avoids all these problems, and they can be used in the context of any web-page.

Why not just use Codepen or JSFiddle? Because they inject their own cruft onto the page and make it difficult to debug.

You can easily set breakpoints in Snippets to stop code!

Use Case 2: Test out new Javascript Features

You might have some crazy setup using Babel and source maps so that you can use “new style” Javascript code (ES6, ES7, or whatever they’re calling it these days). Chrome supports all the latest stuff so this is not an issue, and you don’t need a complex build setup to get it working.

Use Case 3: Simple Web Scraping

I was making an online class about Chrome Devtools in Udemy, and I wanted to get all of my lecture descriptions out of the platform so that I could create a PDF:

Copy / Pasting 37 lecture descriptions? No Thanks.

The source code below is not that important, but I’m including it to prove a point. I ran this in the context of my curriculum page, and I was able to instantly scrape all the course notes into a tabbed string that I could quickly paste into Google Docs.

Easy JQuery Code

Here’s what I made with the output:

Course Syllabus

Note there’s no reason I couldn’t have gone crazy and outputted a full HTML string here, but I thought automating that would be overkill for my quick task.

Use Case 4: Inject JQuery or other Scripts

In the case above, I was lucky enough that Udemy already included JQuery on their page, but if I didn’t have that, I could have simply used this snippet:

(function () {

  if ( !window.jQuery ) {
    var dollarInUse = !!window.$;
    var s = document.createElement('script');
    s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js');
    s.addEventListener('load', function(){
      console.log('jQuery loaded!');

      if(dollarInUse) {
        jQuery.noConflict();
        console.log('`$` already in use; use `jQuery`');
      }
    });

    document.body.appendChild(s);
  }

})();

This snippet was taken from http://bgrins.github.io/devtools-snippets/. That page has a ton of other useful snippets that you can use for development.

Use Case 5: Performance Testing

When I was developing Gliffy, a visual diagram editor, we had some performance problems when scaling a lot of shapes together. But it was really hard to click the record button on the profile panel, then perform the scaling operation, then click stop. There was too much time in between that would muck up my profiler results.

So I wrote this snippet that would start a profile on any key down, then end the profile on keyup using console.profile and console.profileEnd.

var DO_PROFILE = true; 
//on any key down
window.addEventListener( "keydown", function(event){ 
 if (DO_PROFILE){
   console.profile(); //start the profile
   DO_PROFILE = false;
 }
}, false );
//on any key up
window.addEventListener( "keyup", function(event){ 
 console.profileEnd(); //end the profile 
 DO_PROFILE = true;
}, false );

The full article about performance testing with snippets is here.

Your use Cases

I’d love to hear how you use snippets to improve your workflow. Let me know in the comments section!

Commercial Break

I’m working on an awesome project with WebAssembly right now, want to be the first to hear about it? Join my email list.

Learn all the Things!

I also developed a comprehensive 3 hour course on Google Chrome Developer Tools ($15 for a limited time!)

Please 💚 if you learned something new today!