谈谈你的调试工具

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。

• window chrome devtool调试ios
• chrome devtool 调试微信网页
• chrome devtool 调试android真机
• fiddler抓包
• mumu android模拟器调试

window chrome devtool调试ios

使用remotedebug-ios-webkit-adapter

1.github地址
https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter

2.介绍
基于ios-webkit-debug-proxy二次开发的ios-webkit协议适配器

3.注意点
• chrome inspect需配置Discover network targets,点击 Discover network targets后面的configure, 加上remotedebug_ios_webkit_adapter启动的地址
• 访问手机页面后再启动remotedebug_ios_webkit_adapter

chrome devtool 调试微信网页

1. 跟调试手机普通网页操作一致 chrome devtool调试android真机
2. 对手机微信进行配置
   微信访问 http://debugx5.qq.com/
   在配置页面中，找到“信息”标签页，并勾选上它的”打开TBS内核 Inspector调试功能”
3. 大功告成 开始调试

chrome devtool 调试android真机

1.手机打开usb调试
设置-关于手机-版本号连续点击几次出现-返回设置界面会看到开发者模式选项

2.用usb线连接电脑和手机,手机上弹出usb用于充电的选择框，选择传输文件。弹出允许计算机调试手机，选择允许。

3.chrome浏览器输入 chrome://inspect
选择Devices,勾选Discover USB devices,Discover network targets。
remote target出现手机访问的页面。点击inspect开始调试

碰到的问题

1. remote target没有出现手机上访问的页面
   依次尝试以下方案

• 换根usb线，可能usb线只支持充电
• 电脑下载360手机助手
  猜测可能电脑少了一个驱动。360助手应用有集成这个驱动软件

fiddler抓包

fiddler抓包

mumu android模拟器调试

一、抓包
1.下载adb （android debug bridge） （直接解压就行）
2.在安装目录打开cmd 执行adb命令 （我直接将adb拖进vs，用vs编辑器带的cmd窗口操作）
3.连接 mumu 模拟器 adb connect 127.0.0.1:7555 （mumu 模拟器一般占用端口为7555,如果不是自己上网查mumu 怎么查看占用端口）

4.调出mumu模拟器 wifi设置 adb shell am start -a android.intent.action.MAIN -n com.android.settings/.wifi.WifiSettings（mumu模拟器本身没有将wifi设置显示出来）

此时看mumu模拟器 wifi设置就显示出来了

5.接下来就是常规操作了 用fiddler 手机抓包

欢迎大家留言讨论，祝工作顺利、生活愉快！

我是bigo前端，下期见。