Dev Tools Tips
console.log() tips
A few handy to know console.log tips. Check the console for the outputs.
const dogs = [
{ name: "Snickers", age: 2 },
{ name: "hugo", age: 8 }
];
function makeGreen() {
const p = document.querySelector("p");
p.style.color = "#BADA55";
p.style.fontSize = "50px";
}
// Regular
console.log("hello");
// Interpolated
console.log("Hi, this is a %s string!", "💩");
// second argument will be interpolated into string.
// or we could use backticks
const variable = "pretty cool string";
console.log(`This is a ${variable}`);
// Styled
console.log(
"%c This will alter text size and colour.",
"font-size: 50px; color: green;"
);
// warning!
console.warn("ohh nooo");
// Error :|
console.error("Sorry, there was an error");
// Info
console.info("this should be very informative");
// Testing
console.assert(1 === 1, "This is very much true");
// This will ONLY fire if something is WRONG!
console.assert(1 === 2, "this will show up!");
// clearing
console.clear();
// Viewing DOM Elements
const p = document.querySelector("p");
console.log(p);
console.dir(p);
// If you want to see all the methods that live on that object, open up
// __proto__ (prototype)
console.clear();
// Grouping together
dogs.forEach(dog => {
console.group(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`);
console.log(`${dog.name} is ${dog.age * 7} in dog years`);
console.groupEnd(`${dog.name}`);
});
// counting
console.count("Kieran");
console.count("Kieran");
console.count("Catherine");
console.count("Kieran");
console.count("Catherine");
console.count("Catherine");
.time() & .fetch()
A bit of info from GitHub retrieved with the fetch() method.
Name: Kieran Brown
Bio: Senior Front-End Developer at Victorian Plumbing 👨🏽💻