移动端开发调试工具

article/2025/9/15 3:55:08

1、抓包工具CharlesFiddler

平时只用抓取各种网络,需要设置手机的wifi代理
推荐指数2颗星

2、vConsoleeruda等调试库

这个方法需要在页面中插入一段 JS 脚本,这里以vConsole为例,导入vconsole.min.js,并实例化,注实例化代码最好放在头部,以便能一开始就能劫持内容:

<script src="./vconsole.min.js"></script><script>// 初始化new VConsole();</script>

npm i vconsoleimport VConsole from 'vconsole';new VConsole();

优点:方便,可查看console、network、elements等;
缺点:css调试不友好,console会劫持consloe的打印,不能定位到打印的代码位置,需要额外加载js脚本

推荐指数3颗星

3、Chrome + Android

首先在chrome安装ADB Plugin
chrome中输入 chrome://inspect
通过数据线连接你的电脑和 Android 手机,打开USB的调试模式
就可以在上面的页面中看到自己的设备:

点击inspect

然后就可以欢乐地调试了,和使用谷歌调试pc端一样,可惜ios不适用 推荐指数4颗星

4、Mac + IOS + Safari

打开手机点击设置 -> Safari浏览器 -> 高级

打开JavaScript和web检查器

打开手机上的Safari,输入一个网址www.baidu.com[1]

在Mac上打开Safari,点击开发-iPhone lh-www.baidu.com,[2] 就可以看到以下页面

注:app的webview也可以使用这个方法,只需要让客户端同学打包个debug版本

只适用ios,而且需要mac,而且有个缺点,没有打开调试窗口时,webview的网络请求和console都不会记录,webview关闭,调试窗口会直接关闭。推荐指数4颗星

5、whistle

安卓、ios都能调试,跨平台、代理抓包、H5调试、debugger、请求劫持、HTTPS支持、WebSocket数据捕获等,功能非常强大。weinre是用node编写的,使用npm来进行安装
安装:

npm install -g whistle

运行:

w2 start

 

跨平台、抓包、 DOMConsoleNetwork 等,功能非常强大。查看文档[3]
推荐指数5颗星

6、Mobile Debug

功能和whistle非常相似,我严重有理由怀疑Mobile Debug的开发者就是在whistle的基础上进行开发的。

`Mobile Debug`官网下载地址[4]

下载安装后

抓包:

 

网页调试:

 

通过配置劫持规则将线上出bug的文件(如js)劫持到本地修改并调试:

 

需要把手机在同一个局域网wifi设置代理,便可使用,https需要增加安装证书步骤。

推荐指数5颗星

3和7是我现在主要使用的方法,用这就能完全解决移动端的调试问题。

 

 

 

 


http://chatgpt.dhexx.cn/article/qxKUHqEL.shtml

相关文章

串口通信工具android,串口调试工具手机版

串口调试工具手机版是一款针对OTG接口开发的串口调试应用&#xff0c;这款软件提供了文本、HEX码等多种格式&#xff0c;支持12个自定义按钮&#xff0c;支持自动重发功能&#xff0c;并提供了15种常用波特率&#xff0c;需要的朋友可以来西西下载串口调试工具手机版进行使用 串…

HTTP调试工具

HttpDebug HTTP协议调试工具 V1.02 英文绿色免费版 https://www.jb51.net/softs/43863.html postman的使用方法详解&#xff01;最全面的教程 https://www.cnblogs.com/jpfss/p/9082542.html 一 简介 Postman是一款功能超级强大的用于发送 HTTP 请求的 Chrome插件 。做web页…

Windows下的TCP/UDP网络调试工具-NetAssist以及Linux下的nc网络调试工具

已剪辑自: https://blog.csdn.net/ccf19881030/article/details/109370384 一、Windows下的网络调试工具-NetAssist 1、TCP服务端和客户端测试2、UDP服务端和客户端测试 二、Linux下的网络调试命令工具-nc 1、什么是nc2、nc的作用3、在CentOS7中安装nc命令工具[4、NetCat 官方…

串口调试工具推荐

作者&#xff1a;三十三重天 博客: http://www.zhouhuibo.club 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f61c; 在进行嵌入式开发时&#xff0c;总是要面对着来自终端的各种报文。不同的设备、终端厂商都有一套自己的报文协议&#xff0c;如何…

PostWomen websocket 调试工具

PostWomen是一款websocket调试工具,补充了post man没有websocket调试的遗憾 源代码 https://gitee.com/ichiva/post-women演示地址 新版浏览器已不支持 ws 链接&#xff0c;请使用 wss 链接实测本地 ws 链接任然可用,如 ws://127.0.0.1 或 ws://localhost http://ichiva.gi…

嵌入式开发<网络调试工具>

嵌入式开发<网络调试工具> 前言1&#xff0c;设备参数分类2&#xff0c;设备参数修改3&#xff0c;调试工具软件 一、软件界面二、功能说明1.网络设置1&#xff09;TCP Client设置A&#xff0c; 协议类型&#xff1a;B&#xff0c; 远程主机地址&#xff1a;C&#xff0c…

Linux串口调试工具

linux系统下串口调试和应用开发时配合串口调试工具必不可少。下面对常用的一些串口工具做一下汇总&#xff0c;包含&#xff1a;minicom/cutecom/picocom/putty/tty_uart 可供工程师参考。 实验环境&#xff1a; OS: Ubuntu16.04 ------------------------------------------…

android js调试工具,鬼鬼JS调试工具

鬼鬼JS调试工具是一款非常实用的JS调试软件&#xff0c;这里带给大家最新版本&#xff0c;新增了一些解密等功能&#xff0c;对于JS调试工作者或者感兴趣的朋友提供稳定和强大的调试支持。鬼鬼JS调试工具具有直观的界面设计&#xff0c;功能十分全面&#xff0c;有需要的朋友欢…

前端必须知道的调试工具

Bug和Debug Bug的起源&#xff1a; 当时人们还在使用第一代真空计算机&#xff08;马克二型&#xff09;&#xff0c;这种计算机是依靠控制电流来改变开关&#xff0c;从而实现控制&#xff0c;但是它会发出大量的热和光。 1949年9月9日&#xff0c;天气非常炎热&#xff0c…

10个用于C#.NET开发的基本调试工具

在调试软件时&#xff0c;工具非常重要。获取正确的工具&#xff0c;然后再调试时提起正确的信息。根据获取的正确的错误信息&#xff0c;可以找到问题的根源所在。找到问题根源所在&#xff0c;你就能够解决该错误了。 你将看到我认为最基本的解决在C# .NET 中错误问题的工具…

数据库(左、中、右)连接

一分钟让你搞明白 left join、right join和join的区别 首先&#xff0c;我们先来建两张表&#xff0c;第一张表命名为kemu&#xff0c;第二张表命名为score&#xff1a; 一、left join 顾名思义&#xff0c;就是“左连接”&#xff0c;表1左连接表2&#xff0c;以左为主&…

数据库 左连接,右连接,全连接,内连接

准备: 分别创建TB A,B. 插入一些测试数据。 TB_A TB_B 1.内链接 (inner join) 内连接是一种一一映射关系&#xff0c;就是两张表都有的才能显示出来 代码例子&#xff1a; select * from TB_A a inner join TB_B b on a.nameb.name 扩展&#xff1a;这里我突然联想到&#…

数据库的左右连接

连接查询 连接&#xff1a; join 所谓连接查询&#xff0c; 就是多个表查询 连接查询是先生成表记录的笛卡尔积 。 所有可能的对象组合 要领 左连接where只限定查询右表&#xff0c; 右连接where只限定查询左表。 左连接 left Join select * from tbl1 Left Join t…

数据库的左连接与右连接

概念模糊不清&#xff0c;特此整理。 1、有两张表 表TA&#xff1a;A1&#xff0c;A2&#xff0c;A3&#xff0c;AB 表TB&#xff1a;B1&#xff0c;B2&#xff0c;B3&#xff0c;BA 关联字段&#xff1a;AB、BA 2、左连接 SQL: select * from ta a left join tb b on a.ab …

数据库内连接、左连接、右连接详解

用一句话概括就是&#xff1a;左连接就是左边全部保留按条件查出右边&#xff0c;右连接就是右边全部保留按条件查出左边。 说得有点抽象&#xff0c;其实并没有什么难度&#xff0c;还是自己运行下数据库就明白了。 数据库建表语句如下&#xff1a; create database if not …

数据库查询之内连接,左连接,右连接

数据库查询之内连接&#xff0c;左连接&#xff0c;右连接 连接查询 当查询结果的列来源于多张表时&#xff0c;需要将多张表连接成一个大的数据集&#xff0c;再选择合适的列返回 等值连接查询&#xff1a;查询的结果为两个表匹配到的数据 左连接查询&#xff1a;查询的结果为…

数据库中外连接的三种形式(左连接,右连接,全连接)

外连接 左外连接语法格式 Select a.班级信息&#xff0c;a.班级信息, b.姓名, b.联系方式 From班级信息 a left outer** (可省略)join 辅导员信息 b on a.辅导员b.辅导员编号 分析&#xff1a; 右连接 Select a.班级信息&#xff0c;a.班级信息, b.姓名, b.联系方式 From 班…

【Mysql数据库】终于搞懂了左连接、右连接、内连接、全连接

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。&#x1f60a; 座右铭&#xff1a;不想…

数据库的内连接、左连接和右连接

今天在CSDN上看到一个非常浅显易懂的左右连接和内连接的例子&#xff0c;简直秒啊&#xff0c;记录一下 具体演示前提&#xff1a; 创建两个表&#xff1a; 用两个表&#xff08;a_table 和 b_table&#xff09;&#xff0c;关联字段 a_table.a_id 和 b_table.b_id 来演示一下…

MySQL数据库的内连接、左连接、右连接、全连接/联合查询

目录 1 概念 2 内连接 3 左连接 4 右连接 5 全连接/联合查询 1 概念 内连接 inner join&#xff1a;只返回两个表中连接字段相等的记录。左连接 left join&#xff1a;返回包括左表中的所有记录和右表中连接字段相等的记录。右表中没有则以null显示.右连接 right join&…