nginx帮你插入vconsole调试

没装nginx?
brew install nginx本地装nginx,so easy
移动端调试
先说说移动端调试，常用的工具/方法：
- vconsole
- weinre
- spy-debugger
- eruda
- https://github.com/avwo/whistle
- chrome远程调试
- fiddler/charles 抓包/代理
  那么nginx能做什么
  如果你用过上面几种方法，你会发现常常需要在项目中插入一段js脚本，而这又是跟业务无关的，不希望上线时带着的。那么你坑有下面操作：
1. 打包脚本上下功夫：打包时根据环境判断是否插入debug插件
2. 代码中根据环境判断是否插入debug插件（或根据参数增加debug模式）

无疑，上述方法都有点弄脏项目代码。

那么nginx能解决么？看看这段nginx配置：

location  /  {

    ...

    set  $injected  '<script src="//cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><script>var vconsole = new Vconsole()</script>';

    sub_filter  '<body>'  '<body>${injected}';

    sub_filter_types *;

    sub_filter_once on;
    #sub_filter 一行代码前面是需要替换的内容，后面单引号内是替换成的内容。
    #sub_filter_once 意思是只查找并替换一次。on是开启此功能，off是关闭——默认值是on。
    #sub_filter_types 一行意思是选定查找替换文件类型为文本型。也可以不加此行，因为默认只查找text/html文件。
    #sub_filter模块可以用在http, server, location模块中。主要作用就是查找替换文件字符。
}

将它和你的nginx配置合并，重启nginx，打开页面，你的页面就会有vconsole插件啦，eruda同理。

nginx具体修改
- vim /usr/local/etc/nginx/nginx.conf
- 修改完成保存后nginx -s reload重启nginx

其实，这只是向插入脚本的一种方式，更适合向页面中插入统计项目error、pv等这样等业务无关，但长期需要的脚本；

对于debugg的场景，用whistle也可以达到目的，而且调试更方便。
详细请看whistle相关文章。

移动端调试

那么nginx能做什么