远程调试---在电脑上devtools调试运行在手机上的应用

1、启动项目–以vite项目为例:先ipconfig查看ip地址 ,然后在vite中配置host为ip地址

2、手机上查看项目:保证手机和电脑在同一局域网, 在手机浏览器打开我们vite启动的项目地址,

3、使用chii进行远程调试

(1) 安装 ` npm install chii -g  `
(2)启动  `chii start -p 8080` 
(3)在调试项目引入 `http://ip地址:8080/target.js`

4、调试 在浏览器中打开页面 http://ip地址:8080/ 就可以看到我们所有远程连接的目标页面,点击inspect即可在浏览器中定位到我们的手机页面元素,我们想要在手机上定位元素时,先点击devtools中的旋转元素按钮,然后在手机上按钮想要选择的元素就可以看到和在浏览器中选择元素一样的效果

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d940e04fe9114e67a121b038c35a9cb9.png

4、可以自己写页面显示所有连接的设备信息, 可以访问以下接口

http://ip地址:8080/targets