WebStorm实现浏览器代码同步刷新——从此告别ctrl+s、F5

梦里梦外; 2022-02-19 14:55 838阅读 0赞

## 前言 ##

这次介绍的是使用WebStorm代码编辑器，并给chrome装上插件。完成代码同步浏览器，实现同步刷新的效果。从此彻底告别ctrl+s、F5，告别经常重复的这两个动作。  
选择WebStorm实现的效果是比较好的，在它的页面右边有多个多个浏览器logo可供选择。方便你可以在多个浏览器上查看效果（前提是这几个浏览器你都已经安装好）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70]

## 步骤一 ##

###### 首先我们要对WebStorm进行设置 ######

*  打开WebStorm，打开文件->构建、执行、部署->调试器->LiveEdit。若没有安装汉化包的webstorm->file->setting搜 live edit 。
 *  勾选Update application in Chrome on changes in 50 ms 这个50ms，根据你们的需求填写，若需要1秒之后刷新填写1000ms即可。
 *  勾选Restart if hotswap fails  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 1]  
    这样我们在WebStorm上就设置好了，接下来让我们来设置chrome浏览器上的。

## 步骤二 ##

在chrome浏览器的安装JetBrains IDE Support。

*  点击浏览器右上角的三个小点->选择更多工具->扩展程序
 *  在网上搜索JetBrains IDE Support，点击安装
 *  若不能上谷歌，我这里也提供本地下载包\[JetBrains IDE Support\]，方便大家安装([http://d.w3h5.com/down/tools/JetBrains\_IDE\_Suport/JetBrains\_IDE\_Support\_2.0.9.crx][http_d.w3h5.com_down_tools_JetBrains_IDE_Suport_JetBrains_IDE_Support_2.0.9.crx])  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 3]  
    ![20190416191537172.png][]  
    安装完成之后，在浏览器右上角会显示JB黑色logo，即安装完成。
    
    **接着返回WebStorm页面，点击右键选择以下两个就设置完成了。**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 4]  
    **需要注意的是，只能在页面右键选择调试才可以。如果是用其他浏览器打开，或者是本地文件打开都是不能随时刷新的。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70]: /images/20220219/d496948b5d0e4ca3b5fc7c2fe06789b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 1]: /images/20220219/c8f3c6d368844fff8ae31c7536fdde63.png
[http_d.w3h5.com_down_tools_JetBrains_IDE_Suport_JetBrains_IDE_Support_2.0.9.crx]: http://d.w3h5.com/down/tools/JetBrains_IDE_Suport/JetBrains_IDE_Support_2.0.9.crx
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 2]: /images/20220219/90bdf734816d40f586da273438ec96ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 3]: /images/20220219/1e9d84e98d824fb7899615a2f5ec1a75.png
[20190416191537172.png]: /images/20220219/8f6886ab3e28469a84e57ab1ee75525a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 4]: /images/20220219/6884c16d2cd14db6b115bc662c425b6d.png