持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

前言

当我们开发h5页面，对h5页面进行调试的时候，肯定不如调试浏览器页面舒服，不能方便的打开控制台看打印，不能方便的修改元素的属性等等。。。

下面就结合上面情况来解决在h5页面调试中的痛点
使用到的工具有charles 和 whistle 以及 chrome inspect等
还有一些内嵌控制台的方式比如 vconsole eruda等

本文只涉及工具的安装，配置方式，具体调试，后面一篇中会详细说明，比如弱网测试，代理接口返回，代理状态码，本地代码代理线上环境测试等。。。

工欲善其事必先利其器

我们先不管怎么调试，先把所有工具都安装配置齐全

charles

先看下耳熟能详的charles 安装配置方式

电脑安装证书

以ios手机为例，想要抓包手机发出的请求或者https请求，我们要先给电脑装上证书

注意：证书最好添加到系统中

然后给证书添加信任--改成始终信任

手机配置代理和信任

配置wifi代理
charles拿到本地ip地址

手机到wifi设置，配置wifi代理，方式为手动
服务器就是刚才拿到的ip地址，端口号8888,然后保存

此时charles会弹窗询问是否允许接入，选择同意

2. 获取证书
ios手机用 safari 安卓手机用 chrome，访问网址 chls.pro/ssl

下载证书后
ios 手机 - 设置 - 通用 - VPN与设备管理 - 安装下载的描述文件
设置 - 关于本机 - 最下面证书信任设置 - 给证书打开信任

安卓直接找对应证书安装设置即可，（如果使用chrome 应该可以点击证书直接安装，其他浏览器就比较费劲了）

此时我们随便打开一个网页就能看到所有的http和http上请求已经能拿到了

问题？

无法抓包

检查是否在同一局域网，检查是否正确安装并信任证书
如果都配置正确，打开

增加443端口或者全部*
3. 检查过滤，全部配置**

whistle 安装和配置

基于Node实现的跨平台web调试代理工具

安装

npm install -g whistle

常用命令

// 启动whistle: 
w2 start
// 重启whsitle:
w2 restart
// 停止whistle:
w2 stop
// 调试模式启动whistle
w2 run

执行 w2 start hou 打开默认网址 http://127.0.0.1:8899/

也是要安装证书

同理手机配置代理-手机直接扫码即可。然后和charles 一样按照步骤安装
手机wifi配置代理时候，端口从8888改成8899
此时接口也能顺利的抓包了

chrome inspect

只适用安卓手机首次需要科学上网
电脑访问网址chrome://inspect/#devices
然后安卓手机设置打开开发者模式，然后usb线（比无线稳定）连接电脑，然后在手机弹窗提示中信任。此时打开h5页面就能看到

此时点击 inspect，会打开一个新页面

可以像在浏览器里面一样顺利的调试dom以及样式了！

simulator

mac上的ios模拟器，需要xcode
可以调试不同版本，不同机型上的h5 的展示
对于前端，可以只关注页面在safari里面的样式展示方面，不用启动xcode 安装调试安装包等

安装xcode 后 Xcode->Preferences

这里安装不同的ios版本，然后去执行命令open -a Simulator或者全局搜一下 Simulator 文件，然后拷贝到docker栏，就能直接通过快捷方式打开了

可以选择不同机器和ios版本

可以通过打开localhost本地页面查看样式渲染情况，基本和真实手机一样，亲测某些机型的样式bug，只要机型一致也能完全复现

h5内嵌控制台

用的比较多的是 vconsole eruda等只需要在html文件引入对应的cdn文件并增加依赖即可

注意增加环境判断

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <title>全城热恋</title>
    <% if (NODE_ENV !== 'production') { %>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
      var vConsole = new window.VConsole();
    </script>
    <% } %> <% if (NODE_ENV !== 'production') { %>
    <script src="https://cdn.bootcss.com/eruda/2.4.1/eruda.min.js"></script>
    <script>
      eruda.init();
    </script>
    <% } %>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

vconsole

eruda

两者的区别不大
vcosole 更新比较频繁，但是功能比较单一
eruda 包比较大，基本没有更新，打印更清晰一点
具体区别有兴趣可以自行对比一下

结语

以上的工具可以根据情况，单独使用，也可以结合几种工具来找到问题的复现路径

具体的调试方式和操作将在下篇文章中具体说明～

【调试一下！】怎么舒服的调试h5页面（一）- 工具安装

前言