效果:在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实现手机预览页面的更多相关文章

  1. Rendering Problems Failed to load platform rendering library 为何打开布局页面时手机预览页面显示不出来?

    看到图片右上角的 android图标没有?把它改为低版本的就可以了,如我的是21就可以了.原因我想是因为sdk版本更新了不兼容导致的吧.

  2. TODO:小程序手机预览调试

    TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...

  3. 微信小程序手机预览请求不到数据(最后一条不明所以)

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  4. 手机预览微信小程序

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅 ...

  5. vs2017/vs2019 去掉 单击aspx文件预览页面

    初次安装vs2017或者vs2019,新建的项目中,每次单击项目文件时,文件自动打开了 然后 打开 工具->选项->环境->选项卡和窗口->预览选项卡->勾掉" ...

  6. 最简单的手机预览WEB移动端网页的方法

    网上看了很多关于该问题的解决办法,各种各样的都有,个人也测试了一些, 最后总结出一个最简单且实用的方法. 1.安装nodejs node官网下载对应版本的nodejs,安装好了之后,在node.js执 ...

  7. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  8. VS Code 如何直接在浏览器中预览页面

    VS Code 预览html页面的时候,默认需要在资源管理器中显示,再在浏览器中预览.今天介绍一下如何直接预览html页面. 方法一:自己配置快捷键 1.ctrl + shift + p 或者 F1  ...

  9. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_24-页面预览-页面预览测试

    通过nginx转发到预览的地址 重启nginx 添加页面预览按钮 调整下列表的列的宽度

随机推荐

  1. Django 笔记2018.2.7

    1.基础知识 1.1web服务基本原理 1.2 WSGI 目前最通用的web接口规范,python默认支持,在Django中是一个库 1.3WEB基础知识 MTV (Model Template Vi ...

  2. 基于tcp的socket通信

    # socket # socekt是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,socket其实就是一个门面模式,它 # 把复杂的tcp/ip协议族隐藏在socket接 ...

  3. SpringBean生命周期-Version-v5.1.0.RELEASE

    首先入口选定在org.springframework.beans.factory.support.DefaultListableBeanFactory#preInstantiateSingletons ...

  4. 三叶草极客大挑战2020 部分题目Writeup

    三叶草极客大挑战2020 部分题目Writeup Web Welcome 打开后状态码405,555555,然后看了一下报头存在请求错误,换成POST请求后,查看到源码 <?php error_ ...

  5. webug第四关:告诉你了flang是5位数

    第四关:告诉你了flang是5位数 开始看到有点懵 于是不要脸的看源码 burp跑弱口令

  6. Word中如何调整MathType公式的间距

    作为一名理工科的学生,经常会面对一大堆公式,那么就要掌握在Word中编辑公式的技能,那么怎样才能在Word中编辑美观的公式呢?为了方便大家的使用,下面就详细介绍在Word中调整MathType公式间距 ...

  7. 2个快速制作完成一幅思维导图的iMindMap思维导图用法

    随着思维导图的流行,与其相关的思维导图制作软件如雨后春笋,纷纷进入我们的视野中,更让人难以选择.那想要入门的萌新该如何开始这个新的旅途呢? 各式各样的思维导图制作软件当中,有一个软件得到了大家一致的好 ...

  8. 给git日志添加好看的样式

    windows添加如下命令,让入了全局环境里 git config --global alias.lg "log --color --graph --pretty=format:'%Cred ...

  9. linux配置tomcat项目包

    安装配置tomcat 操作系统:  centos 7.1 使用模式:命令模式 使用工具:xshell5 .xftp5 注意之前有配置过tomcat需要进行以下4个步骤 1.关闭网管服务 输入命令: 进 ...

  10. 浅谈 van Emde Boas 树——从 u 到 log log u 的蜕变

    本文参考算法导论完成. 模板题在此 QwQ 优化的过程比较长,还请读者耐心阅读,认真理解. 最初的想法 我会暴力! 用一个 \(size\) 数组维护每个元素出现的次数. 不细讲,时间复杂度 \(O( ...