• H5调试


    在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之后可用,即可方便样式的调试

    补充:zhongbao-frontend中PC调试H5页

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

    fis3 server start (-p 8081) //默认端口号8080,可以-p换端口

    就可以直接访问页面,eg:

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

    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手机抓包

    1、手机设置代理,代理到自己电脑的ip,端口号8888;

    2、打开charles,弹出窗口选择allow

    3、可以开始抓包了

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

    可以看到NA的数据

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

  • 相关阅读:
    JavaScript框架设计 一、种子模块
    一、微服务架构概述(spring cloud与docker学习)
    C++之socket编程
    原定于6日的维护延期
    网站将于8月5日或6日进行维护
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
  • 原文地址:https://www.cnblogs.com/sameen/p/7236792.html
Copyright © 2020-2023  润新知