前言
测试环境/预发布环境 如何进行调试
这里主要是 提及一些一个 模拟的生产环境, 应该如何测试
比如 上线之前, 或者 线上出现问题, 需要 hotfix 的场景下
我们应该怎么 在一个 测试环境/预发布 的环境下面 进行一个模拟的调试呢?
对于 如果是没有网络请求的项目, 甚至可以直接使用文件浏览器的服务进行调试
devtool 配置为 eval-source-map
首先是 业务项目这边的 devtools 的配置, 编译的时候配置 devtool 为 eval-source-map
配置为 source-map 貌似不行, 还原出来的 vue 少 javascript 相关的部分
然后进行 npm run build 打包
可以看到 打包的结果默认配置下 npm run build 的差异在于, 这里加了很多调试 需要的上下文
然后将 dist 发布到 nginx 之类的 静态资源 + 代理服务器
然后 进行访问 http://localhost:8081/index.html#/HelloWorld
从下面可以看到 浏览器解析了很多个 HelloWorld.vue 着多个对应的就是之前 “npm run serve” 中生成的那一套七八个 js 文件, 一个组合文件, 三个代理文件, 三个真实的 html, js, css 文件
我们这里关注的是 这个组合好的 HelloWorld.vue 的源码文件, 可以依次找一下 这几个文件, 找到 HelloWorld.vue 的源码文件, 如下图 这就是
然后 打上断点, 就是 真实的调试上下文了
可以看到, 源码的位置是正常的, 上下文的变量名称是正常的, 查看其它依赖的 js 是正常的
这里调试 就和在本地 npm run serve 进行调试时一样的了
devtool 配置为 source-map
配置 devtool 为 source-map 不知道为啥 拿不到完整的调试上下文
可能是 需要一个 webpack 的服务器 来解析代理文件?
但是 这里也描述一下 这个调试的流程
更新 devtool 的配置为 source-map, 然后进行 编译, 编译的结果如下, 可以看到一个 js 文件对应了一个 js.map 文件, 这个文件就是 source-map 文件
然后将 dist 发布到 nginx 之类的 静态资源 + 代理服务器
访问服务 http://localhost:8081/index.html#/HelloWorld
但是, 从 hello-package 下面看到, HelloWorld.vue 分别点开这几个, 发现少了一部分文件
这个不知道是 什么情况
浏览器这边 启用 source-map 的配置
这种需要使用 source-map 的场景下面需要进行 浏览器的配置
首先是 Sources - 设置, 下面配置 启用 javascript source-mapping
然后观察的方式为 Option - 更多工具 - 开发者资源
在该面板中可以看到, js.map 是正常加载了的
js.map 文件不存在的情况下 情况如下, 首先是 左边没有 hello-package 这个分组
其次是 开发者资源 下面, 可以看到 Source Map 的加载是失败了
直接在文件服务中访问没有网络请求的项目
更新 publicPath 为 “./”
以当前目录为基目录, chrome 去寻找 js, css 等等, 可以正常找到
调试现象如下, 可以看到 可以正常调试, 也没有基于 外部的 http, tcp 服务, 是直接基于文件浏览服务
调试的另外一个维度的考虑就是 npm run build 的时候配置不最小化 js
这个可以通过 vue.config.js 直接配置 webpack.optimization.minimize 为 false
然后 再禁用掉 sourceMap 的生成, 这里直接配置 productionSourceMap 为 false
编译之后的结果如下, 可以看到 是进行了一个友好的格式化的
这个调试, 就是直接是针对 npm run build, 生成的目标 js 进行的调试
然后 定位到目标问题之后, 需要开发人员进行一个逻辑上的映射, 去找对应于源码的哪里, 然后 再进行调整, 修复
另外去掉 webpack 的 minimize 还有另外一种方式, 增加一个 VUE_CLI_TEST 的环境变量
具体的处理的地方是在这里, prod.js 里面进行的一个逻辑上的更新, 没其他的需求的话, 直接在 vue.config.js 中配置就好了
完
