Effectively using the Chrome Javascript Console

The Javascript console is a powerful tool for rapid debugging and data manipulation.

By taking advantage of built-in Browser features, we can easily fetch, explore, manipulate, and use data from existing sources.

The components involved are:

1. "Store as Global Variable" context menu option
2. dynamic import
3. copy()

Store as Global Variable

Chrome and Firefox both offer a "Store as Global Variable" context menu option to copy a javascript object to the console. Just right click on an object in the debugger, network panel, or console, and select "Store as Global Variable". The variable will be stored as temp${N} where N is the number of times it's been used in the current console. I frequently use this to copy network request previews, or debugger objects. This feature is invaluable.

Dynamic import

Using dynamic import, we can import npm modules for use when debugging or manipulating data.

For example:

import('https://unpkg.com/lodash@latest/lodash.min.js')

_.add(4, 6)
// 10

This gives us the option of using lodash, ramda, or your library of choice for slicing, dicing, and formatting data as you see fit.

You can import from unpkg, jsDelivr, or your choice of CDN.
Here are some examples:

// import jQuery, or another javascript project, from it's github repository.
import('https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js')

import("https://cdn.jsdelivr.net/npm/ramda@latest/dist/ramda.min.js")
// or
import("https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js")

Caveats

Many libraries are difficult to import this way, since they are not in a format compatible with dynamic import. Look for .mjs files or UMD modules when available. Most CommonJS libraries won't work here.

copy()

The copy() function allows us to copy a given Javascript console variable to the system clipboard.

const temp1 = [1,2,3]; // could be any variable
copy(temp1); // clipboard now contains "[1,2,3]"

Example usage

Get the average text length for given post

Let's say you are working on a web component to display a blog post, and you hear some of them are overflowing the container. Using the following recipe, you can calculate various descriptive statistics to figure out what your component should support.

const getSimpleStatisticsFromUnpkg = async () => await import(
    "https://unpkg.com/simple-statistics@7.0.1/dist/simple-statistics.mjs"
);
// hit enter
const simpleStatistics = await getSimpleStatisticsFromUnpkg();
// the module is now available under the 'simpleStatistics' namespace

const getPosts = async () => await fetch(
    "https://jsonplaceholder.typicode.com/posts"
)
    .then(res => res.json());

const posts = await getPosts();
// hit enter
// alternatively, use a stored global variable like temp1 in place of posts;

const average = simpleStatistics.average(posts.map(post => post.body.length))
// average = 160.64

copy(average); // paste into an email to your designer ;-)

Conclusion

Becoming a master of the Javascript console will improve your workflow, and open up new possibilities for rapid development. If you have questions or comments, hit me up in the comments below.

For more info, check out

• Chrome dynamic import shipping announcement