手把手教你WebStorm+chrome实现时时调试刷新

By柏小白

手把手教你WebStorm+chrome实现时时调试刷新

  1. WebStorm 安装

    WebStorm是一款收费的IDE,即使你不购买也可以免费使用30天,个人认为非常靠谱。

    进入官网,点击Download即可下载最新版本,这里默认window版本;

    安装过程没有一般默认即可,安装之后打开页面如图

    1

    2

    3

  2. WebStorm设置

    WebStorm 是通过live edit功能与浏览器实现时时刷新,这里在页面中点击Configure然后选择Settings打开WebStore的设置对话框;

    在搜索框输入live edit回车找到live edit选项,选中Auto in(ms)然后设置时间。然后勾选Restart if hotswap fails.然后点击apply应用即可

    4
  3. Chrome插件安装

    打开Chrome在地址栏右侧最后面点击三杠,选择“更多工具”->”扩展程序”;

    打开已安装的扩展在页面底部点击“获取更多扩展程序”进入Chrome网上商店,搜索JetBrains IDE Suport扩展程序。点击“添加至Chrome“按钮,安装该扩展程序到Chrome。安装完成后会在地址栏后面看到对应的图标。

    5

    6

    7

    8ad4b31c8701a18bad38c40d992f07082938fea5

     

  4. 简单示例

    软件设置完毕,扩展也安装。这时候可以尝试一把了。

    创建一个项目,文件test.html。如图所示。然后右击文件选择“Debug

    ‘test.html’”设置默认打开浏览器为Chrome。然后就可以愉快的编写代码了。

    8
    9
    10
    11
    转载:https://jingyan.baidu.com/article/454316ab68ac03f7a7c03ae3.html

 

About the author

柏小白 administrator

Leave a Reply