print.js

A very simple wrapper around the console object that comes with the browser’s internal window.

background

A few days ago, our backend colleagues said: “Your front-end project opened the console in the browser, all log, looks so low ah…” ;

Me: “…”

In fact, I wanted to package it before, but every time I remembered the logger.js that my former colleague packaged, I shook my head, it was too difficult to use. Why? Because all the log information displayed in the console comes from one location -logger.js8438:38, so I can’t locate which line of log code output in which file…

So, today, I took some time to look at the console object on the browser window, and found all the methods of the console object. Mak… The garment… Emmm… It does have a few more methods than the ones I use (conosle.log, console.dir). Hahaha hahaha

Why use

The goal is to replace these methods in console like console.log with $print in your project, and then define a switch that controls when the log is printed on the console and when the printed content is not displayed on the console.

One advantage is that when you use $print.log(), it looks exactly the same as when you use the native console.log(), and you can see which line in which file the current print is in. Click the file to which the printed message belongs to directly locate the current code.

I had a colleague wrap console before, but the printed message always showed up as a line from logger.js. It is not easy to locate and debug code in a local development environment. Later, I always wanted to write this idea. I was too lazy and busy.

It’s a little confusing, but to summarize:

1. It has the same effect as console

2. An extra switch that controls when to print in the browser and when not to print.

If $print is used in the js file, click xxx.js? 4244:23 can directly open the corresponding source file corresponding location. (Same as console)

use

To use it, take print.js directly to your project and configure line 38 to determine when to turn the print switch on in the console.

I was writing a vue-CLI project, which can be determined by process.env.node_env.

The code is simple, 47 lines in all.

For example, $print.log(‘ Ellis ‘) has the same effect as console.log(‘ Ellis ‘).

  $print.log('hello world') / /"hello world"

Copy the code

It has all the original methods. For details, see ==== MDN Console

Poking fun at the

This is probably the one project where README is more than code. Ha, ha, ha

Making the address

Github.com/ellis-s/pri…

It would be great if you liked it

A star would be even better