中文

Remote debugging tool like weinre, replacing web inspector with the latest chrome devtools frontend.

Browse it on your phone: https://chii.liriliri.io/test/demo.html

Open https://chii.liriliri.io/ and click inspect to start debugging the demo page.

In order to try it for different sites, execute the script below on browser address bar.

javascript:(function () { var script = document.createElement('script'); script.src="//chii.liriliri.io/target.js"; document.body.appendChild(script); })();

You can get it on npm.

npm install chii -g

Start the server with the following command.

chii start -p 8080

Use this script to inject the target code into your webpage.

<script src="//host-machine-ip:8080/target.js"></script>

Then browse to localhost:8080 to start debugging your page.

• whistle.chii: Whistle Chii plugin.
• chobitsu: Chrome devtools protocol JavaScript implementation.

1. 拉取 Chrome DevTools frontend 最新代码

$ npm run init:front_end

2. 构建 Chrome DevTools frontend 并复制到 public 目录

$ npm run dev:front_end

3. 启动调试服务

$ node bin/chii.js start -p 8080

访问 http://localhost:8080/

• 没有 autoninja 命令

$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

在 ~/.bash_profile 加入 export PATH=$PATH:/path/to/depot_tools

$ source ~/.bash_profile

• 遇到 unable to get local issuer certificate 异常

给 devtools/devtools-frontend/scripts/deps/download_emscripten.py 增加代码忽略 ssl 校验

import ssl 
ssl._create_default_https_context = ssl._create_unverified_context

然后运行

$ npm run init:front_end_try