H5调试

时间 2019-12-01

标签 h5 调试繁體版

原文原文链接

在PC上的调试

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

方案：本地mock。php

EG:java

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

 
          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

补充：zhongbao-frontend中PC调试H5页windows

fis3 release -w // 编译产出模板文件api

fis3 server start (-p 8081) //默认端口号8080，能够-p换端口服务器

就能够直接访问页面，eg：cookie

http://127.0.0.1:8080/zhongbaofrontend/page/mobile/insuranceapp

fis3 server open // 查看编译后的文件

fis3 server restart

fis3 server stop

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和网页。

设置代理

在移动端设备中配置http/https代理，将线上资源代理到本地

直接设置设备的代理服务器为本机, 利用Fiddle或Charles 截获请求查询数据，排查异常信息

charles手机抓包

一、手机设置代理，代理到本身电脑的ip，端口号8888；

二、打开charles，弹出窗口选择allow

三、能够开始抓包了

eg: 打开百度外卖app->订单

能够看到NA的数据

上图中，22是答谢骑士按钮，9是再来一单的按钮