Darcy Paterson Blog Chrome DevTools – The Console
Chrome DevTools – The Console
By [email protected] on January 20th, 2022
There’s a bunch of information on Chrome DevTools out there already for sure but as I’m watching a tutorial on Chrome DevTools I realized there’s a few good ideas here that I never knew about before so why not share them?
console.log();
The console is a place where developers like me spend a lot of our time. It’s good for searching through code, experimenting and debugging. There’s some commands that are obvious like console.log() which when entered into a script will output whatever parameter it’s given.
console.log('Hello World!');
To try this out start by opening your console.
- Chrome go to (View > Developer > Developer Tools) or keyboard shortcut (Option-Command-I).
- Firefox go to (Tools > Browser Tools > Web Developer Tools) or keyboard shortcut (Option-Command-I).
If you’re looking at this page on a desktop or laptop you’re likely using either Google Chrome or Mozilla Firefox browser. You may be using Safari or Opera as well but most developers stick to the first two so I’ll use them as examples.
Paste console.log(‘Hello World!’); into the console, press ENTER and you should see it output Hello World!
> console.log('Hello World!');
Hello World!
console.info(); console.warn(); console.error();
There are others that do similar messaging in the console. Try these out the same as you did with console.log() but maybe try a different message as a parameter.
console.info('Here is some information'); console.warn('Here is a warning dude!'); console.error('It looks like something has gone wrong.');
console.dir(); console.table();
Now try a couple more that aren’t as common but helpful in development. Here console.dir() and console.table() are useful for displaying JSON data.
console.dir(json); console.table(json);
To begin the example let’s fetch some JSON placeholder data. I created a loadInfo() function to do just that. In it you can see the call to console.dir() and console.table(). Copy and paste the code into the console and press Enter to see how both display the information in different formats.
function loadInfo() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => { console.dir(json); console.table(json); }); } loadInfo();
console.groupCollapsed(); console.groupEnd();
Now let’s present it a little better by sandwiching those two console methods between console.groupCollapsed() and console.groupEnd().
function loadInfo() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => { console.groupCollapsed('The JSON data'); console.dir(json); console.table(json); console.groupEnd(); }); } loadInfo();
console.assert();
Another good one to use is console.assert() which can be used to test an assertion. For example, the assertion that there are 200 data points in this fake JSON is false (there are 100). Let’s console that assertion by using the console.assert() method in the code.
function loadInfo() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => { console.groupCollapsed('The JSON data'); console.dir(json); console.table(json); console.groupEnd(); console.assert(json.length === 200, {Length: json.length, reason: 'The wrong number was given'}); }); } loadInfo();
console.trace();
Here you can add console.trace(); to the code above and you’ll see how the code calls the script in the output. This gives you a way to reference the call stack of a block of code if you need to know what happens and when. No parameter is required.
function loadInfo() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => { console.groupCollapsed('The JSON data'); console.dir(json); console.table(json); console.groupEnd(); console.assert(json.length === 200, {Length: json.length, reason: 'The wrong number was given'}); console.trace(); }); } loadInfo();