5 Chrome DevTools Commands that improved my WebDev workflow
How to use them and why they will make your life a lot easier
Fortunately the web is currently growing up, and so are its development tools. As a web developer I’m constantly aiming to improve my development workflow and I’m very happy and thankful to see the Google Chrome DevTools team working so hard on making web development easier.
Here’s a list of DevTools tricks that make me happy almost everyday:
Object.keys(object)
Let’s start with a subtle one. keys returns a string array of property names that belong to an object (also returns array indexes in case you pass an array as argument). This is useful for getting a gist of an object’s properties or for iterating through objects where you don’t know about all the containing properties.
A typical everyday usecase:
I want to know about all available global variables so I don’t forget to fix accidential namespace pollution in case it happens.
Sure, I probably haven’t made such a mistake in years, but just to be sure ;-) So here’s what you do:
> Object.keys(window)
> ["top", "window", "location", "external", "chrome", "document", "google", "_gjwl", "_gjuc", "_gjh", "gbar_", "rwt", "gbar", "__PVT", "gapi", "___jsl", ...]Analogous Object.values(object) will give you all the object’s property values
Subtle — but useful! Let’s move on to some more interesting tricks
console.table(array)
console.table generates a performant, sortable table right to your console based on an array of objects. If you’re working on projects in context of image manipulation or big datasets this is the best thing that can happen to you because until that working with bigger datasets in the browser was really painful.
Back then when I was working on heatmap.js and nude.js, my pet projects, I experienced some of that pain: it was hard to evaluate big datasets after clientside processing without switching to another tool to do it performant. I either had to test a very specific small subsets, crash my browser by printing all my data, or switch to another tool to get better insight. Not funny, but I’m glad console.table exists now.
I just printed 10k datapoints. It’s sortable AND scrollable.
You can actually focus on the data.
> var dataset = [{ x: 123, y: 456, count: 14}, ...];
> console.table(dataset);
Thank you so much Chrome DevTools team, I ❤ You!
$0
This is the feature I use most of the time: Whenever you inspect an element on a website or select it with $(selector), the inspected element will be stored in $0. This comes in handy when you want to manipulate an inspected element programatically. Here’s an example that adds a class “inspected” to the currently inspected element:
*click on a DOM node and inspect it*
> $0
> <span>Hello there</span>
> $0.classList.add("inspected"); $0
> <span class="inspected">Hello there</span>console.timeStamp([text])
The timeStamp command creates timestamp annotations in DevTools’ Timeline panel (marked by a yellow block in the timeline) so you can see when your code will be executed and it is easy to figure out how your code affects browser behaviour e.g. repaint or layout. So how to use it:
*turn on Timeline recording*
> var x = document.createElement('div');
> x.style.cssText = "width:100px; height:100px; background:red;";
> console.timeStamp('Adding my node');
> document.body.appendChild(x);monitorEvents(object [, events])
monitorEvents tracks events for a specified DOM node object and will print them to your console.
monitorEvents(document.body, “click”)
monitorEvents(document.body, [“click”, “dblclick”]) If you don’t pass a second argument it will simply track all events on that object.
There are still lots of great other commands that Google Chrome DevTools offer (especially in context of performance analysis) , take your time, it’s worth to learn about them!
If you want to know more about the possibilities and all the other great features of Chrome DevTools check out their website, it’s all well-documented and they have super useful tipps for optimizing your web site/application:
https://developers.google.com/chrome-developer-tools/
So what do you do to make your web development process more awesome?
Did you enjoy the article? Follow me on twitter & feel free to subscribe my mailing list where I write about how to improve the process of web development & other interesting stuff.
