256 Kilobytes

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

Articles in Web Development | By August R. Garcia

Published | Last Update

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

13,611 views, 2 RAMs, and 4 comments

End↓

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 (1 year ago)
Univa (1 year ago) 🐏 ⨉ 2Posted by August R. Garcia 1 year ago

Edit History

• [2019-04-17 12:05 PDT] August R. Garcia (1 year ago)
• [2019-04-17 12:05 PDT] August R. Garcia (1 year ago)
• [2019-04-17 12:05 PDT] August R. Garcia (1 year ago)
• [2019-04-17 12:05 PDT] August R. Garcia (1 year ago)
• [2019-04-17 12:05 PDT] August R. Garcia (1 year ago)
 🕓 Posted at 17 April, 2019 12:05 PM PDT
Top↑
Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

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" attribute, proxies, sin, 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.

Profile Photo - Huevos RancherosHuevos RancherosStaff

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

Download more RAM. 🐏 ⨉ 0Posted by Huevos Rancheros 1 year ago 🕓 Posted at 17 April, 2019 14:16 PM PDT
Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite 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. 🐏 ⨉ 0Posted by August R. Garcia 1 year ago

Edit History

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

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Cross-post from the Quality Content Dump thread:

Download more RAM. 🐏 ⨉ 0Posted by August R. Garcia 9 months ago 🕓 Posted at 28 November, 2019 01:07 AM PST

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Quality trick to easily disable console.log() messages on a live/production site:

<?php
  // Function stolen from some Stack Overflow thread a while ago. 
  function on_localhost() {
    $whitelist = [
        '127.0.0.1',
        '::1'
    ];
    return (in_array($_SERVER['REMOTE_ADDR'], $whitelist)) ? TRUE : FALSE;
  }

  // Print out this <script> block unless on localhost
  if (!on_localhost()): 

?> 
  <script>
    // This message prints normally
    console.log("1 console.log exists."); 

    // Override/replace the console's log method with a function that does nothing
    console.log = function() {};

    // This message will print nothing 
    console.log("2 console.log exists."); 
  </script>
<?php endif; ?>

Download more RAM. 🐏 ⨉ 0Posted by August R. Garcia 8 months ago 🕓 Posted at 19 December, 2019 01:46 AM PST

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?

Register an Account

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

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