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.
Join the DZone community and get the full member experience.
Join For FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
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.
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Published at DZone with permission of Alan Richardson , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}