2018-06-26 webstorm连接手机调试

以前移动端调试 要么是chrome里的手机浏览模式 要么是微信的web开发者0.7.0,这次发现其实用webstorm直接就可以实现手机调试的。方法如下：
我们在使用webstorm预览的时候默认打开是这样的 webstorm帮我们自动创建了一个本地主机,端口我自己设定的33333

webstorm默认预览

这样在手机微信调试或者手机浏览器里是打不开的

在微信端不会被识别为有效的url
这就很头疼... 因为微信端不能手动打开微信自带的浏览器，但是有时候我们必须要在微信里调试，因为有时候经常会有诡异的显示问题。
在之前我一直使用微信web开发者工具 就是下边这个
web开发者工具

这个里边封装了weinre 也是专门用来调试手机端的 还可以抓包之类的 没有深研究过。

image.png

需要一提的是这个开发者工具的移动调试功能只有0.7.0以下的版本有 在往上的版本就没有这个功能了。。？
所以 现在需要换种更便捷的方法。
打开熟悉的 webstorm -> file -> Settings ->

image.png

点击这个加号

Deployment
名字(Name)随便起 Type选择 Local or Mounted folder
image.png
如图
image.png
这里再设置下父级目录 跟上一步那个一样
image.png

然后我们来试一下~ 可以看到之前的loacalhost已经变成自己的ip地址了

预览
接下来我们只要确认手机和pc处在同一局域网下 就可以在真机上访问我们本地的项目啦<(￣︶￣)>　
可以访问
微信端也可以识别url了

关于作者

  var myproject = {

    nickName  : "remix_huang",

    site : "https://www.jianshu.com/u/717e2ca57b3f"

  }