目标
在Webstorm中,开启实时调试功能,配合chrome中的Jetbrain IDE support插件,实现HTML、CSS、JavaScript编程所见即所得。
简要步骤
-
安装chrome,安装chrome插件
JetBrains IDE Support
Chrome插件 -
设置WebStorm。
设置情况如图所示
相关软件的版本及下载
-
Chrome
Chrome的版本 -
Chrome插件:JetBrains IDE Support
JetBrains IDE Support版本 -
WebStorm
WebStorm版本
详细步骤
-
离线安装chrome插件:JetBrains IDE Support
- 在能够上网的计算机上,使用Chrome网上插件商店下载安装插件,网速过慢的需要等待或者代理。
- 通常在下面的路径中可以找到对应版本的插件安装目录,将该目录保存。
C:\Users\计算机用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions\hmhgeddbohgjknpmjagkdomcpobmllji(类似一长串)
-
在离线的计算机中,打开Chrome,在菜单中找到“更多工具”-“扩展程序”并打开,打开“开发者模式”。
“更多工具”-“扩展程序” -
点击“加载已解压的扩展程序”,打开刚才保存的扩展程序文件夹,即可安装,忽略安全警告。
5.关于插件的设置需要注意一点,下图中的端口与WebStorm中的要一致。如下图所示:
端口要与WebStorm中的一致
-
设置WebStorm:在WebStrom中,“File-Setting”中,搜索框中输入“Live Edit”,打开该选项,按照下图所示进行设置。
设置情况如图所示 -
打开需要调试的网页,需要将该网页以debug模式打开才可以。方法有:一是在项目文件列表中,对要调试的文件右键,选择Debug运行。二是在下图右侧点击小虫子图标运行选定的文件。
Debug模式运行
即时编辑效果图最终效果
网友评论