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"

  }