前端开发: WebStorm局域网手机真机调试

转载地址：https://www.jianshu.com/p/8044c7ffd2c7

1. 做好准备工作

• 安装webstorm以及新建一个项目写个demo
• 确保是同一局域网,同一个路由器下的WiFi或者其他内部网络
• 安装google二维码插件 (草料二维码)

2. 开始设置

• 用webstorm打开demo,打开偏好设置页面
• 点击到Debugger这一栏,可以看到如图所示:

第一步

• 设置端口号
• ️勾选相应设置

3. 配置路径

• 点击到Deployment这一栏,如图
• 点击➕号,新建一个,填写自定义名字,设置对应的type
• 设置项目的父级路径
• 设置域名 + 端口号

第二步

4. 匹配路径设置

• 点击到mapper这一栏,如图
• 设置项目父级路径即可

第三步

5. 设置完成,即可体验

• 以上全部设置完成后,点击apply,点击ok
• 在项目里点击google浏览器打开即可
• 能够正常打开,点击地址栏旁边草料二维码插件,手机扫码就可以轻轻松松调试了

PS ：注意：1、并不用草料二维码就可以。其实电脑配置好了，直接运行，运行成功，把地址发到手机上打开就行。

2、这里说的局域网指的是  ：电脑开热点，手机连接电脑，我这边测试成功。

注意 不是  不是  ：：手机和电脑同时连接公司的路由器，虽然在同一个局域网，发现一直是404，失败

3、其实后面3步可以省略。你只要勾选了第二部允许外部链接。然后运行项目。发现是一个带localhost的网页地址。比如我的是：http://localhost:8081/RBJF/xiaosunsun/questionnaire.html?_ijt=k0fjrpr2t2op869da3v19ifj5f

此时，你使用ipconfig命令查看本机ip。然后。用本地ip 替换localhost。生成新的链接。比如楼主替换以后是：http://172.30.168.1:8081/RBJF/xiaosunsun/questionnaire.html?_ijt=k0fjrpr2t2op869da3v19ifj5f

手机连接到电脑的wifi.运行新的链接就成功了。楼主亲测有效。