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

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

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

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

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

    1. 全局安装spy-debugger ``` npm install spy-debugger -g
  4. 启动 spy-debugger 默认使用anyproxy抓包,推荐配置外部代理,如: spy-debugger -e http://127.0.0.1:8888,然后再配置fiddler监听该端口就能结合fiddler使用了
  5. 设置手机的HTTP代理

    代理的地址为 PC的IP地址 ,代理的端口为spy-debugger的启动端口(默认端口为:9888)
    (也可以指定端口: spy-debugger –p 8888

    Android设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

    iOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动

功能:

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

  • 查看修改页面resources(localStorage和sessionStorage);查看network和timeline看板(建议用抓包工具查看)

  • 页面编辑模式(原理是html5的contenteditable属性,不常用)

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