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