生产环境，尤其是需要通过微信访问的线上环境，如果出现了一些在测试环境难以复现的问题，该如何在
- 尽量不修改已经部署的生产环境代码
- 尽量不影响现有的用户
这两个条件下调试代码发现问题呢？
为了应对这个场景，我们考虑通过下面两个小工具为来为生产环境增加一个debug模式，方便工程师直接在生产环境中获取更多的信息。为行驶中的汽车换轮胎，我们也需要一个能够行驶的千斤顶来帮助。
首先debug模式本身并不神秘，在前端应用中加入vconsole/eruda等，都可以在微信等平台下为我们提供一个类似于Chrome Dev Tools一样的调试环境。但是把vconsole/eruda这些工具“偷偷的”集成到生产环境中呢？我们考虑自己遇到的一些情形之后，弄了两个小工具来提高此事的效率。
首先是onparam.js，解决的问题主要是通过在编译好的文件中(dist/index.html)加入一个<script>标签，从公共CDN（jsdelivr）中引入第三方库。引入vconsole，只需要在dist/index.html中加入如下标签即可(使用fastly.jsdelivr.net)
<script
src="https://fastly.jsdelivr.net/gh/gzttech/onparam/src/onparam.js?key=action&value=test&action=vconsole"
x-code="vConsole = new VConsole();"
x-domain="https://fastly.jsdelivr.net">
</script>
这样的话，只有在访问/?action=test时，才会渲染vconsole，避免影响普通用户的使用。
原则上只要拼好代码，就可以修改在线的文件，而不是通过修改源代码重新编译，避免从源码到上线的整个过程可能产生的各种未知问题。不过这一点仍然不够，因为手动修改生产环境的文件还是很容易会产生错误和问题，我们需要一种各位自动化且幂等的方式来完成这个修改。
于是这里就引出了第二个工具，也就是用于在命令行中编辑DOM的beautifulspoon。我可以通过这样的方式在命令行中编辑dist/index.html，增加上面的script标签，也就是
#!/bin/bash
# 检查是否已经注入vconsole
grep vconsole index.html && echo 'vconsole already injected!' && exit
# 在head中加入vconsole标签
beautifulspoon index.html --select head --append '<script src="https://fastly.jsdelivr.net/gh/gzttech/onparam/src/onparam.js?key=action&value=test&action=vconsole" x-domain="https://fastly.jsdelivr.net" x-code="vConsole = new VConsole();">' -o index.html
这样的话，就可以先检查并注入vconsole。这样就可以方便且相对安全的为生产环境增加debug模式。当然，一些比如sentry之类的用于错误捕捉机制的script标签等，或者是GA/百度统计等代码的标签等也可以通过这样的方法在CI脚本中集成html文件中。
