alexkras.com

  • Home
  • Top Posts
  • Resume
  • Projects
  • YouTube
  • Boots to Bytes
  • About
  • Contact

Using Code Snippets in Chrome Developer Tools

August 10, 2017 by Alex Kras 7 Comments

Sources view in Chrome Developer Tools has a code snippets feature, kind of like a built-in text editor, that allows to write, debug, save and re-use code snippets.

Creating a code snippet

To get to code snippets:

  1. Open the Developer Tools
  2. Navigate to Sources at the top menu
  3. Select Snippets in the left menu (see the image above).
  4. Click on “New Snippet” button

Once the new snippet is created, it can be edited and debugged like any other JavaScript file.

Running a code snippet

Snippet can be run in two ways:

  1. By hitting the small play button to the bottom right of the snippet
  2. By hitting "Command + Enter" on Mac or "Control + Enter" on Windows

Debugging code snippets

Break points can be added into code snippets, just like any other JavaScript file loaded in Chrome Dev tools.

Quick access to snippets

Existing snippet can be opened through the source tab or by hitting a "Command + P" shortcut on Mac or "Control + P" on windows. This will open a fuzzy selector in which a snippet name can be entered.

Hitting "Command + Enter" on Mac or "Control + Enter" on Windows will execute the snippet.

Snippet use-cases

Snippets are great for ad-hoc prototyping and debugging.

In addition snippets can be used to save common debugging helper functions for quick re-use. There are libraries of snippets out there. One such library is code-snippets which, among other things, has a detailed page timing snippet and css layout snippet that draws boundary around every DOM element.

How to run snippets of JS on any page from DevTools: https://t.co/6K7VdM0a3M

— Chrome DevTools (@ChromeDevTools) January 2, 2018

Do you have any snippets that you like to use? Please share in the comment area bellow.

Filed Under: JavaScript, Tools

Subscribe to this Blog via Email

New posts only. No other messages will be sent.

You can find me on LinkedIn, GitHub, Twitter or Facebook.

Comments

    Leave a Reply Cancel reply

  1. Cihad Turhan (@CihadTurhan) says

    July 30, 2016 at 5:03 pm

    I love snippets tool as it saves so much time and let me reuse my previous code anytime.

    However, they should synchronize snippets to all logged-in chrome accounts. I can’t find the snippets I saved at home when I’m at work.

    Reply
    • Bijaya Manandhar says

      December 18, 2016 at 12:32 pm

      I tried to use down loaded ‘atom’ to run programs written in JavaScript and not getting why I am not able to run those, any idea please?

      Reply
  2. Taylor Hurt says

    April 15, 2016 at 8:28 pm

    Thanks Alex
    This makes my life a lot easier.
    Another tool to checkout is the chrome extension Requirify, which allows you to load modules from npm.

    Reply
    • Alex Kras says

      April 15, 2016 at 9:17 pm

      Thats cool, I haven’t heard of it. Will check it out.

      Reply

Trackbacks

  1. Front End Developer – Free Tools ! | Marco Gallo Dev says:
    December 30, 2017 at 1:09 pm

    […] Using Code Snippets […]

    Reply
  2. Using Code Snippets in Chrome Developer Tools – PipisCrew Official Homepage says:
    August 10, 2017 at 1:34 pm

    […] Using Code Snippets in Chrome Developer Tools […]

    Reply
  3. Inspecting Nested Scope in Angularjs says:
    November 29, 2015 at 1:52 am

    […] Copy paste the script bellow into your Chrome Dev Tools console or add it to a snippet. You can learn more about Google Chrome Dev Tools Snippets here. […]

    Reply

Copyright © 2019 · eleven40 Pro Theme on Genesis Framework · WordPress · Log in