Only you can see this message

This story's distribution setting is on. You're in the Partner Program, so this story is eligible to earn money. Learn more

How you can improve your workflow using the JavaScript console

As a web developer, you know very well the need to debug your code. We often use external libraries for logs, and to format and/or display them in some cases, but the console of our browsers is much more powerful than we think.

When we think about the console, the first thing that comes to mind and the console.log, right? But there are many more methods than those we imagine. Now we will see how to make the most of using the console, and I’ll give you some tips to make them these methods more readable

What is the Console?

  • View a log of errors and warnings that occur on a web page.
  • Interact with the web page using JavaScript commands.
  • Debug applications and traverse the DOM directly in the browser.
  • Inspect and analyze network activity

Basically, it empowers you to write, manage, and monitor JavaScript right within your browser.

Console.log, Console.error, Console.warn and Console.info

Console.group

Example of how to use the console.group

The results will look like this:

Console.table

Example of how to use the console.table

The result is wonderful and very useful in debugging:

Console.count, Console.time and Console.timeEnd

Example of how to use the console.time and console.count

The output will look like this:

Console.trace and Console.assert

As we can see, the output is exactly what React (or any other library) would show us when we generate an exception.

Delete all the Consoles 🙀

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";

.....
optimization: {
minimizer: !debug ? [
new UglifyJsPlugin({
// Compression specific options
uglifyOptions: {
// Eliminate comments
comments: false,
compress: {
// remove warnings
warnings: false,
// Drop console statements
drop_console: true
},
}
})] : []
}

The configuration is really trivial and it simplifies the work, so have fun with the console (but do not abuse it!)


If you liked the article please clap and follow me :)
Thx and stay tuned 🚀
Follow my last news and tips on Facebook

freeCodeCamp.org

This is no longer updated.

Riccardo Canella

Written by

Riccardo Canella @ricanella92 Love #basket, #bike and #HIMYM since my childhood. #Fullstack #Javascript addicted - https://canellariccardo.it

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Thank you for being a member of Medium. You get unlimited access to insightful stories from amazing thinkers and storytellers. Browse

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store