webstorm实现手机预览页面
效果:在webstorm中开发页面,复制该页面在电脑中的浏览网址,发给手机,在手机上点击链接,可以直接访问本地开发的页面。并且,电脑上修改后保存,手机上刷新即可看到效果。
步骤:
1、webstorm菜单栏,点击 File ——> settings... ,选择 Debugger,然后按下图红框里的配置。

2、选择 Deployment,按照下图配置。

3、刚创建的 myTest 的第一个菜单 Connection ,按下图说明配置。

4、myTest 的第二个菜单 Mappings ,一般不用设置,打开看下,和 Connection 中的 Folder 设置一致就行。

5、点击设置面板右下角的 Apply ,然后点击 OK 关闭面板。
测试:在webstorm中编辑的页面 test.html,本地打开路径显示是 http://192.168.100.3:8080/test/page/test.html?_ijt=ruka0gbhvkrqree8sj0f2d25c3
复制这个地址,发送手机,在手机上打开,即可访问电脑上的 test.html 。webstorm中修改代码并保存,手机上刷新,就能看到修改后的效果。
注意:电脑和手机必须是在同一局域网内。
webstorm实现手机预览页面的更多相关文章
- Rendering Problems Failed to load platform rendering library 为何打开布局页面时手机预览页面显示不出来?
看到图片右上角的 android图标没有?把它改为低版本的就可以了,如我的是21就可以了.原因我想是因为sdk版本更新了不兼容导致的吧.
- TODO:小程序手机预览调试
TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...
- 微信小程序手机预览请求不到数据(最后一条不明所以)
本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...
- 手机预览微信小程序
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅 ...
- vs2017/vs2019 去掉 单击aspx文件预览页面
初次安装vs2017或者vs2019,新建的项目中,每次单击项目文件时,文件自动打开了 然后 打开 工具->选项->环境->选项卡和窗口->预览选项卡->勾掉" ...
- 最简单的手机预览WEB移动端网页的方法
网上看了很多关于该问题的解决办法,各种各样的都有,个人也测试了一些, 最后总结出一个最简单且实用的方法. 1.安装nodejs node官网下载对应版本的nodejs,安装好了之后,在node.js执 ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- VS Code 如何直接在浏览器中预览页面
VS Code 预览html页面的时候,默认需要在资源管理器中显示,再在浏览器中预览.今天介绍一下如何直接预览html页面. 方法一:自己配置快捷键 1.ctrl + shift + p 或者 F1 ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_24-页面预览-页面预览测试
通过nginx转发到预览的地址 重启nginx 添加页面预览按钮 调整下列表的列的宽度
随机推荐
- 自动化翻译ceph文档
需求很简单,翻译官网的操作文档 下载ceph代码luminous版本 这个只用来编译doc的,我们只需要最新的这个分支即可,拉最少的代码 git clone -b v12.2.13 --single- ...
- Windows常用的网络命令
命令 说明 ipconfig 查看网络配置的信息 ping 测试网络是否连通 tracert 网络诊断工具,可以列出分组经过的路由节点 net 有添加用户.开启服务等功能 netstat 显示协议统计 ...
- FL Studio水果音乐制作入门教程
"没有早期音乐教育,干什么事我都会一事无成".这并非某位音乐家精心熬制的心灵鸡汤,而是出自物理学家爱因斯坦之口,朋友们没有看错,就是那个被称为二十世纪伟大科学家的爱因斯坦,所以,别 ...
- ceph 集群快速部署
1.三台Centos7的主机 [root@ceph-1 ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 2.主机 ...
- Docker安装基本命令操作,带你了解镜像和容器的概念!
上一章节我们了解了Docker的基本概念,以及相关原理.这一章节进行实操. <Docker这么火爆.章节一:带你详尽了解Docker容器的介绍及使用> 一.Docker安装 声明:Dock ...
- 如何修改Docker的默认网段?
背景 公司的服务器全部都是购买的阿里云ECS主机,默认内网网段为172.16.0.0/12,测试服上的服务基本都是使用Docker部署的. 之前的同事在该机器上安装的Docker全部都是默认配置,网段 ...
- 下载配置VNC
VNC通常使用连接图形化系统电脑可以安装了Gnome或者KDE yum autoremo ve tigervnc-server //移除 vncreboot //重启yum install tiger ...
- uni搜索功能实现
uni搜索功能的实现
- Kubernetes中Service的使用
目录 简介 1. Service资源定义 1.1 Service Type ClusterIP 无头service NodePort sessionAffinity实现源地址session绑定 简介 ...
- 微服务架构下 CI/CD 如何落地
本文系云原生应用最佳实践杭州站活动演讲稿整理.杭州站活动邀请了 Apache APISIX 项目 VP 温铭.又拍云平台开发部高级工程师莫红波.蚂蚁金服技术专家王发康.有赞中间件开发工程师张超,分享云 ...