移动端网页调试 之 weinre&spy-debugger

Chrome DevTools 是前端开发和调试的入门神器，上手容易使用也很简便，但很多高级功能还是要认真学习和等待发掘的，这里就直接贴上详细的教程供大家收藏学习。

言归正传，遇上了移动端网页，调试的目标是要让页面在主流的手机平台上表现和行为一致。通常我们都是先在chrome的手机模拟模式下进行开发，提测后才会在手机端的浏览器进行测试。测试阶段一旦出现问题解决起来就会比较麻烦，因为解决这类问题一般不会一次就能改好，有时还要考虑各自浏览器兼容性然后使用排除法来尝试解决。由于缺乏可视化的调试界面，我们不能直观地调试出现问题的手机，甚至还需要每改一次发布一遍然后才能看到效果，可见效率是低下的。weinre和spy-debugger就为我们提供了这种移动端调试的可视化界面。

weinre是一款远程调试工具（web inspector），可以在PC上直接调试运行在移动设备上的远程页面。使用方式如下：

1. 全局安装weinre npm install weinre -g
2. 启动 weinre 调试界面的默认端口是8080，可加上 httpPort 参数指定端口
3. 可以调试本地服务器上的页面，需引入一个脚本(端口写实际端口)：
   

可见weinre有个不足是需要引入一个script脚本,所以使用起来并不友好。spy-debugger则是内部集成了weinre和anyproxy抓包工具，可以自动给页面注入weinre的脚本，下面将详细介绍spy-debugger的用法。

1. 全局安装spy-debugger npm install spy-debugger -g
2. 启动 spy-debugger 默认使用anyproxy抓包，推荐配置外部代理，如： spy-debugger -e http://127.0.0.1:8888，然后再配置fiddler监听该端口就能结合fiddler使用了
3. 设置手机的HTTP代理
   代理的地址为 PC的IP地址 ，代理的端口为spy-debugger的启动端口(默认端口为：9888) （也可以指定端口: spy-debugger –p 8888 ）
   Android设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
   iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动

功能：

• 选中&查看&修改 页面元素和样式；控制台执行脚本

• 查看修改页面resources（localStorage和sessionStorage）；查看network和timeline看板（建议用抓包工具查看）

• 页面编辑模式（原理是html5的contenteditable属性，不常用）

移动端网页调试的特点是多个设备、多个浏览器的调试，这导致有时候不得不在这些设备间来回切换和刷新页面，下一篇将会介绍Browsersync--能够在浏览器间实时自动刷新页面和同步滚动点击操作。

转载于:https://juejin.im/post/5c73da176fb9a049ba4237b5