webstorm移动端调试
前言
时隔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
出现原因是Chrome 的devtools 需要联网下载对应的WebView的测试环境，appspot.com在国内不能直接访问。
解决方法如下：
- 方法一：下载devtools 的inspect的 离线开发者调试工具包。
- 修改host文件
- 使用第三方的chromium内核的浏览器，如QQ浏览器。点击
inspect fallback测试
我是珂学上网了，上完就好了
后记
如果你有什么问题，欢迎在评论区留言~
如果喜欢本文请点个赞，你的推荐会变为我继续更文的动力~
