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.
- Is it possible to pull css values with HTA javascript?
- What a strange syntax?
- JavaScript / Jest: How to show logs from test case only when test fails?
- How to secure my login page
- How can I create a two-way mapping in JavaScript, or some other way to swap out values?
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()?
- How to filter object array based on attributes?
- How do you convert from emoji to unicode escapes in JS
- How to simulate a mouse click?
- Is it possible to add a single item to a vis.js timeline?
- How to ensure order of Cypress request execution
- Jquery Ajax Problem
- Can I run a function after navigating to a new page and waiting for that page to finish loading?
- Cannot start cocos after adding a new file
- Active link with React-Router?
- Is there a way to schedule offline notifications in a pwa?
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- LeafLet map doesnt render properly on modal
- Create object from array
- How to ignore lines of code from coverage in vitest?
- How to manage CORS in Django
- How can I get an element's Accessible Name in javascript in the browser?
- TypeError: fs.readFileSync is not a function in Next.js
- Show hide divs on click in HTML and CSS without jQuery
- If an IIFE contains just one variable declaration that is immediately exported to global scope, why bother with it?
- Need explanation on following type of Javascript code
- What does an array literal with the `for` keyword inside mean in JavaScript?
- How to call a function every minute in a React component?