写在前面

在h5的开发过程中经常会遇到需要真机调试的情景，尤其是在pc端的手机模拟器无法复现bug或真机无法看到网络请求的情况。在会使用调试工具之前的我除了使用微信开发者工具尽量进行模拟线上环境或测试环境alert 想要的信息两种方式二选一。

但是以上两种方式说实话效率贼低，但是耐不住当时菜的一批只会这么操作（虽然现在也菜的一批）。后来在不断接触中学会了使用eruda和whistle进行移动端的调试，虽然也是只停留在初步使用，但是至少比只会微信开发者工具和alert好多了。

eruda

eruda是我感觉在本地开发和测试环境进行真机调试最便捷的方法，引入js文件然后进行初始化就行了，

1.常规写法

xml 复制代码

<script src="https://cdn.bootcss.com/eruda/1.5.2/eruda.min.js">
</script>
<script>eruda.init();</script>

2.避免上线时忘记删除

2.1后端配置一个变量提示当前处于什么环境，非正式环境时才添加。

假设为APP_ENV(前端代码打包为php blade文件的情况下)

ini 复制代码

---template.html---
    <script>
        let current_env = "{{ env('APP_ENV') }}";
        if (current_env.includes('APP_ENV') || current_env == 'test') {
            let head = document.getElementsByTagName('head')[0];
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://cdn.bootcss.com/eruda/1.5.2/eruda.min.js'
            head.appendChild(script);
            script.onload = function () {
                eruda.init();
            }
        }

    </script>

2.2 webpack扩展器设置模板变量

在webpack打包的前提下，使用扩展器(还是叫插件)plugin加definePlugin设置变量，在模板中以ejs的语法使用该变量<%= 变量名%>，在编译时将变量替换为其他值。以此实现文件的动态引入

提示：变量值为字符串时需要外包双引号，否则会报错。空白不能用""，要用'"'+' "'（属实离谱）

以vue为例，提示：vueCli4以后，插件的使用需要包裹在configureWebpack对象内。configureWebpack:{plugins:[]}

javascript 复制代码

 ---vue.define.js---
 const { DefinePlugin } = require('webpack')
 module.exports={
  ...
  pluginsConfig: (environment = 'test', base_url = '') => [
      new DefinePlugin({
          JS_URL: environment == 'test' ? JS_URL_TEST : JS_URL_MASTER, // 这两个对象没有贴出来，需要时自行定义
          mobileAdapt: '"' + base_url + '/mobileAdapt.js' + '"', 
          debugScript:
           environment == 'test' ?   '"' +"<script src='https://cdn.bootcss.com/eruda/1.5.2/eruda.min.js'></script><script>eruda.init();</script>" +'"':'"'+' "',
      }),
  ],
  ... 
}
---vue.dev.config.js---  开发环境下的配置就不写了
---vue.proc.config.js---  
const vueDefined = require('./vue.defined')
let publicPath = xxx
module.exports = {
    ...
    publicPath: publicPath,
    configureWebpack: {
        plugins: vueDefined.pluginsConfig('test', publicPath), // test-测试环境资源变量、master-正式环境资源变量
    },
  	...
}

在模板文件中使用变量

xml 复制代码

---- template.html----
<head>
<title><%= title%></title>
<script src="<%= JS_URL.xxx %>"></script>
<%= debugScript %>
<head>

思考：有方式2好像就不用去考虑方式1让后端配置变量了。另外plugin好像可以直接实现插入模板文件，但是截止写这篇文章时还没怎么用过，等会熟练使用了再回来补充

3.截图示例

懒得本地写个文件，直接用代理往掘金里面注入调试文件并初始化（过程不重要）

像上图所示，eruda跟pc的控制台在某些方面有相同的功能，比如支持元素的选择查看、控制台打印以及查看请求和响应。

使用whistle进行调试

1.来自官网的介绍

whistle是一款基于Node实现的跨平台web调试代理工具，采用类似配置系统hosts的方式，支持查看、修改请求及响应、作为http代理服务器、替换线上文件或往服务端页面注入文件等功能...

官网链接：wproxy.org/whistle/

2.安装流程及校验

详细的安装步骤在官网有大体流程为

npm 全局安装whistle
启动whistle
chrome的SwitchOmega设置本地代理，不设置的话无法访问。
根据终端提示的地址，任选一个访问，（用chrome浏览器打开）
在左侧菜单栏的Rules中配置规则

3.代理设置及可能遇到的问题

工具：chrome 插件SwitchOmega

配置whistle专用的代理

新建一个情景模式，命名为whistle。代理设置代理服务器地址和端口号（同whistle启动后返回的地址）
当科学上网时可能出现的情况及处理方法

若不设置自动代理或是指定域名不走whistle代理的话，会出现当所有域名都走了whislte代理，此时科学上网的代理会失效，除非每次都手动去切换为使用系统代理。

解决方法：
1. 找到你科学上网软件的配置文件，找到其端口号。新建一个情景模式，代理端口为该端口号
2. 配置自动切换场景模式，默认使用直接链接，制定域名使用对应的情况模式。
当某个域名需要科学上网且不在配置列表内时，手动加入该域名或右上角图标一键添加

4.根证书的安装及设置

必要性
需要抓包及测试的服务端都是https服务，所以需要下载并使用根证书才可以进行正常的抓包。
下载根证书
点击本地代理服务页导航栏的https选项卡，勾选全部，下载到指定文件夹
添加并信任
双击根证书，进入证书管理界面。将钥匙串添加到系统，此时证书处于不被信任状态。
在证书管理界面，钥匙串访问->系统钥匙串（左侧）->系统（左侧）->找到带有whistle字样的证书，双击，设置始终信任
检查
随意打开一个网站，在本地代理服务页中找到任意一个请求，双击查看右侧控制台查看是否显示请求和响应

5.移动端调试

5.1 手机需要安装证书

方法一是电脑端的证书发送给手机安装并设置信任

方法二是先设置热点代理，代理地址为wihstle服务启动时返回的ip地址，端口号为服务启动时设置的端口号。然后扫码下载证书，安装、设置信任

5.2 热点代理配置

手机连接电脑热点，代理地址为wihstle服务启动时返回的ip地址，端口号为服务启动时设置的端口号

5.3 验证是否链接成功

手机访问任意网页，查看wihstle服务端控制台结果。查看网络请求

5.4 在pc上通过weinre（插件）控制移动端上的dom元素

1.wihstle 配置中添加目标域名 weinre:// 自定义名称 eg: www.baidu.com weinre://test

2.手机访问目标域后,通过通过工具栏或是地址local.whistlejs.com/weinre/clie...访问weinre下的自定义名称.截图如下

6.一些方便调试的工作

6.1配置抓包条件

不配置时会返回所有的请求，多数是调试过程中不需要用到的

6.1.1.工具栏筛选--范围类筛选

exclude Filter是不包含特定项，支持通过关键字或正则表达式匹配URL(pattern)、请求方法（m:pattern）、客户端IP（i:pattern)、请求头内容（h:pattern)，请求头的host字段（H:pattern)，多个条件用空格或换行符隔开

include Filter是仅包含特定项，写法规则同上。设置后不会作用于已请求项，但会作用于后续请求，通过清除控制台和刷新页面来清除干扰项

请求类型只能通过关键字来筛选，没有t:xx语法限制请求类型。关键字筛选可能会同时过滤到其他请求。image 可以过滤掉所有图片类型的资源，但也可能把含有image字样的接口过滤掉

用法举例

sql 复制代码

Exclude filter
image   ---关键字匹配，添加后去除所有的图片请求记录和含image字样的接口请求记录
m:CONNECT  -- 请求方法匹配，过滤掉请求方法为CONNECT的请求

Include Filter
xxx.xxx.com ---关键字匹配 ，仅包含指定域名的请求

6.1.2.底部筛选框筛选----多用于指定某个接口

6.2 文件替换及注入

6.2.1文件替换

将线上的某个文件代理到本地文件，可以直接进行在本地调试线上环境，服务端为https服务的话需要事先安装根证书。

本地代理服务中增加配置

ruby 复制代码

https://pss.bdstatic.com/r/www/cache/static/protocol/https/amd_modules/@baidu/pc-tts-player_4205f55.js file:///Users/xxx/%E5%8D%97%E6%96%B9%E7%BD%91%E5%89%8D%E7%AB%AF/server/whistle/localResource.js

localResource.js 复制代码

debugger

console.log(111)

打开www.baidu.com访问查看效果，需要清缓存

2.2文件注入

往指定服务端页面注入特定文件，与上面不同的是不会修改原有文件，常用于在线上环境增加调试代码，方便移动端调试。

方法详见官方文档，有响应内容前、后注入，响应内容替换等功能