在前端开发中，我们常常需要在浏览器控制台中查看程序的运行状态和调试信息，但是一些第三方库或者插件会在控制台输出大量的无关信息，干扰我们的调试。这时候，我们可以使用 clean-console 这个工具来过滤掉这些无用信息。
安装
使用 npm 安装 clean-console :
npm install clean-console --save-dev
使用方法
在你的入口文件（例如 main.js）中引入 clean-console ，并传入一个选项对象：
-- -------------------- ---- ------- ------ ------------ ---- ---------------- -------------- -- ----- ------- ------ ------- ------- ------- -------- -------- ------- ------- ------- --------- -- ----------- ---- ------------- ----- -- ------------------- ----- -------------- ------ -- ---------------------- ---------- --- -- ---------------------- ---------- -- ---
上面的代码会过滤掉所有 console.log、console.info、console.warn 和 console.error 输出，并且在每次页面刷新时清空控制台。
深度学习
除了上面提到的基本用法，clean-console 还支持一些高级功能，让我们来逐一了解一下。
显示过滤后的信息
在选项对象中设置 showInConsole: true ，会将过滤后的信息显示在控制台中。这个选项在调试时非常有用，可以帮助我们检查程序是否按照预期运行。
import cleanConsole from 'clean-console';
cleanConsole({
methods: ['log', 'info', 'warn', 'error'],
clearConsole: true,
showInConsole: true
});允许或禁止打印特定字符的信息
在选项对象中设置 allowList 或 blockList ，可以分别允许或禁止打印包含特定字符的信息。例如，如果你想允许打印包含字符串 "important" 的信息，可以这样做：
import cleanConsole from 'clean-console';
cleanConsole({
methods: ['log', 'info', 'warn', 'error'],
clearConsole: true,
allowList: ['important']
});如果你想禁止打印包含字符串 "debug" 的信息，可以这样做：
import cleanConsole from 'clean-console';
cleanConsole({
methods: ['log', 'info', 'warn', 'error'],
clearConsole: true,
blockList: ['debug']
});配合 webpack-dev-server 使用
如果你使用 webpack-dev-server 来开发项目，可以在配置文件中使用 cleanConsole 插件来自动清空控制台。在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
----- ------------ - -------------------------
-------------- - -
-- ---
---------- -
-- ---
----------- -
--------------
-------- ------- ------- ------- --------
---
-
-
--这样，在每次页面刷新时，控制台都会被自动清空。
示例代码
下面是一个例子，演示了如何在 Vue 项目中使用 clean-console ：
-- -------------------- ---- ------- ------ --- ---- ------ ------ --- ---- ------------ ------ ------------ ---- ---------------- ------------------------ - ------ -- -------- ------------- --- -------------- -------- ------- ------- ------- --------- ------------- ----- -------------- ---- --- --- ----- ------- - -- ------ ------------------ - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------