技巧篇:使用eruda做手机端网页调试

在做移动端页面开发测试的时候,我们习惯性的在pc端使用devtools进行模拟适配调试,如下图:

image.png

但有时,发布后在手机上使用时,还是会有些问题需要调试,eruda使用起来较为方便,如下图:

image.png

截图中的红色框标注的是功能项,可以按需切换调整.

eruda的使用也很方便,这里举个例子:
在需要调试的页面引入如下js:

<script th:src="@{../js/eruda.js}"></script>
<script>eruda.init();</script>

可以从这个地址下载存储到本地:https://cdn.jsdelivr.net/npm/eruda

页面访问时,在路径的末尾添加调试参数:

?eruda=true

这样,就可以在手机端,进行页面调试了,不限于pc,可以路上处理了.

当然,这个还是在测试环境加载开启就好,发布出去的时候,要避免加载开启.