256 Kilobytes

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

Articles in Web Development | By August R. Garcia

Published 2 months agoWed, 17 Apr 2019 12:05:28 -0700 | Last update 2 months agoThu, 02 May 2019 09:40:04 -0700

console.log("%cGOOD JOB OPENING THE CONSOLE", "color:brown;font-weight:bold;font-size:600%;");

11,697 views, 2 RAMs, and 2 comments

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:

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 fucking "pls pay us $1 per month to read D-tier propaganda" messages from loading in a few seconds after the initial pageload on various news sites tabloids.

Honorable Mentions

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.

Users Who Have Downloaded More RAM:
Huevos Rancheros (2 months ago)
Univa (2 months ago)
🐏 ⨉ 2
Posted by August R. Garcia 2 months ago

Edit History

• [2019-04-17 12:05 PDT] August R. Garcia (2 months ago)
• [2019-04-17 12:05 PDT] August R. Garcia (2 months ago)
• [2019-04-17 12:05 PDT] August R. Garcia (2 months ago)
• [2019-04-17 12:05 PDT] August R. Garcia (2 months ago)
• [2019-04-17 12:05 PDT] August R. Garcia (2 months ago)
🕓 Posted at 17 April, 2019 12:05 PM PDT

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 160 🗨 838 🐏 244
Site Owner

Grahew Mattham

August Garcia is some guy who used to sell Viagra on the Internet. He made this website to LARP as a sysadmin while posting about garbage like user-agent spoofing, spintax, the only good keyboard, virtual assitants from Pakistan, links with the rel="nofollow" attributeproxiessin, the developer console, literally every link building method, and other junk.

Available at arg@256kilobytes.com, via Twitter, or arg.256kilobytes.com. Open to business inquiries based on availability.


Account created 7 months ago.
160 posts, 838 comments, and 244 RAMs.

Last active 12 hours ago:
Commented in thread Quality Content Dump: The Thread

Profile Photo - Huevos Rancheros Huevos Rancheros
🗎 18 🗨 94 🐏 48
Staff

Ddata extraction is a real time saver for web scraping spammers like myself. 

Download more RAM. 🐏 ⨉ 0 Posted by Huevos Rancheros 2 months ago 🕓 Posted at 17 April, 2019 14:16 PM PDT
Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 160 🗨 838 🐏 244
Site Owner

Link extraction basic version:

var t = document.querySelectorAll("a");
var output = "";
for (var iii = 0; iii < t.length; ++iii) {
output += t[iii].getAttribute('href') + "\n";
} console.log(output);
Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago

Edit History

• [2019-05-06 5:59 PDT] August R. Garcia (2 months ago)
• [2019-05-06 5:59 PDT] August R. Garcia (2 months ago)
🕓 Posted at 06 May, 2019 05:59 AM PDT

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.