vConsole 只在非生产环境构造

手机浏览器里没有桌面那套开发者工具。页面嵌在微信或 App 的 WebView 里时，电脑上的检查器经常接不进去。vConsole 是嵌进页面的一块面板，new VConsole() 之后，屏幕上多一个按钮，点开才能看见日志和请求。生产构建里不要执行这行。

只在非生产环境创建面板

装上之后就是一行构造

包的安装是 npm install vconsole。不想进构建时，对话里给了 CDN：https://unpkg.com/vconsole/dist/vconsole.min.js。模块环境里是：

import VConsole from 'vconsole'
new VConsole()

构造函数跑完，页面上出现悬浮按钮。点开之后有五块：Console 看 console.log、console.error、console.warn，Network 看请求，Element 看 DOM，Storage 看 localStorage 和 sessionStorage，Plugin 留给自己的插件。普通的 console.log('Hello vConsole') 会进第一块，不需要另一套 API。

面板盖在页面上，会挡住角落里的按钮。调试完可以收起，但对象还在。不要在每个路由进入时再 new 一次，否则按钮叠按钮，日志打到哪一块也不稳定。整个页面生命周期里构造一次就够。

CDN 脚本和打包进来的包不要同时开。两套都会构造自己的面板。选一种：有构建就用 npm，临时看一个静态页再用脚本标签。

生产环境的判断写在构造外面

对话里标题写着移除，代码却是：当 process.env.NODE_ENV 不是 production 时才 require('vconsole') 并 new。这是“不要创建”，不是调用一个销毁方法。生产包里的判断要在构建时就能去掉这段依赖。若运行时才判断，而打包器没有把 require 标成条件依赖，生产包里仍会带上整份 vConsole。

if (process.env.NODE_ENV !== 'production') {
  const VConsole = require('vconsole')
  new VConsole()
}

用 ES 模块时，把 import 放在文件顶上，打包器会无条件打进包。要和这段 require 一样，让生产构建看不到这条依赖。环境变量要和实际构建模式一致。有的项目用 staging 而不是 production，条件只写不等于 production，预发环境也会带上面板。预发如果已经对用户开放，面板就不该出现。把允许打开的环境列成白名单，比“除了生产都开”更窄。

面板能看 Storage 和请求头。测试机上如果登着真实账号，Network 里会有令牌。不要把开着 vConsole 的包发给外部用户，也不要在截图里带着这块面板。

日志仍然走 console

业务代码继续用 console。vConsole 只是在页面里把这些调用显示出来。没有面板时，这些调用仍然发生，只是手机上看不见。生产环境关掉面板之后，不要留下大量 console.log 打用户数据。面板消失了，日志函数还在。

Plugin 那一栏是扩展点。对话里没有给出插件的注册代码，所以先把五个内置栏用熟：日志、请求、DOM、存储。请求失败时先看 Network 的状态码，再看 Console 里自己打的错误。DOM 栏用来确认节点在不在，而不是代替桌面检查器改样式。

悬浮按钮的层级很高。页面如果自己有固定底栏，调试时会重叠。这是开发时的遮挡，不是布局回归。生产构建不构造它，底栏就回到原位。

五个栏里先看日志和请求

五个栏分别看什么

Console 接收的就是页面里已有的 console.log、console.error、console.warn。对话里的三行示例足够区分信息、错误和警告。业务代码不用改成 vConsole.log。Network 看这次页面发出的请求，用来对状态码和自己打的错误。Element 看当前 DOM，确认节点是否渲染出来。Storage 看 localStorage 和 sessionStorage，登录态若存在这里，面板上能直接读到。Plugin 是留给扩展的栏，对话没有给出注册插件的代码，默认不依赖它排错。

排错顺序是：先 Console 有没有自己的报错，再 Network 的状态码，再 Element 里节点在不在，最后才看 Storage 里的键是否写上。四个栏都空，先确认构造函数执行过，按钮是否被页面的层级盖住。按钮没出现，就不是栏的问题，而是 new 没跑到。

环境判断要让打包器看见

对话里的判断是 process.env.NODE_ENV !== 'production'。为真才 require('vconsole') 并 new VConsole()。生产构建的替换若把比较收成常量假，这段可以被去掉，包里就没有面板，也没有这份依赖。若 import 写在文件顶部，打包器在看条件之前就已经把模块算进依赖图，生产包仍会变大，面板是否显示只取决于运行时。体积和暴露是两件事。藏按钮仍然把代码发给了用户。

staging、test 若也会被用户打开，不要用“不是 production 就创建”。列出允许的值，例如只在 development 创建。对话里的条件是不等于 production，比白名单宽，预发会带上面板。按自己的环境名收窄。

CDN 地址是 https://unpkg.com/vconsole/dist/vconsole.min.js。脚本标签没有环境判断，静态页上线时要把标签删掉或包在服务端不会渲染的分支里。npm 和 CDN 只留一种，否则两次构造，两个按钮。

整个页面只 new 一次。路由切换再执行，会再叠一个按钮，Console 打到哪一个实例并不稳定。放在应用入口，而不是放在每个页面的加载函数里。

面板能看到 Storage 和请求。测试账号的令牌会出现在 Network 和 Storage。不要把开着面板的构建发给外部，截图前先收起。生产路径不构造它，底栏也不会再被悬浮按钮挡住。挡住是开发时的层级，不是业务布局坏了。

构造一次，生产里不构造

new VConsole() 打开悬浮面板。Console、Network、Element、Storage、Plugin 五块够看日志、请求和本地存储。整个应用只构造一次。生产构建用环境判断把这行和依赖一起去掉。判断要落在构建能摇掉的位置，而不是页面加载后再把按钮藏起来。开着面板的包不要发给用户。

验收就看构建产物。开发模式打开页面，悬浮按钮在，console.log、console.error、console.warn 三行分别进 Console。Network 能看见一次请求，Storage 能看见自己写入的键。生产模式的产物里搜不到 vconsole 的包名，页面上也没有按钮。只是按钮不显示、包里仍有这份代码，条件还写在运行时，没有被构建去掉。

入口文件只保留一次构造。从列表页进详情页再回来，按钮仍然是一个。CDN 脚本和 npm 包不要同时出现在同一个页面。unpkg.com/vconsole/dist/vconsole.min.js 只用在没有构建的静态页，上线前删掉标签。环境名如果还有 staging，把条件收成只在 development 构造，避免预发把 Storage 里的登录态暴露在面板上。

五个栏的分工保持简单。日志看 console，请求看 Network，节点看 Element，键值看 Storage。Plugin 没有样本代码就不先扩展。按钮只来自一次 new VConsole()。生产构建的判断写成构建期能去掉的条件，而不是页面里把按钮设成透明。透明按钮仍在，Storage 仍能被打开。依赖从生产包里消失，才算这行代码被移除。悬浮按钮挡住底栏时，先确认当前是不是开发构建，再改业务组件的层级。生产包里搜不到这个依赖才算关掉。