npm 包 vconsole-webpack-plugin2 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

平常我们在做前端开发时，经常会遇到一些调试问题，比如说有些错误在 PC 端没有问题，但是在移动端就出现了。这时候 console 可能是无法很好的帮助我们问题排查的，因为移动端的浏览器嘛，是很难把 console 打开的，于是我们就需要使用 vconsole 了。今天我们要介绍的是 vconsole-webpack-plugin2 这个 npm 包。

什么是 vconsole-webpack-plugin2

vconsole-webpack-plugin2 是一个 webpack 插件，可以方便我们在开发过程中使用 vconsole 进行调试，它的特点是轻量，使用简单，支持 webpack4/5。

使用步骤

安装依赖

npm install vconsole-webpack-plugin2 --save-dev

引入插件并添加到 webpack 配置文件中

在 webpack 配置文件中，引入插件并添加插件实例，示例如下：

-- -------------------- ---- -------
----- -------------- - ------------------------------------
-------------- - -
  -- ---
  -------- -
    --- ----------------
      ------- ---- -- ------------------------ --- ------- ------- ---- ----
    --
  -
  -- ---
--

在代码中使用

在代码中，我们只需要 import vconsole 就可以使用了，示例如下：

import VConsole from 'vconsole';
new VConsole();

运行项目，使用 vconsole 进行调试

在开启 dev-server 后，可以在浏览器的 Network 面板中看到一个 GET 请求，例如：

http://127.0.0.1:3000/__vconsole

此时在浏览器中打开 http://127.0.0.1:3000/__vconsole 就可以看到 vconsole 的面板了。

参数配置

vconsole-webpack-plugin2 还支持以下参数进行配置：

enable：是否启用插件，默认为 false。
filter：过滤掉的地址，支持字符串和正则表达式。
type：vconsole 的类型，可选值为 default 和 mini，默认为 default。
entry：加载 vconsole 的入口地址，默认为 /__vconsole。
defaultPlugins：是否开启默认插件，默认为 true。
onReady：vconsole 加载完成回调函数，可在此时执行自定义代码。

-- -------------------- ---- -------
--- ----------------
  ------- -----
  ------- ------------
  ----- ----------
  ------ --------
  --------------- ------
  -------- -------- -- -
    -- ---
  -
---

总结

本文我们介绍了一个非常方便的前端调试工具 vconsole-webpack-plugin2，使用它可以很方便的在移动端调试代码。不仅如此，我们还详细介绍了它的使用步骤以及参数配置，希望对大家的开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065b46c6eb7e50355dbf10