前端移动端网页调试各种场景与技巧

发表于 | 分类于

网页调试是前端开发必备的技能，本文总结了移动端H5网页调试的大部分场景。篇幅较长，阅读完大概花10分钟左右。

讲解涉及到的调试场景：

  • React、Angular等框架调试方式
  • 如何调试手机页面CSS和JS，怎么像PC浏览器那样断点调试呢？
  • iOS网页怎么调试样式？能断点JS吗？
  • 手机App网页怎么调试？例如微信网页，能断点JS吗？
  • 支付宝App里面的H5怎么调试呢？
  • 小程序里面的H5页面(web-view)怎么调试？

本文将告诉你，以上所有问题都有方法和工具解决。主要涉及到以下几个工具。看完本文如果你有更好的方式欢迎一起交流。😊

  • Chrome DevTools，谷歌浏览器调试工具
  • chrome://inspect，远程调试Android手机H5页面
  • 微信X5内核调试，开启微信网页调试
  • weinre，网页调试工具
  • Mac上Safari开发工具调试iPhone手机，Simulator模拟器调试不同版本iPhone

Chrome DevTools

前端开发可使用的浏览器有很多种，而Chrome浏览器和其自带的Chrome DevTools调试工具无疑是很强大的。它的功能有很多，Elements元素查看、Console控制台、Sources资源文件、Network网络请求等等。相信有前端经验的同学已经不陌生。网上资料一搜一大堆，所以这里不准备讲了。这里给大家推荐几个实用的功能。

Source Map 功能

解决痛点：前端JS代码基本都是经过压缩合并之后的，而在本地调试的时候如果直接调试合并之后的代码无疑是很头痛的，而且还得分析出对应源码是哪个文件哪一行。Source Map的出现带来了福音。

首先需要开启webpack配置文件的Source Map功能

sourcemap-webpack

webpack编译打包之后会给每个JS文件输出一个对应的**.js.map文件。

接着启用Chrome开发工具的sourcemap功能。

sourcemap-devtool

然后你就可以很愉快的在Chrome上查看JS文件未编译的源码并且断点了

sourcemap-debug

Chrome 手机模拟器

特点：

  • 适合简单移动网页调试
  • 支持模拟触摸事件
  • 模拟各种移动设备的user-agent和屏幕大小
  • 自定义user-agent，例如支付宝的user-agent，可以用来调试支付宝H5的网页授权等功能（需要先在Chrome登录支付宝）

下面提供了一些常用的user-agent：

支付宝：

1
Mozilla/5.0 (Linux; U; Android 4.2.1; zh-cn; HUAWEI G610-T00 Build/HuaweiG610-T00)   AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30   AlipayDefined(nt:WIFI,ws:360|640|1.5) AliApp(AP/9.0.1.073001) AlipayClient/9.0.1.073001 GCanvas/1.4.2.15

QQ Android：

1
Mozilla/5.0 (Linux; Android 5.1; OPPO R9tm Build/LMY47I; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043128 Safari/537.36 V1_AND_SQ_7.0.0_676_YYB_D PA QQ/7.0.0.3135 NetType/4G WebP/0.3.0 Pixel/1080

QQ iOS：

1
Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27 QQ/6.7.1.416 V1_IPH_SQ_6.7.1_1_APP_A Pixel/750 Core/UIWebView NetType/4G QBWebViewType/1

微信 Android：

1
Mozilla/5.0 (Linux; Android 5.1; OPPO R9tm Build/LMY47I; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043220 Safari/537.36 MicroMessenger/6.5.7.1041 NetType/4G Language/zh_CN

微信 iOS：

1
Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27 MicroMessenger/6.5.6 NetType/4G Language/zh_CN

React 调试扩展插件

chrome-ext-react

这是一个Chrome扩展插件，可以用来方便的调试React项目。（Chrome插件安装需要科学上网，你懂的）。

特点：

  • 直观查看React组件名称和组件结构
  • 查看React组件的属性props
  • 查看React组件的状态state，支持实时编辑调试

chrome-debug-react

AngularJS 调试扩展插件

chrome-ext-angular

特点：

  • 查看Angular组件绑定的属性，以及组件的作用域和父作用域
  • 直观的性能分析Performance，能够查看具体到某一个属性变化所消耗的时间
  • 能够查看项目的依赖文件和注入的服务service

同样安装好之后就可以使用了。

chrome-debug-angular

chrome-debug-angular-per

如果你项目使用的是Vue框架，那么在Chrome插件市场也是能够搜索到对应插件的哦，有兴趣的自己去找找，这里就不附述了。好了，Chrome DevTools就推荐这几个功能。下面重头戏来了，讲讲手机H5网页调试。

Chrome Inspect 远程调试

真实项目中往往需要真机运行查看，而手机上调试H5一直都是比较麻烦的，Chrome浏览器还有一个强大的功能，就是Chrome Inspect远程调试功能。在Chrome浏览器输入chrome://inspect就能够看到。

要求

  • Android手机（好像有个东西ios-webkit-debug-proxy也能够让iOS也支持，不过本人没试过）
  • 手机系统要大于Android4.0
  • 已开启webview调试模式的App
  • 手机USB数据线连接，并开启手机USB调试功能
  • 翻墙

满足以上几个条件就能够看到调试界面了，手机网页调试就可以爽歪歪啦~，下图是使用手机UC浏览器开发版调试的。

chrome-inspect-devices

chrome-inspect-debug

这个工具很强大，支持JS断点调试以及绝大多数Chrome DevTools一样的调试功能（不支持Chrome扩展）。不过本人在使用的时候以及身边的朋友反馈时经常会发现为什么我的连不上？、为什么inspect打开一片空白？、为什么我的微信H5无法调试？等等问题。

根据我的经验以及多次尝试我发现，打开空白基本都是需要翻墙造成的。而显示不了手机设备或者连不上一般主要有两个原因，要么是手机Android版本太低，要么USB驱动或者数据线有问题，我遇到的一般都是后者。至于为什么有的人微信H5无法调试，这个得说到Android中Webview的debug调试模式了。

webview之debug模式

也就是下面这段代码（这是Android开发中的Java代码哦，不是JS）

1
2
// 开启webview调试
WebView.setWebContentsDebuggingEnabled(true);

为了安全考虑，市场上大部分App的debug模式是关闭的，无法调试里面的webview页面。而有的App默认是开启的，例如：手机UC浏览器开发版。而微信里面的webview调试也是默认关闭的，可以用下面的方法开启。
在微信里面访问http://debugx5.qq.com/这个网址，会打开下面这个页面，将里面的调试模式打开就行了，开启之后一定要重启微信。然后就是打开chrome://inspect、翻墙、连接手机这几个操作了。最终妥妥的出现了你需要的调试界面了。^_^

wx-x5

weinre 调试

上面说的Chrome Inspect调试方法是基于Android手机的，那iOS怎么办呢？支付宝内嵌H5怎么办呢？未开启debug模式的App怎么办呢？下面就说说weinre调试大法，这个工具支持大部分手机，无论你是Android、iOS还是WindowsPhone。

组成部分

  • DebugServer，核心组件，运行在服务端（本地启动的），负责与另外两部分通信。
  • DebugClient，webkit核浏览器，与DebugServer通信。展现调试界面，允许你修改DOM，查看网络信息等。
  • DebugTarget，待调试的页面，需要在页面中嵌入一小段JS。它将通过XHR方式与DebugServer通信，进行调试信息的收发。

weinre

特点

  • 无需USB连接设备
  • 基本支持任何手机移动端webview
  • 支持页面样式、console控制台、network以及本地storage查看和调试
  • 不支持JS断点调试 (ㄒoㄒ)~~

安装 weinre

1
npm -g install weinre

启动 weinre

1
weinre --httpPort 8080 --boundHost 10.26.192.67

注意：boundHost参数对应的就是你电脑的IP，端口为8080。

然后你就可以通过电脑浏览器打开http://10.26.192.67:8080/调试页面了。

weinre-page

首先手机的网络和电脑的网络要在同一个网段（连接同一个WIFI或者电脑分享WIFI给手机使用）。然后在需要调试的页面插入weinre调试JS代码。

下面案例中，用支付宝打开了一个H5页面。

查看元素

weinre-debug-element-dev

weinre-debug-element

打印控制台

weinre-debug-console
weinre-debug-console-dev

调试界面是不是很熟悉？哈哈，和Chrome调试工具差不多呀，从此能愉快的写代码了。

如果你没有成功连接，一点要注意你电脑上防火墙是不是把weinre启动端口屏蔽了。

iOS手机也是一样的使用方式，这里就不演示了。不过weinre工具有一个功能没有，那就是JS断点调试，实在很遗憾。Android手机能用Chrome Inspect实现JS断点调试功能，那么iOS手机怎么办呢？某些调试需求下可能真的要用JS断点才能排查iPhone下的问题，这就有点麻烦了，不过还是有方法能够解决。

iPhone断点调试JS

如果你有要在iPhone Safari上断点调试JS的需求可以了解看看。

Safari调试

首先你得需要一台iPhone和一台Mac，用数据线将iPhone和Mac电脑连接，并进入iPhone设置中心，将Safari的JavaScript调试打开，如下图：

safari-js

然后将Mac上的Safari浏览器打开，选择开发 -> iPhone，然后就出现调试界面了，你就可以在iPhone上也能断点调试JS了。

safari-debug

在实际项目开发中，前端还经常会遇到不同iPhone手机网页兼容性问题。有时候得借手机来重现，排查效率和开发体验往往大打折扣。

Simulator模拟器

而Mac电脑上有一个工具叫Simulator模拟器（需要先安装Xcode），可以模拟调试多个版本iPhone手机，还可以配合Safari来调试页面。Simulator模拟器可不是像Chrome模拟器那么简单，Simulator除了不能直接安装iPhone软件功能外，基本可以算是真实的iPhone了，原生iOS开发人员也是使用此模拟器协助开发的。对于没有iPhone手机的朋友，调试H5可是很方便的。

如下图，是我电脑上Simulator模拟器以及所支持的iPhone手机版本。

simulator
simulator-devices

作为前端用的最多的就是模拟器里面的Safari了，基本和iPhone手机上的Safari一样。

SSH 隧道代理调试

虽然以上能满足绝大多数调试场景，但是偶尔会遇到这样的调试场景：某些 APP 由于安全限制，无法使用局域网代理，无法使用 IP 的形式访问页面，也无法使用 Android 的 webview 调试。也就是说上面的所有方法都没法用了，这咋办呢？仔细想想。。。

最后发现：weinre 调试是基于局域网的，那么如果我把 weinre 服务部署在公网，能通过域名的形式访问不就可以了嘛。

例如，以前局域网的形式使用 weinre：

1
<script src="http://10.26.192.67:8080/target/target-script-min.js#anonymous">script>

现在，域名的形式（伪链接）：

1
<script src="http://test.com/target/target-script-min.js#anonymous">script>

这样不管你在哪个 APP 里面的 H5 都可以使用 weinre 调试了。但是这样有一个问题，那就是安全性，将 weinre 直接部署在公网服务器上安全隐患是很大的。最后想了下，一个折中的方案是使用 SSH 隧道代理，为什么是折中的方案，因为没有绝对的网页安全。使用隧道代理后，别人访问 http://test.com 上 weinre 服务的时候访问的其实是我本地启动的 weinre 服务，这样在服务器上就无需安装 weinre，只需要配置下域名和端口映射就行了。下面是我本地隧道代理的使用截图，使用的是 Mac 下的 SSH Tunnel 软件。

意思是将服务器上的 8888 端口对应的服务转发到本地的 8080 端口启动的 weinre 服务。

ssh-remote

nginx 配置如下：

1
2
3
4
5
6
7
8
server {
    listen       80;
    server_name  test.com;

    location / {
      proxy_pass http://127.0.0.1:8888;
    }
}

其实 SSH 隧道代理也可以用于调试 NodeJS 服务，有兴趣的可以深入了解看看，关于 SSH 隧道代理的详细了解可以查看这个链接。

总结

前端开发调试基本是每一个前端都会遇到的问题，各种工具的产生就是为了解决对应的问题。当然，随着技术的发展，以后可能会有更方便的方式来调试前端。如果有问题欢迎一起交流 😊。

参考链接