Use Chii to debug mobile pages

Posted May 28, 20202 min read

Chii is a remote debugging tool similar to weinre, mainly to replace the web inspector with the latest chrome devtools frontend.

Demo

qrcode.png

Please scan the QR code or visit directly on the mobile phone: https://chii.liriliriri.io/tests/demo.html

Open https://chii.liriliriri.io/ and click the inspect button to start debugging the sample page.

If you want to try it on other pages, please enter the following code in the address bar of your browser.

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

Due to the large number of loaded files and the server is abroad, the sample website access will be a bit slow, please be patient.

installation

It can be installed via npm.

npm install chii -g

use

Use the following command to start the service.

chii start -p 8080

After starting chii, enter localhost:8080 in the browser to display the following interface.

index.png

Now, inject a script into the page you want to debug.

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

To access on the mobile phone, you need to keep the same network as the PC, and replace localhost with the IP address of the PC.

Visit localhost:8080 again and you will see the following interface.

index_connected.png

Click inspect to start debugging your page.

screenshot.jpg