ubuntu中WebStorm使用Chrome实时调试

目标

在Webstorm中，开启实时调试功能，配合chrome中的Jetbrain IDE support插件，实现HTML、CSS、JavaScript编程所见即所得。

简要步骤

1. 安装chrome，安装chrome插件
   JetBrains IDE Support

   
   
   

   Chrome插件

2. 设置WebStorm。

   
   
   

   设置情况如图所示

相关软件的版本及下载

1. Chrome

   
   
   

   Chrome的版本

2. Chrome插件：JetBrains IDE Support

   
   
   

   JetBrains IDE Support版本

3. WebStorm

   
   
   

   WebStorm版本

详细步骤

1. 离线安装chrome插件：JetBrains IDE Support

   1. 在能够上网的计算机上，使用Chrome网上插件商店下载安装插件，网速过慢的需要等待或者代理。
   2. 通常在下面的路径中可以找到对应版本的插件安装目录，将该目录保存。
      C:\Users\计算机用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions\hmhgeddbohgjknpmjagkdomcpobmllji（类似一长串）

   3. 在离线的计算机中，打开Chrome，在菜单中找到“更多工具”-“扩展程序”并打开，打开“开发者模式”。

      
      
      

      “更多工具”-“扩展程序”

   4. 点击“加载已解压的扩展程序”，打开刚才保存的扩展程序文件夹，即可安装，忽略安全警告。
      5.关于插件的设置需要注意一点，下图中的端口与WebStorm中的要一致。如下图所示：

      
      
      

      端口要与WebStorm中的一致

2. 设置WebStorm：在WebStrom中，“File-Setting”中，搜索框中输入“Live Edit”，打开该选项，按照下图所示进行设置。

   
   
   

   设置情况如图所示

3. 打开需要调试的网页，需要将该网页以debug模式打开才可以。方法有：一是在项目文件列表中，对要调试的文件右键，选择Debug运行。二是在下图右侧点击小虫子图标运行选定的文件。

   
   
   

   Debug模式运行

最终效果

即时编辑效果图