前言

我打算将移动端网页调试作为一个专题介绍几个常用的调试工具，主要是样式调试和接口数据调试，目的是在提测和修bugs的阶段能快速定位问题，提高工作效率，这篇文章介绍的是Eruda。

相信大家都能熟练使用DevTools调试网页，它可以帮助我们查看网页结构、样式、网络请求、资源加载情况和本地缓存等，而且还可以切换手机模式调试h5页面。但是由于移动端平台、浏览器丰富多样，所以开发h5网页时还需要兼容各主流手机的浏览器，有很多问题都需要在真机中才能发现。Eruda是一款开源的移动端调试插件，可以在移动端网页上添加一个类似于chrome devtools的调试面板，方便开发和测试快速定位移动端的问题，特别是样式兼容问题、获取浏览器信息和操作浏览器缓存等。

引入方式

<script> ;(function () { var src = 'https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js'; if (!/debug=1/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return; document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>'); document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>'); })(); </script> 复制代码

只需在要调试的页面加入以上代码，通过加入url参数debug=1开启调试模式后页面会从CDN加载eruda插件，页面的右下角会出现工具小图标，点击图标即可开启调试面板。在非调试模式下不会加载此插件，不会影响生产环境下的网页加载速度。

调试面板介绍

1. Console面板

打印错误信息和代码中的console信息；
输入js脚本并执行；
载入jQuery或underscore库方便调试，输入 :$ 或 :_ 并执行即可加载Jquery 和 underscore

2. Elements面板

选取页面元素查看该元素的属性、样式、盒子模型；
不支持直接修改样式和元素（和chrome的区别）

3.Network & Source面板

查看ajax请求列表，请求的状态码、时间等；
单击每项请求可查看详细的头部信息和返回值；

4.Resources面板

查看和删除localStorage，sessionStorage, cookie等；
显示页面加载的脚本文件，样式文件，图片等资源；

5.Info面板

查看当前网页地址、浏览器内核信息（user-agent）、手机系统信息 、手机屏幕信息。

6.Snippets面板

扩展一些常用功能和插件，如： 搜索窗口、Timimg面板、脚本输入窗口等（有些工具的确很方便，可以多尝试使用）

7.Setting面板

Eruda的配置项，可以个性化定制符合自己调试习惯的面版。 推荐配置： 打开 alaways activited ； Transparency 0.8 ；display size 50 ;

总结

Eruda虽然功能比较全面，但由于不能直接改动元素样式而且在手机上操作也有不便，因此可以适当选用，下一篇将介绍更好用的 weinre 和以weinre为基础的spy-debugger。移动端网页调试 之 weinre&spy-debugger