Chrome DevTools Tips

Chrome DevTools is awesome. How well do you know it?

Posted on April 02, 2017

Chrome is the default browser I use. This is mainly because of DevTools. I love to use it during any development that I do. DevTools makes life incredibly easy and productive. Let’s take a look at a few things we can do with DevTools that are really cool.

Scroll to view: This is a very useful feature if you spend a lot of time fiddling with UI elements in the dev tools. Usually, when you do inspect element on an UI element, it opens up the dev tools with that item selected. But if in some cases if the element scrolls out of the window, there will be an indication with a small arrow on the page displayed which tells you if the element is scrolled above or below the visible window. Instead of manually having to scroll up or down, just right-click the element in the source and select scroll to view and the element scroll back to the visible window.

Scroll into view in action

Sources: Sometimes, you would want to fiddle around with some style or UI changes. Traditionally you would shuttle between your code editor and your browser to make the changes and see them and save them. But sources tab allows you to edit your source files from within Chrome DevTools and save them if you need to. This is pretty handy and allows you to make the changes on the fly. For this, you have to right click on the sources panel and add your local folder to the workspace. Once done, open and edit the file and Chrome will ask you to map the file. Select the file mapping and go on editing.

View Sources

Console Table: Often we do a console.log() to display the data and inspect them. But if we have a collection of data, it might be a little cumbersome to explore them in the normal tree structure that console.log() outputs. Instead using console.table() displays the data in a nice table layout where it is easy to understand and read the data.

Warning, Error, Info: Sometimes when you write a JavaScript app, you want certain errors and warnings to be displayed. If you just use console.log() it won’t be highlighted specifically as an error and the user might fail to notice. Instead, you can use the following to display your message as a warning, info or error.

console.warn('This is a warning!');console.info('This is an info.');console.error('This is a error!');

Console Warning, Info and Error

Grouping: When you have to console related information about different items, there is a good chance that it gets confusing and difficult to read and understand the relationship. With console.group(), you’ll be able to group together related information and make it easier to read.

letcars=[{name:'Aston Martin',country:'UK'},{name:'Jaguar',country:'UK'},{name:'Porsche',country:'Germany'},{name:'Audi',country:'Germany'},{name:'BMW',country:'Germany'},{name:'Lamborghini',country:'Italy'},{name:'Ferrari',country:'Italy'},];// Without groupingcars.forEach(car=>{console.log(`This is ${car.name}`);console.log(`${car.name} is from ${car.country}`);console.log(`${car.country} is in Europe`);});// With groupingcars.forEach(car=>{console.group(`${car.name}`);console.log(`This is ${car.name}`);console.log(`${car.name} is from ${car.country}`);console.log(`${car.country} is in Europe`);console.groupEnd(`${car.name}`);});// With grouping collapsedcars.forEach(car=>{console.groupCollapsed(`${car.name}`);console.log(`This is ${car.name}`);console.log(`${car.name} is from ${car.country}`);console.log(`${car.country} is in Europe`);console.groupEnd(`${car.name}`);});

Without any grouping, the content is not easy to read and understand:

Console No Group

Much more clearer using console.group():

Console Group

More clearer when used with console.groupCollapsed:

Console Group Collapsed

So there you have it, few (if not many) Chrome DevTools tricks. Try them out during your new project and see which of them are useful.

I am a podcaster, software engineer, blogger and coffee lover as you can see from my Instagram. This is my blog where I post stuff related to web technologies, podcasting and life in general. I co-host a podcast at Writer & Geek Show and I write some articles about life. More about me here.

Vishnu Padmanabhan

I enjoy living. I try to see positivity in everything. Sarcastic most of the time and researching for my podcast the rest. Love music and cannot live without it, did I say I love food?

This blog, its content and opinions are my own and does not reflect the opinions of my employer.