H5调试

Posted 2020-09-29 Sameen

在PC上的调试

问题：需要调试样式，没有数据不方便调试。

方案：本地mock。

EG:

chrome书签管理器 →将下面代码存书签里，如下图：

 

javascript: void function() {var d = new Date();d.setFullYear(d.getFullYear() + 1);document.cookie=‘FIS_DEBUG_DATA=4f10e208f47bfb4d35a5e6f115a6df1a;path=/;expires=‘ + d.toGMTString() + ‘‘;location.reload(); }();

开发h5页时，打开所存的mock书签，填入自己mock的数据，render之后可用，即可方便样式的调试

Chrome调试安卓机上的H5页面

准备：

(1)安装Chrome 32或者之后的版本

(2)使用USB线将安卓机和电脑连接起来

(3)打开 USB 调试选项

在安卓设备上，进入设置>开发者选项>打开USB调试 (注意：在安卓 4.2 及以后的版本中，默认情况下开发者选项是隐藏的。要启用开发者选项，选择设置>关于手机然后点击版本号7次。)

 

在chrome输入chrome://inspect/#devices

inspect要调试的页面，然后就可以利用其审查元素、log数据、查看请求了。

EG:

 

 

适用安卓机和iPhone机 - 利用GapDebug调试

直接安装之后，用数据线连接手机和电脑，手机允许GapDebug后即可调试。

优点：

跨平台，应用是个web页面，同时集成了Safari和Chrome的调试工具，可运行在windows和mac平台上

依赖少，只需一个Chrome就能使用Safari和Chrome的调试工具
统一管理，在同个界面显示了ios设备和android设备及其调试页
一些实用小功能，如截屏、设备控制、app安装等

适用范围
iOS设备和4.4以上版本Android设备（及其模拟器）上的webview和网页。