移动端网页调试 之 Eruda

4,581 阅读3分钟

前言

我打算将移动端网页调试作为一个专题介绍几个常用的调试工具,主要是样式调试和接口数据调试,目的是在提测和修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