目标
在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模式运行
最终效果
即时编辑效果图
