In the Snippets pane, click the name of the snippet that you want to edit. See Rename snippets if you'd like to give your new snippet a custom name. Start typing Snippet, select Create new snippet, then press Enter to run the command. Press Control+ Shift+ P (Windows/Linux) or Command+ Shift+ P (Mac) to open the Command Menu. # Create a snippet in the Sources panelĮnter a name for your snippet and press Enter to save.įocus your cursor anywhere inside of DevTools. The Snippets pane sorts your snippets in alphabetical order. You can create snippets in the Snippets pane or by running the corresponding command from the Command Menu anywhere in DevTools. The Sources > Snippets pane shows you a list of snippets you saved, empty in this example. Start typing Snippets, select Show Snippets, and press Enter.Press Control+ Shift+ P (Windows/Linux) or Command+ Shift+ P (Mac) to open the Command Menu.Navigate to Sources > More tabs > Snippets. To edit a snippet, open it in one of two ways: When you click the Run button, the Console drawer pops up to display the Hello, Snippets! message that the snippet logs, and the page's content changes. log ( 'Hello, Snippets!' ) Ĭonst p = document. Here's the snippet source code that logs some message and replaces the homepage's HTML body with a element that contains the message: console. Snippets are an alternative to bookmarklets.įor example, the screenshot below shows the DevTools documentation homepage on the left and some snippet source code in the Sources > Snippets pane on the right.

They have access to the page's JavaScript context, and you can run them on any page. Snippets are scripts that you author in the Sources panel.

If you find yourself running the same code in the Console repeatedly, consider saving the code as a snippet instead.

Javascript for chrome