代码改变世界

移动端网页调试工具(Eruda)

2020-06-12 19:41  muamaker  阅读(2321)  评论(0编辑  收藏  举报

 

 一、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 同一个网络,开始调试

 

三、使用谷歌自带的

在chrome输入这个地址chrome://inspect/#devices,然后安卓机装个chrome,开启usb调试模式,然后连上电脑,打开发现设备就可以调试手机端了