我的GitHub
0%

无星的前端之旅(十六)——移动端调试技巧

背景

常见的需求,开发移动端h5,在移动端浏览器或者移动端app上渲染。

前端不知道怎么在移动端调试,移动端不知道怎么调试网页。

经常出了问题不知道是找移动端解决还是找前端解决。

好了,我们举个例子:

公司小改改写了个页面,要在app的webview里加载,本地调试杠杠的,自己手机杠杠的,但是一上特意准备的测试机,就白屏了。

我号称是公司移动端里最会写前端的,前端里最会写移动端的。只能露一手了[LetMeSee]

如果你是前端,可以找个客户端,按此方法操作打开调试控制台,由你来调试网页上的问题

如果你是个移动端,你就可以按照这个方法,为前端同学准备好调试环境,剩下的网页调试工作交给他们

如何查找问题

其实有两种方式可以去做。

一.VConsole

VConsole:如其描述,是一个轻量、可拓展、针对手机网页的前端开发者调试面板。

感谢腾讯,开源了这么好的一个工具。

但我总觉得,看日志不如打断点来的舒服。

二.远程调试

移动端分为iOS和Android,所以我会分别演示,如何在两端上进行远程调试。

iOS篇

1.准备:

mac,iPhone或iPad。

2.使用移动设备加载网页

比如我这举个例子,我使用app的webview加载页面

3.png

3.开启safari的开发模式

Safari-偏好设置-高级-在菜单栏显示开发

1.png

2.png

2023-10-09更新

iOS16.4以后,需要代码开启isInspectable

1
2
3
4
5
6
// OC
if (@available(iOS 16.4, *)) {
webView.inspectable = true;
} else {
// Fallback on earlier versions
}
1
2
3
4
5
6
// Swift
if #available(iOS 16.4,*) {
webView.isInspectable = true
} else {
Fallback on earlier versions
}

4.打开开发菜单,点击对应网页地址

4.png

就可以看出,safari的控制台就跳出来了

5.png

无论是想打断点还是打印,就都可以用了

6.png

Android篇-真机

1.准备:

梯子,Chrome内核的浏览器(其实是指就是Chrome或者新版Edge),一部安卓设备,一根usb线

2.打开梯子,并且添加google所有域名fq(看不懂的就开全局fq)

3.用usb线链接电脑和手机,并打开开发者模式

怎么打开开发者模式,自己百度,检测手机是否链接上了电脑可以使用adb命令

1
adb devices

输出列表里有设备就算连上了

7.png

4.用安卓chrome浏览器访问地址

上面使用了app的webview,这里我们就演示一下浏览器

安卓设备使用chrome浏览器访问地址

(目前使用其他浏览器暂时无法进行远程调试,但如果是app的webview是一定可以的)

5.打开chrome网页

随便打开一个网页,F12,打开调试控制台

在从更多工具中,找到remote devices

8.png

下方会弹出一个远程设备的窗口,点击其中的网页

9.png

左侧会弹出已连接的设备和设备Chrome浏览器访问的网页

10.png

点击inspect,会弹出一个手机端的控制台调试工具(此过程会根据不同的设备webkit内核版本下载不同依赖,因此需要梯子fq)

11.png

接下来无论是想打断点还是打印,就都可以用了。

Android-模拟器

1.准备

同上1,2,3步

2.使用安卓模拟器中App的Webview访问地址

这里我们用app的webview来演示一下

12.png

3.chrome调试

这时你会发现,因为是模拟器,所以调试工具中,根本没有remote devices

因此,我们直接访问这个网址

chrome://inspect/#devices

13.png

14.png

这里额外推荐一下

安卓调试,没有梯子,可以使用edge,也是chromium相同的内核,访问地址edge://inspect/#devices也是可以调试的

PS

我司小改改遇到的问题是我们某个库打包没转ES5,在低版本的浏览器上报错了引起的,经过Babel转换后已经正常运行了
无星的前端之旅(十五)——babel初探

参考

Chrome DevTools

我是阿星,阿星的阿,阿星的星!