移动端网页调试工具（Eruda）

Posted 2020-12-10 muamaker

 

 一、Eruda 或者 vconsole.js

Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。

github 地址：https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

 

使用方式：在自己的网站下面加入如下代码

;(function () { 
		if (!/debug=true/.test(window.location) ) return;
		var script = document.createElement(‘script‘); 
		script.src=‘//cdn.bootcss.com/eruda/1.5.2/eruda.min.js‘; 
		document.body.appendChild(script); 
		script.onload = function () { eruda.init() }
	})();

　　

访问的时候，给url 加上链接 参数  http://xxxx?debug=true

 

这个时候就会出现调试的按钮了

 

同样的还有一个  vconsole.js 也可以

 

另外：可以使用 chii 来调试

二、使用 chii

npm install chii -g

　　

使用命令起一个服务

chii start -p 8080

现在，往你要调试的页面中注入一个脚本。

<script src="http//192.168.1.218:8080/target.js"></script> 

　　

在手机上访问需要保持跟 PC 同一个网络，开始调试