5 Tasks You Didn't Know Could be Done from the Developer Console
Articles in Web Development | By August R. Garcia
Published 7 months agoWed, 17 Apr 2019 12:05:28 -0700 | Last update 6 months agoThu, 02 May 2019 09:40:04 -0700
console.log("%cGOOD JOB OPENING THE CONSOLE", "color:brown;font-weight:bold;font-size:600%;");
12,318 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:
- $('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 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
- 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.
- Enter "
- 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.
Huevos Rancheros (7 months ago)
Univa (6 months ago) 🐏 ⨉ 2 Posted by August R. Garcia 7 months ago
Edit History
• [2019-04-17 12:05 PDT] August R. Garcia (7 months ago)• [2019-04-17 12:05 PDT] August R. Garcia (7 months ago)
• [2019-04-17 12:05 PDT] August R. Garcia (7 months ago)
• [2019-04-17 12:05 PDT] August R. Garcia (7 months ago)
• [2019-04-17 12:05 PDT] August R. Garcia (7 months ago)
🕓 Posted at 17 April, 2019 12:05 PM PDT
Ddata extraction is a real time saver for web scraping spammers like myself.
Link extraction basic version:
Edit History
• [2019-05-06 5:59 PDT] August R. Garcia (6 months ago)• [2019-05-06 5:59 PDT] August R. Garcia (6 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.