mac调试h5页面

贝壳大前端
1,063 阅读4分钟

本文作者：李佳佳

背景

混合开发中，需要在app端访问h5页面(基于React),工单反馈，在vivoV5中打开是空白页。在IOS系统上没有问题，在部分Android系统上会出现这个问题，但是直接使用手机自带的浏览器是没有问题的。

环境准备

1.mac一台
2.vivo手机一台，这里使用的是vivoV3MaxA，系统5.5.1(不能正常显示的手机)
3.能正常显示的手机一部(什么型号都可以)
4.下载android Studio，并安装Android SDK 
5.设置好SDK环境变量

mac 配置Android SDK环境

1.下载Android Studio并安装 2.打开Configure,打开default Project Structure,找到SDK的安装路径 3.根目录下创建 .base_profile，如果有则打开

touch .bash_profile
Or
open .bash_profile

4.配置环境变量

export PATH=${PATH}:/Users/lijiajia/Library/Android/sdk/platform-tools
export PATH=${PATH}:/Users/lijiajia/Library/Android/sdk/tools

5.保存后重启终端，检查adb version,如果出现一长串配置，就说明配置成功

保存移动端信息

1.打开终端，进行如下操作：

system_profiler SPUSBDataType //查看设备信息的命令

可以看到设备信息，将设备信息中的vendorID保存下来

2.查找～/.android目录下的adb_usb.ini文件

cd ~/.android
ls

如果没有adb_usb.ini文件，使用如下命令新建一个

touch .adb_usb.ini

3.然后将Vendor ID 写到adb_usb.ini中，保存退出

vi .adb_usb.ini

4.关闭并重启adb服务

adb kill-server //关闭adb服务
adb start-server //重启adb服务

USB数据线连接mac

打开Chrome自带的调试移动端的网页chrome://inspect/#devices，就可以看到我们的手机，可以开始进行调试了,请求APP内的webview页面，就可以看到网址，打开inspaect，就可以启动如下devtools

这个过程，会出现很多坑，下面一一列出：

1.如果没有显示设备列表，查看电脑是否打开了adb服务。
2.如果网页中只显示设备，不显示请求的网址，需要看手机的Chrome和mac的版本是否一致；
3.检查电脑是否开了fileTransfer,如果服务启动，也是看不到请求地址的，需要关闭服务；
4.如果inspect选项之后，打开的是http404错误，那么恭喜你，这个坑好多人都遇到了，这表示你需要翻墙；

做完以上部分，基本就可以看到我们熟悉的web调试页面了。但是，如果问题这么好解决，就不回有这篇文章出现了，环境搭好了，问题来了：

没有任何报错信息，就是H5页面不展示

考虑了兼容性问题，看到页面没有出现Route渲染的部分，考虑是不是不兼容React-Router,在devTools的控制台中，输入:

location.href='h5页面的地址'

观察到，使用了高版本的React-Router的h5页面也能打开，所以排除React-router的问题； 因为系统版本比较低，考虑到webView版本的问题，查看Chrome版本为39，这是很低的版本了，所以，用browserslist做了兼容低版本浏览器，browserslist是不同的前端工具之间共用目标浏览器和 node 版本的配置工具

 "browserslist": {         //数组对象
    "production": [
      ">0.2%",            //全球超过0.2%使用的浏览器
      "ChromeAndroid >= 39",
      "Chrome >= 39"      //Chrome版本大于39
    ],
    "development": [
       //向前兼容一个浏览器版本
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

然后，发了个测试包出来，还是不行。然后试了所有版本的客户端，发现都会出现这个问题，不同的是，每次重新安装之后的第一次访问都会出现获取token失败，晚上就一直在想，会不会是JSBridge出错呢。

然后就去看了devTools中的applicatin,但是，application中什么都没有，而且报错的H5页面中，没有application选项。

后来了解到有些低版本的浏览器都没有办法兼容ES6的的某些特性。项目中，打包过程中使用了Babel。Babel默认的只是转换了JS语法，对于ES6的新API，都不会进行转换，比如h5中我们使用了import React from 'react'等。然后在项目中安装了core.js,它提供了es5、es6的polyfills，包括promises、symbols、collections、iterators等。

1.下载core-js
  npm install core-js --save
2.在项目的入口文件引入如下两个包
  import 'core-js/fn/map'
  import 'core-js/fn/set'

打出测试包，在真机上测试，大功告成！

PS：推荐一个兼容性的查询网站，Can I use

avatar
文章
阅读
粉丝