5 Tasks You Didn't Know Could be Done from the Developer Console

Note: The original/canonical version of this post includes a few of these demos built into the webpage['s console] via script tags.

As they say, no one uses more than ten percent of any piece of software’s features, but everyone uses a different ten percent.

Similarly to HTML and CSS, as well as Google Sheets, the browser’s developer console has a number of tricks that can be used that you probably didn’t know about.

Intro

For those of you new to the console, it is a debugging tool built into various browsers' development tools. Here’s a crash course:

• Right Click -> Inspect Element
• From the window that’s just opened, find the tab labeled "console"; the layout varies between browsers
• Type this into the console and press enter:
  • console.log("Some Text");

Congratulations. You are a hacker and can follow along with the rest of this article.

Custom CSS for console.log()

A standard console.log() statement looks like this:

• console.log("asdf")

Starting a console.log() command with %c allows for arbitrary CSS to be injected as a second parameter, such as what is done here with this command:

console.log("%c adsf", "color:blue;font-size:600%;")

// This command also works (space not required):
console.log("%cadsf", "color:blue;font-size:600%;")

// Which allows you to do shit like:
console.log("%cGOOD JOB OPENING THE CONSOLE", "color:brown;font-weight:bold;font-size:600%;");

Edit Any Content on a Webpage

Sometimes, you have to edit webpages for debugging purposes or to make fake screenshots. While you can do this fairly easily from the developer console, the contenteditable property, which can be used to make content editable, makes this even easier to do. Enter the following line of code to the developer console to make the entire page editable:

• document.body.contentEditable=true

console.table()

Similarly to console.log(), the console.table() function can be used to display arbitrary data in the developer console. The function, which takes in arrays, objects, JSON, and other values, can be used to display tables of data. For example, this:

console.table({"Idaho":1751000, "Texas":28700000, "Maine":1338000})

Will display a table of the key-value pairs passed into the function as JSON data.

Similarly, console.group(), console.groupEnd(), and console.groupCollaposed() can be used for better organization of debugging messages output to the console.

Data Extraction

For example, if you want to extract all of the URLs from a webpage, you can use the following command:

var t = document.querySelectorAll("a");
var output = {};
for (var iii = 0; iii < t.length; ++iii) {
output[ iii ] = t[iii].getAttribute('href');
} console.table(output);

Or if you want to get slightly more advanced, you can use this command to get a table with innerHTML and rel data as well:

var t = document.querySelectorAll("a");
var output = {};
for (var iii = 0; iii < t.length; ++iii) {
output[iii] = {"href":t[iii].getAttribute('href'), "rel":t[iii].getAttribute('rel'), "innerHTML":t[iii].innerHTML};
} console.table(output);

Shorthand Data Extraction

Since there are basically limitless possibilities as to what you can scrape from the console, it’s useful to know that there are shorthands for the querySelector and querySelectorAll methods. Specifically:

• $('a') is the same as document.querySelector('a')
• $$('a') is the same as document.querySelectorAll('a'), with the exception that $$ returns an array instead of a NodeList

Remove CSS and Other Headers

The head tag can be used to include various helpful pieces of information, or it can be used to inject garbage. If you’re on some other website and you want to remove their stylesheets, JavaScript, and other headers, you can do this by executing the following command from the console:

document.head.parentNode.removeChild(document.head);

Among other things, this can be used to prevent those "pls pay us $1 per month to read D-tier fluff stories" messages from loading in a few seconds after the initial pageload on various tabloids.

Honorable Mentions

• Similarly to console.log(), console.info(), console.warn(), and console.error() can be used to display data to the console at various levels of importance.
• Stupid shit, like autoclicking in Cookie Clicker.
• console.time() and console.timeEnd() can be used to time performance.
• Refer to the last input’s result with $_. Ex:
  • Enter "10*12" into the console
  • Then enter $_ after submitting that command as a shortcut to refer to that result.
• You can (at least in FireFox and Chrome) use a dark theme instead of a light theme through the settings menu. HA HA LMAO DAE USE THE DARK THEME?!

In Conclusion

Congratulations. You now know some debugging tricks that you didn’t know previously, unless you did. Now you can ignore them to continue to use alert("asdfjla").

Feel free to comment below with additional tricks and/or complaints about muh Safari.