3 Chrome Devtools Tips to Make Developing Vue Apps Easier

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 

 it out, you have to dig deep within these objects to uncover the values you're looking for.

However, Chrome provides a handy function 

, which will nicely format our data into a pretty table!

console.log(
  "%cWelcome, ~Contact.FirstName~!",
  "font-size:600%;color:salmon;font-weight:bold;font-family:Mongoose; text-transform: uppercase;"
);

And you should see something that looks like this:

You'll notice that the first argument to 

 is a string, as normal, but with a special 

, which is where the CSS will be placed. We pass the CSS as a string as the second argument.

let src = "https://imgur.com/jFhFXNB.png";
let img = new Image();
img.onload = () =>
  console.log(
    "%c+",
    "background: url(" +
      src +
      "); background-size: 252px 314px; color transparent; padding: 150px 122px"
  );
img.src = src;

...and you should see something like this:

Did you know that Chrome supports a top-level 

 keyword for async functions? It's super helpful.

const url =
  "https://world.openfoodfacts.org/api/v0/product/737628064502.json";
// Ew
fetch(url)
  .then((response) => response.json())
  .then((body) => console.log(body));

// let's try using await
let response = await fetch(url).then((response) =>
  response.json()
);


And here's what it looks like in our console:

And if we wanted to inspect this product's ingredients? We can use 

let product = response.product;
product.ingredients; // ugly
console.table(product.ingredients);

Hope this makes your day a little easier! And to learn more about developing Vue Apps, check out our book 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Chrome Devtools

3 Chrome Devtools Tips to Make Developing Vue Apps Easier

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript