Chrome Developer Tools: What is Snippets Support?
In the "Sources" tab of Chrome dev tools, there is a Snippets sub-tab:
What can I use this for?
Solution
In short, snippets are a multi-line console, an iterative JS development workflow, and a persistent store for common debugging helpers.
developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets
Some of the use-cases Snippets can help with are:
- Bookmarklets - all of your bookmarklets could be stored as snippets, especially those you may wish to edit.
- Utilities - debugging helpers for interacting with the current page can be stored and debugged. A community-curated list of such utilities is available.
- Debugging - Snippets offer a multi-line console with syntax-highlighting and persistance, making it convenience for debugging code that is more than a one-liner.
- Monkey-patching code - code you wish to patch at runtime can be done through Snippets, although many times you can just live-edit code in the Sources tab.
Lastly, I've personally been collecting a few common snippets that you may include in your arsenal: github.com/paulirish/devtools-addons/wiki/Snippets
To run snippets quickly, now you can do this. Ctrl-Shift-P for the "command palette", then backspace, and use a ! prefix, then type whichever snippet name you want to run.
- Clear clipboard to prohibit unauthorised copying, insert message?
- Supplying a reason for AbortController?
- Can you render a html file into a container?
- Using performance.mark() with Chrome dev tools performance tab
- How to save javascript array as redis list
- Find out whether Chrome console is open
- How to wait for requests and validate responses using playwright?
- Show Bootstrap Alert on Button Click via Javascript / jQuery
- How to post a file from a form with Axios
- Why doesn't Javascript handle divide by zero error in a try catch
- how can I add menu button in telegram bot
- Debounce in ReactJS
- Javascript question mark operator, multiple question marks
- Could not find a declaration file for module '@hookform/resolvers/zod'
- Stripe CLI trigger subscription failed event for a specifc customer
- Steps to send a https request to a rest service in Node js
- react jest confirming snapshot change
- Getting a list of all countries to using npm countries-list
- How do you limit the number of options selected in an HTML <select> element?
- Different sorting
- add an event listener on an element I've created in javascript
- Web Component not rendering when loaded from UNPKG CDN?
- Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../"
- Javascript Date - set just the date, ignoring time?
- Form validate() method is not working with Vue 3 and Vuetify 3
- Running V8 Javascript Engine Standalone
- PHP - Extract frame during Video upload
- Can a PWA app be published to app store and play store
- How to check if a caught exception was thrown because of triggering an AbortController?
- Apollo Client: retrieving the results from a query with errors