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

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

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

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

1. 全局安装weinre npm install weinre -g
2. 启动 weinre 调试界面的默认端口是8080，可加上 httpPort 参数指定端口
3. 能够调试本地服务器上的页面，需引入一个脚本(端口写实际端口)：
   <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

可见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--可以在浏览器间实时自动刷新页面和同步滚动点击操做。