前言

时隔n天,终于决定继续学下移动端的知识,但当我打开我的webstorm,然后准备进行调试时,我陷入了沉思,我居然发现我没有办法调试我的页面,这就非常难受了,于是我折腾了一晚,终于成功搞定了这个问题,需要的工具是webstorm + 电脑chrome + 手机chrome。下面就是分享环节~

开启手机的USB调试

首先你需要有一个开启了USB调试的手机,因为各个系统开启USB调试的方法不一样,我就不说了,我是MIUI系统,开启USB调试的办法在这里,其他的系统直接百度搜索一下,也很容易找到打开的方法。

如果你成功了,理论上通知栏会看到打开USB调试的通知

给手机安装一个chrome

百度一下,选择第一个下载安装~

连接手机和电脑

这一步你需要用一根USB线,连接手机和电脑,然后打开手机的chrome浏览器,然后在PC端的chrome浏览器里进入这个网址 chrome://inspect/#devices ,然后你就会发现,你的手机已经被显示出来了。

然后你需要用webstorm开启一个本地的局域网服务器,这样在你的手机和电脑处于同一个局域网下时(比如同一个WIFI),你可以直接用手机访问到这个网站,但是webstorm的默认打开的是localhost,所以你要配置一下(如果用的是vue或者react,直接使用局域网地址就行)。

所以你需要做一些配置

如图,我的项目路径是E:/WebProject/mobile

在webstorm里打开是这样的

我们点击File -> setting

然后选择如图的选项

随便起一个名字

然后填写一些信息,Folder填写你的项目路径,Web server URL填写你的本机在局域网的ip地址(这是获取局域网ip的教程) + 端口号,注意端口号要和Debugger设置的保持一致。对了,如果你能创建vue脚手架项目,可以运行npm run serve,然后Network选项的地址,就是你的本机在局域网的IP

然后切换到Mappings,进行一些设置,Local path填写和 Folder 一样的路径,其余两个写最后的文件目录。

然后点击确认,这样,你的webstorm打开的,就是局域网的本地服务器了。

然后在 chrome://inspect/#devices 这个页面,复制要在移动端上打开的网页的链接,然后输入到如下位置

按下open,然后会你的手机会打开对应的网页,PC端会变成这个样子

然后,点击inspect,PC端会弹出这样的框

你在移动端进行的操作会同步显示到电脑上,你在电脑上进行的操作也会同步到手机上,最重要的是,你可以查看log了,大功告成惹。

HTTP/1.1 404 Not Found

参考:http://centphp.com/view/165

1.png

出现原因是Chrome 的devtools 需要联网下载对应的WebView的测试环境,appspot.com在国内不能直接访问。

解决方法如下:

  1. 方法一:下载devtools 的inspect的 离线开发者调试工具包
  2. 修改host文件
  3. 使用第三方的chromium内核的浏览器,如QQ浏览器。点击inspect fallback测试

我是珂学上网了,上完就好了

image-20220507233320258

后记

如果你有什么问题,欢迎在评论区留言~

如果喜欢本文请点个赞,你的推荐会变为我继续更文的动力~