ubuntu中WebStorm使用Chrome实时调试 ubuntu中WebStorm使用Chrome实时调试

目标

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

简要步骤

相关软件的版本及下载

详细步骤

【ubuntu中WebStorm使用Chrome实时调试】离线安装chrome插件：JetBrains IDE Support
1. 在能够上网的计算机上，使用Chrome网上插件商店下载安装插件，网速过慢的需要等待或者代理。
2. 通常在下面的路径中可以找到对应版本的插件安装目录，将该目录保存。
  C:\Users\计算机用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions\hmhgeddbohgjknpmjagkdomcpobmllji（类似一长串）
3. 在离线的计算机中，打开Chrome，在菜单中找到“更多工具”-“扩展程序”并打开，打开“开发者模式”。
  
  文章图片
  “更多工具”-“扩展程序”
4. 点击“加载已解压的扩展程序”，打开刚才保存的扩展程序文件夹，即可安装，忽略安全警告。
  5.关于插件的设置需要注意一点，下图中的端口与WebStorm中的要一致。如下图所示：
  
  文章图片
  端口要与WebStorm中的一致
设置WebStorm：在WebStrom中，“File-Setting”中，搜索框中输入“Live Edit”，打开该选项，按照下图所示进行设置。

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

文章图片
Debug模式运行