#CHROME JAVASCRIPT SCRATCHPAD HOW TO#
#CHROME JAVASCRIPT SCRATCHPAD CODE#

FormControlįormControl is a snippet developed by Stefan Kienzle to help you get more out of a form in your webpage.

#CHROME JAVASCRIPT SCRATCHPAD CODE#

You can find the source code for the dataurl.js file on this Github repository. It is worth noting that this snippet only works for images that are on the same domains as the current page. Let’s open a Getty images site and see it in action: It works by logging all the converted data URLs in the console, making it easy for you to copy and reuse where necessary. DataUrlĭataUrl is a snippet that allows you to convert all images and canvases on a web page into data URLs. You can find the allcolor.js source code on this Github repository. This is a very useful snippet to have in your DevTools as it not only shows you the CSS styles used on your current webpage, but also logs them to the console for you to use as you please. The snippet uses styled console.log calls to print out all the colors used on the page for easy visualization and implementation. AllColorsĪllColors is a chunk of JavaScript code that prints out all the computed styles used in all the elements on the page. Let’s now move on to the business of the day and show you the snippets you, as a developer, should keep in your DevTools. Now, we have understood how the snippet tab works by creating a new snippet, adding a sample code and running the snippet.

When you have created a new snippet, enter your code in the provided editor, save the code and run the snippet by right-clicking on the snippet and clicking run like so:

Select “New” to create and name a new Snippet.

Once you’re in the DevTools environment:.

Right-click anywhere on the browser and click inspect.

control + shift + c on Windows and Linux.

You can do this by running one of the following commands: To create a snippet, follow these simple steps:

#CHROME JAVASCRIPT SCRATCHPAD HOW TO#

But first, let’s start by showing you how to create and run your own snippet in Chrome. In this post, we’ll take a look at a few already-existing snippets to keep handy in your Chrome DevTools to help you experiment and build better apps. This equally applies to debugging scripts and generally all the functionalities of a usual bookmarklet. Most times, we have small utility scripts that we use on multiple pages, it makes sense to write them as a snippet and reuse when necessary. When you run a snippet, it executes from the context of the currently open page. You can access and run them from any page. This post suggests the top 6 snippets you need to keep in your Chrome DevTools to help you experiment and build better apps.Īccording to Kayce Basques, a technical writer at Chrome DevTools, Snippets are small scripts that you can write and execute within the Sources panel of Chrome DevTools.

Chrome javascript scratchpad