Chrome Devtools Tricks 1

Know your weapon…

Break on
Sometimes, some html element gets modified by javascript. But it’s really hard to debug this. Especially if you are debugging someone else’s code. In the devtools, on the elements tab, when you right click on the html element, there is “Break on” menu item appears. You can watch modifications on this html element.

For instance, i created a a function which changes the color of the element when clicked on it. Once you start watching “attribute modifications”, any javascript code which causes modifications on this element will be caught like there was a brakpoint.

Console.log saga

String interpolation
You can interpolate strings. It’s a little bit outdated after ES6 string literals, but, good to know anyway.

const varStr = "Devtools"
console.log("Hello there %s", varStr)

Styling console
Styling console outputs with standart css is really great. All you need to do is to put %c at the beginning of the log and provide style data as a second param.

console.log("%c Hello there Devtools!", "font-size: 26px; color: green")
Swag da console.

Log types
Other than console.log, we have several other useful methods like info, warn, error, assert and table. Info is really straightforward, basically same as console.log. Warn and error have their own styles in console and give the stack trace information in addition. I found assert very useful, you don’t need if-checks to log if an unexpected values appears.

console.assert(myVar === 1, "my variable be better equal to one")

Console.table is my favorite. You can view an object or array of objects as a table. Great method to debug server returned object arrays.

const dogs = [
{name: "Bobi", age:2},
{name: "Mike", age:4},
{name: "Comar", age:1},
{name: "Max", age:5},
{name: "Buddy", age:6},
{name: "Lis", age:3},
{name: "Tom", age:2}
]
console.table(dogs)

Grouping logs
Console outputs can be grouped. I’m not sure if i would use it, but again, it’s good to know.

console.group("My mikado todo list")
console.group("Refactor some method")
console.log("improve naming")
console.group("remove global dependencies")
console.log("remove param1 dependency")
console.log("remove param2 dependency")
console.groupEnd()
console.log("spit function body into smaller functions")
console.groupEnd()

And the result is pretty.

Chrome devtools has amazing tools to make life easier while debugging or even creating apps. We’ll keep exploring more dev tools tricks in the future.