Using snippets in google chrome dev tools

January 11th, 2013 § 2 comments § permalink

Executing Multiline javasctipt in chrome console is bit difficult since an enter will trigger the execution of it. So the google chrome teams come up with a new thing called snippets with chrome developer tools. Using snippets you can create, store and execute javascript codes in dev tools. Currently its a experimental feature so that you need to enable it manually.

How to Enable

For enabling snippets First you need to enable Enable Developer Tools experiments.

  1. Type chrome://flags in your address bar and hit Enter.
  2. Find Enable Developer Tools experiments and enable it.

Enable Dev toolsClicking on the Enable link will Enable the Developer tools experiments. Now please restart the chrome to effect the changes. After restarting open the devtools and please follow the following steps

  1. Click on the settings icon on the bottom-left corner of devtools. An overlay with black background will popup with lots of settings and tabs.
  2. Switch to Experiments tab.
  3. Check the snippets option.
  4. Restart Chrome developer tools.

Chrome Dev tools settings

Creating new snippets

After restarting the chrome, Open the devtools > switch to Sources tab and you can find a new member on the sidebar, “Snippets“.

You can create new snippets by right click on snippets sidebar and choosing “New” from the context menu.

New snippet

Saving snippets

Now you can draft the snippet on the content area and save using Ctrl+S. Saved snippets will be available even after restarting the chrome.

Executing Snippet

Execute snippet

You can Execute the snippet by either right clicking on the snippet and select run from the context menu or select the snippet from the snippets sidebar and click the execute  icon (marked in red).