移动端网页调试工具(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
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调试模式,然后连上电脑,打开发现设备就可以调试手机端了