美文网首页
ubuntu中WebStorm使用Chrome实时调试

ubuntu中WebStorm使用Chrome实时调试

作者: 夜游上河园 | 来源:发表于2019-02-19 22:45 被阅读0次

    目标

    在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模式运行

    最终效果

    即时编辑效果图

    相关文章

      网友评论

          本文标题:ubuntu中WebStorm使用Chrome实时调试

          本文链接:https://www.haomeiwen.com/subject/cxrqyqtx.html