Tutorials on Chrome Devtools

In this blog post, I want to share 3 Chrome DevTools tips I recently learned that will make your life easier when writing Vue apps. When we have objects with a lot of fields (and many rows) if you console.log it out, you have to dig deep within these objects to uncover the values you're looking for. However, Chrome provides a handy function console.table , which will nicely format our data into a pretty table! Did you know you can add color to your console.log ?? Try this out. Open up any website and open the dev tools. Then type: And you should see something that looks like this: ... cool, right!? How it works: You'll notice that the first argument to console.log is a string, as normal, but with a special %c , which is where the CSS will be placed. We pass the CSS as a string as the second argument. You can even load images this way -- if you use a background image. Try the following: ...and you should see something like this: How it works We're using a background url to within the CSS. Did you know that Chrome supports a top-level await keyword for async functions? It's super helpful. And here's what it looks like in our console: And if we wanted to inspect this product's ingredients? We can use console.table ! Hope this makes your day a little easier! And to learn more about developing Vue Apps, check out our book Fullstack Vue !