总结下移动端调试的一些方法

Posted 2022-06-08 zqw111

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了总结下移动端调试的一些方法相关的知识，希望对你有一定的参考价值。

说起网站调试，pc页面和h5页面，假如电脑上能够重现的，都不在话下，调试起来都蛮简单。仅仅需要fiddler一个抓包工具，把线上压缩代码替换成本地无压缩代码就可以了。具体步骤我后面可以详细介绍。但是，仅仅是某款手机重现，其他手机没有问题的情况下如何调试？hybrid页面如何调试呢？这篇文章简单总结下我常用的调试方法。

一、chrome的inspect调试方法

这个调试仅仅是针对安卓系统，可以调试hybrid,也可以调试h5，但是ios系统就无能为力了。我很喜欢用这种方式调试android手机。用inspect可以在chrome中模拟一个手机中的webview，你可以在chrome中调试你手机中的代码。

步骤如下：

1、android手机通过数据线连接pc,打开android手机的“允许调试”功能（usb调试）

一般是在手机的开发者工具里面，有的手机连续点击几次版本号可以出现，具体可以网上搜索一下。如下图：

技术图片

点击允许USB调试:

技术图片

(有些手机链接不上，需要安装一些驱动，可以下载PP助手，安装手机驱动，pp助手链接成功，chrome应该就可以链接成功了！)

2 . chrome地址栏里面输入“https://www.jkys120.com"

3 . 手机（h5或者app扫描打开指定页面）看到如下画面就可以真机调试了：

技术图片

二、vConsole或者eruda调试

这两种方式都是通过js代码注入来完成的。

vConsole如下图：技术图片

vConsole 说明文档：

引入方式可以如下：

(function() 
    if (!/vconsole=true/.test(window.location) ) return;//判断浏览器有误参数
    var script = document.createElement(‘script‘);
    script.src = "//pages.c-ctrip.com/amsweb/tools/vconsole.min.js";
    document.body.appendChild(script);
    script.onload = function() 
       var vConsole = new VConsole();
      console.log(‘Hello world‘);
    
)();

eruda调试如下图：

技术图片

eruda 说明文档

(function() 
    if (!/eruda=true/.test(window.location) ) return;//判断浏览器有误参数
    var script = document.createElement(‘script‘);
    script.src = "//pages.c-ctrip.com/amsweb/tools/eruda.min.js";
    document.body.appendChild(script);
    script.onload = function() 
        eruda.init()
    
)();