一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
当前端页面五花八门，投放的平台也越来越多，调试才如何入手。下面整理罗列了一些方法，后面再详细写写具体做法（持续更）
Fiddler介绍与安装
windows下，集成网络抓包、拦截、替换的网络web调试工具 基本的界面介绍 下载Fiddler4最新版即可
拦截与修改请求
能够使用BPU命令，拦截特定http(s)请求，修改返回数据，实现本地mock各种情况
替换线上资源为本地资源
将线上静态资源拦截，替换为本地的资源文件执行，方便本地定位线上问题
真机运行本地电脑项目调试
适用于：安卓、ios、pc内嵌等非pc浏览器 机器配置Fiddler客户端代理IP（机器需要与电脑同个wifi下） Fiddler能捕获到机器的所有http(s)网路请求
情况一：内嵌客户端，无法修改访问的地址
将访问地址拦截替换为本地项目地址
情况二：可以修改访问地址
访问本地项目的IP地址
Whistle
介绍与安装
跨系统(windows与mac)下的Fiddler工具 功能与fiddler类似 npm安装
替换线上资源为本地资源
与fiddler类似，需要手动写正则来匹配
集成了wenire，远程调试真机
需要引入一个类似vs_console.js的文件在项目中 PC浏览器打开对应的页面，能够展示迷你版的Chrome调试工具 查看dom结构，修改dom节点，修改css样式，执行js代码，都能实时反馈到真机的页面中
Chrome与Safari的Inspect
这个需要有硬件设备支持，调试的效果也比较好 大部分场景下，只局限于调试手机上的原生浏览器
Chrome与安卓真机
用数据线连接电脑与安卓机，打开usb调试 可以在Chrome中调试安卓机中的网页(完整版的功能)
Safari与Macbook
用数据线连接电脑与ios机，打开safari调试 可以在Safari中调试ios中的网页(完整版的功能)
总结
调试移动端浏览器下的问题，用Inspect方式 调试移动端内嵌，或者缺乏硬件条件的，可以使用Fiddler方式(但只能执行本地项目代码，无法查看dom结构，但能捕获到真机下的网络请求)
mac下，或者只是需要查看结构的，使用whistle
