zoukankan      html  css  js  c++  java
  • 混合开发h5调试

    我们在做混合开发时,一般在开发H5页面时,大多都是使用谷歌浏览器的手机模式开发调试,但其与真机还是有差别的

    比如:border-radius:50%在安卓手机中不圆,以及软键盘弹起遮挡输入框,等一系列机型兼容性问题,需要反复调试

    我们就可以将手机与电脑连接,在电脑上本地开发调试,在手机浏览器里实时预览

     一、电脑端本地起项目:npm run serve

     二、关闭mac电脑防火墙,系统偏好设置 =>  安全性与隐私 => 防火墙  (window电脑自行百度)

     三、原生数据线连接电脑和手机(较麻烦),或者连接同一个局域网(这个最方便)

     四、手机浏览器直接访问:http://192.168.2.119:8080/     (192.168.2.119是电脑ip地址,可通过ifconfig查看)

    效果图:

    H5有些逻辑是需要与底座(原生ios或android)进行交互通信的,这样的话在手机调试模式(PC浏览器),是无法正常开发交互的,需要在app里调试

    或者需要排查线上环境的bug,此时需要像PC浏览器一样打开控制台,来调试

    解决方案:vconsole调试工具

    官方github地址:https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

    官方demo:http://wechatfe.github.io/vconsole/demo.html

       特性:

      1. 安卓和ios的手机都可以用

      2.H5页面(包括混合式App的内嵌H5页面)

      3.查看console日志、网络请求、页面element结构、cookies、localStorage、sessionStorage

      4.console的相关打印可以直接使用,插件还提供其它多样化的输出信息

    引入方式:2种

       1:直接在index.html里使用script引入

    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
        new VConsole();
    </script>

      2:在main.js里引入

    npm install vconsole
    
    // 在main.js中
    import VConsole from 'vconsole' //引入
    new VConsole() //初始化

     效果图:

     

    如果是线上的正式环境,打开vconsole调试工具就不太好了(不过可以通过判断用户,只给自己加vconsole,哈哈

    如果只是想排查接口数据的话,可以通过抓包工具

    这里介绍 Fiddler Everywhere 

    官方下载源:https://downloads.getfiddler.com/win/Fiddler%20Everywhere%201.5.1.exe

        特性:

    1、fiddler everywhere 和 fiddler 功能都差不多,但是比 fiddler 多了一些postman的功能

    2、运行在任何浏览器,任何系统、跨平台(Windows、Mac、Linux)的一款Web调试代理工具

    3、记录了计算机和Internet之间的所有HTTP(S)通信,可以检查和编辑通信,并Mock请求以及修改响应返回的能力

    一、首先下载安装,然后注册账号

    (打开后,默认会要求登录Telerik家的账号,如果没有,还是建议注册一个,这个账号的一个主要作用,是能同步你的数据,后面会发挥作用,建议不要拒绝)

     

     二、开启https,设置代理端口号

    (默认是不开启HTTPS抓包的,因为HTTPS抓包需要信任一个中间证书才行。前往右上角的设置图标,进入设置页面)

      

     三、使手机和电脑连接同一个局域网,修改手机无线网高级设置的代理 

                             

     四、此时我们可以看到 fiddler everywhere 可以出现所有我们手机web发送的请求(包括静态资源请求)

    效果图:

    1. 侧边栏,主要用于是存放session、request的区域。(类似于postman)
    2. 拦截请求以及发送请求的区域。
    3. 用于显示请求和响应以及自动处理请求的区域。

    扩展学习:

    在Android手机上对https请求进行抓包     

    深入浅出新一代跨平台抓包&调试利器Fiddler Everywhere

    为什么如此安全的https协议却任然可以被抓包呢

  • 相关阅读:
    windows中dos命令指南
    HDU 2084 数塔 (dp)
    HDU 1176 免费馅饼 (dp)
    HDU 1004 Let the Balloon Rise (map)
    变态杀人狂 (数学)
    HDU 2717 Catch That Cow (深搜)
    HDU 1234 开门人和关门人 (模拟)
    HDU 1070 Milk (模拟)
    HDU 1175 连连看 (深搜+剪枝)
    HDU 1159 Common Subsequence (dp)
  • 原文地址:https://www.cnblogs.com/caofeng11/p/14821672.html
Copyright © 2011-2022 走看看