Every front-end development will use the JavaScript console for logging or debugging, and mastering these console tricks can make your development more efficient.
console.trace()
Console.trace () works in exactly the same way as console.log(), but it prints a trace of the entire stack, so you can pinpoint the problem
const outer = () => {
const inner = () => console.trace("Hello");
inner();
};
outer();
Copy the code
console.dir()
Console.dir () displays all of an object’s properties and methods
console.dir(document.body);
Copy the code
console.group()
Console.group () allows logs to be grouped into collapsible structures, which is especially useful when there are multiple logs
console.group("Outer"); // Create a group labelled 'Outer'
console.log("Hello"); // Log inside 'Outer'
console.groupCollapsed("Inner"); // Create a group labelled 'Inner', collapsed
console.log("Hellooooo"); // Log inside 'Inner'
console.groupEnd(); // End of current group, 'Inner'
console.groupEnd(); // End of current group, 'Outer'
console.log("Hi");
Copy the code
Record the class
In addition to console.log(), there are console.debug(), console.info(), console.warn(), and console.error().
console.debug("Debug");
console.info("Info");
console.warn("Warning");
console.error("Error");
Copy the code
console.assert()
Console.assert () provides an easy way to log something as an error only if the assertion fails (that is, when the first argument is false), otherwise the record will be skipped entirely
const age = 18; Console. assert(age === 18, "age not 18"); Console. assert(age === 20, "age is not 20");Copy the code
console.count()
You can use console.count() to count how many times a piece of code is executed
Array.from({length: 4}).foreach (() => console.count("items") // Use the items flag, which can be any string); console.countReset("items");Copy the code
console.time()
Console.time () provides a quick way to check the Performance of your code, but is not recommended for real testing because of its low accuracy. Performance is recommended
console.time("slow"); // Start the timer console.timeLog("slow"); // Record the value of the timer console.timeEnd("slow"); // Stop and record the timerCopy the code
CSS for the console
You can wrap other strings with %c strings in console.log() so that CSS can be used in various parts of the log
Console. log(" Change %cconsole log%c %c style %c!" // Use %c "color: # FFF; background: #1e90ff; Padding: 4px", // Apply styles "", // clear all styles "color: #f00; Font weight: bold", // Apply styles "" // Clear all styles);Copy the code
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =