使用 Chii 调试移动端页面

Chii 是一款与 weinre 类似的远程调试工具,主要是将 web inspector 替换为最新的 chrome devtools frontend。

Demo

使用 Chii 调试移动端页面_第1张图片

请扫描二维码或在手机上直接访问:https://chii.liriliri.io/tests/demo.html

打开 https://chii.liriliri.io/ 并点击 inspect 按钮开始调试示例页面。

如果想在其它页面尝试,请在浏览器地址栏上输入以下代码。

javascript:(function () { var script = document.createElement('script'); script.src="//chii.liriliri.io/target.js"; document.body.appendChild(script); })();
由于加载文件较多,服务器在国外,示例网站访问会有些慢,请耐心等待。

安装

可以通过 npm 安装。

npm install chii -g

使用

用下面的命令开启服务。

chii start -p 8080

启动 chii 后在浏览器中输入 localhost:8080 显示如下界面。

使用 Chii 调试移动端页面_第2张图片

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

在手机上访问需要保持跟 PC 同一个网络,同时将 localhost 替换成 PC 的 IP 地址。

再次访问 localhost:8080,会看到变成了下面的界面。

使用 Chii 调试移动端页面_第3张图片

点击 inspect 就可以开始调试你的页面了。

使用 Chii 调试移动端页面_第4张图片

你可能感兴趣的:(前端,javascript,debug,开发工具)