DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > How to Use Chrome Developer Tools JavaScript Source Snippets

How to Use Chrome Developer Tools JavaScript Source Snippets

With Chrome Code Snippets we can ‘run’ small chunks of code without using the console. And using a gist, we can import and export them to a file.

Alan Richardson user avatar by
Alan Richardson
·
Sep. 28, 16 · Web Dev Zone · Tutorial
Like (1)
Save
Tweet
6.20K Views

Join the DZone community and get the full member experience.

Join For Free

We already know that we can run custom JavaScript code from the console. I explained that in this blog post.

And we can use Google Chrome Code snippets to reuse that code over time.

By default, we can’t import and export, but people have written helpful code to let us do that as well.

Google Chrome Snippets

The Google Chrome Snippets tool allows you to store short ‘snippets’ of JavaScript code in the dev tools, rather than having to copy and paste into the console all the time.

https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

If you right click on a snippet you can ‘run’ it.

Remember to hit  ctrl+s to save it, you’ll know if it is saved because it will no longer have the ‘*’ next to it.

Collections of Snippets

You can find collections of other people’s snippets online.

  • https://bgrins.github.io/devtools-snippets/
  • https://github.com/bgrins/devtools-snippets RSS
  • https://github.com/bahmutov/code-snippetsRSS

Can We Import and Export Snippets?

If you Ctrl + Shift + I and open a ‘secondary’ Dev tools for the Dev Tools, then this gives you access to the snippets API.

E.g. stackoverflow.com/questions/34936456

InspectorFrontendHost.getPreferences(function(prefs) {
    console.log(prefs.scriptSnippets);});

We can import and export snippets using this gist:

gist.github.com/soundyogi/03df95505604c8351212

Copy and paste theraw gist into your ‘secondary’ dev tools. After you import, remember to ‘save to chrome’.

Summary

If you find yourself working from the console, then this is a really useful way to manage your code snippets. And having the ability to import and export allows you to keep your snippets clean and only have the snippets for the application you are testing.

Snippet (programming) dev JavaScript Google Chrome

Published at DZone with permission of Alan Richardson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • JUnit 5 Tutorial: Nice and Easy [Video]
  • How to Determine if Microservices Architecture Is Right for Your Business?
  • How to Upload/Download a File To and From the Server
  • Fintech and AI: Ways Artificial Intelligence Is Used in Finance

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo