zoukankan      html  css  js  c++  java
  • mobile web页面调试方法

    此文已由作者张含会授权网易云社区发布。

    欢迎访问网易云社区,了解更多网易技术产品运营经验。

    开发过程问题排查

    1. Chrome Emulation关键词:使用方便


    • 模拟各种设备尺寸、像素比、自定义userAgent

    • 模拟触摸、经纬度、重力感应

    • 模拟4g网络等不同类型的网络


    1. browser-sync


    关键词:提升开发效率 安装步骤: npm install -g browser-sync // 以当前目录为根,启动一个静态服务器,文件修改页面自动刷新 browser-sync start --server --files "css/.css, .html" // 设置代理 browser-sync start --proxy "127.0.0.1:8000/buyer" --files "css/.css, .html"


    线上问题排查

    1. Charles 的Map Local工具 关键词:快速定位问题

    2. Weinre 关键词:简单易用、专治疑难杂症


    使用步骤如下:

    1. 安装 npm install -g weinre

    2. 运行 weinre --httpPort 8080 --boundHost -all-

    3. 调试 方法1:

               <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

      将localhost替换为机器电脑IP,插入需要调试的页面。 ps:如果是线上或者测试环境页面可以用charles Map Local本地修改。

               方法2:
               手机chrome浏览器,添加书签,长按可以编辑书签,为:
               javascript:(function(e){e.setAttribute("src","http://localhost:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
               访问页面之后,点击书签。
    4. 手机访问 使用charles代理到本地,访问需要调试的页面。 可以看到连接的target



    免费体验云安全(易盾)内容安全、验证码等服务

    更多网易技术、产品、运营经验分享请点击


    相关文章:
    【推荐】 网易七鱼 Android 高性能日志写入方案

  • 相关阅读:
    sql行列互转
    用户角色权限设计思路
    树节点类型数据的Datatable转Json
    [C#]最简单的Base64加密解密
    WEB打印控件Lodop(V6.x)使用说明及样例
    js代码 设为首页 加入收藏
    Json字符转化成对象
    C++函数返回值为const
    7.双指针(two pointer)
    线程同步与锁
  • 原文地址:https://www.cnblogs.com/zyfd/p/9895731.html
Copyright © 2011-2022 走看看