`

WebStorm live edit功能与浏览器实现同步

 
阅读更多
WebStorm live edit功能与浏览器实现同步实现步骤:
1、打开WebStorm的设置对话框，找到live edit选项，选中Enable live editing。

2、打开Chrome浏览器，进入Chrome网上商店，搜索JetBrains IDE Suport扩展程序。点击“添加至Chrome“按 钮，安装该扩展程序到Chrome。这时候，Chrome浏览器工具栏上就会出现一个JB图标。注(有时可能在网上商店里搜索不到，我这里提供了一个地 址：https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji )

3、在WebStorm中新建一个html文件，然后按ALT+F2打开浏览器选择浮动窗，选Chrome，查看正在编辑的网页。

4、切换到WebStorm，修改html/css/JS，然后切换了到Chrome，你会发现chrome那边跟着也变了。如果你觉得效果还不够理想，那就并排打开WebStorm和Chrome，惊呼So Cool去吧。

分享到：
| WebStorm+Node.js开发环境的配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    webstorm-settings:Webstorm同步设置

    "Webstorm-settings"通常指的是WebStorm的配置设置，包括代码风格、快捷键、项目模板等个性化设定，它们可以被保存并导入到其他WebStorm实例中，以实现工作环境的快速同步。 在WebStorm中，同步设置是通过`...

    使用webstorm实现个人简历网页

    在本文中，我们将深入探讨如何使用WebStorm这款强大的前端开发集成环境来创建一个具有点击照片放大功能的个人简历网页。WebStorm是JetBrains公司推出的一款专为JavaScript、HTML和CSS等Web开发语言设计的IDE，它提供...

    WebStorm 10.0.4汉化包

    7. **实时预览**：通过Live Edit功能，可以在浏览器中实时查看代码修改的效果，无需手动刷新页面。 8. **集成测试**：对于单元测试，WebStorm支持Mocha、Jest等测试框架，可以快速运行和调试测试用例。 9. **代码...

    谷歌浏览器 webstorm 网页开发调试插件

    通过在Chrome浏览器中集成WebStorm的功能，开发者可以在浏览器环境中直接进行代码编写、调试和测试，实现无缝的前后端开发流程。 WebStorm是JetBrains公司的旗舰级产品，是一款强大的JavaScript IDE，支持包括HTML...

    webstorm-settings:WebStorm设置同步回购

    标题中的"WebStorm设置同步回购"指的是通过特定的方法或工具实现WebStorm配置的备份和共享，这样可以在不同设备间或团队成员间保持一致的开发环境。 在WebStorm中，用户可以定制大量的设置，包括但不限于代码风格、...

    WebStorm使用AmazeUI开放移动页面

    在本文中，我们将深入探讨如何使用WebStorm IDE与AmazeUI框架来开发高效的移动页面，特别是在实现目录折叠和页面横屏滑动效果方面。WebStorm是JetBrains公司推出的一款强大的集成开发环境，专为Web开发者设计，支持...

    使用webstorm开发nodejs中文WORD版

    资源名称：使用webstorm开发nodejs 中文WORD版内容简介：本文档主要讲述的是使用webstorm开发nodejs；希望对大家会有帮助；感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学...

    WebStorm2017汉化包

    8. **Live Edit**：与浏览器联动，实时预览代码修改效果，加速前端开发流程。 9. **框架支持**：对React、Angular、Vue.js等热门前端框架提供了深度集成，包括智能代码提示、模板支持、热重载等。 汉化包的安装...

    完美解决webstorm启动索引文件卡死的问题

    WebStorm是JetBrains公司推出的一款针对Web开发者的集成开发环境(IDE)，提供代码补全、代码分析、实时错误检查等功能，广泛应用于Web前端和后端的开发。对于前端开发者而言，经常需要管理大量的JavaScript依赖项，这...

    webstorm安装与设置.docx

    * WebStorm 是一个功能强大的 IDE，提供了代码编辑、代码 Completion、代码 Debug 等功能。 * 使用 WebStorm 可以提高开发效率，简化开发过程。 本文档为读者提供了 Web 前端开发的基础知识和 WebStorm 的使用指南...

    前端开发IDE、JS神器WebStorm5教程------免费下载.pdf

    WebStorm 5 提供智能的代码补全功能，支持不同浏览器的提示，包括所有用户自定义的函数（项目中），代码补全包含了所有流行的库，例如 JQuery, YUI, Dojo, Prototype, Mootools and Bindows。 代码格式化 WebStorm...

    webstormwebstorm1

    webstorm

    webstorm9设置scss和typescript

    5. **实时编译**：启用实时编译（Live Edit），在`Preferences` -> `Languages & Frameworks` -> `SCSS`中，勾选`Enable Live Edit`，这样修改SCSS文件后，浏览器会自动刷新显示CSS更新。 **TypeScript** ...

    Webstorm 10——最全文档教学安装包

    6. **Live Edit**：这个特性允许你在浏览器中实时预览代码更改，无需手动刷新页面，极大地提升了开发效率。 7. **项目导航**：通过“Structure”视图和“Go to”功能，可以快速定位到代码的任何部分，节省大量查找...

    webstorm汉化包下载

    而“汉化jar”则是实现WebStorm界面汉化的关键文件，它是Java Archive的简称，包含了汉化的资源文件，用于替换原英文版本中的相应文件，实现界面的中文显示。另外，“说明”文件可能包含了汉化过程的详细步骤，帮助...

    webstorm-settings:同步我的网络风暴设置

    首先，我们需要理解WebStorm中的设置同步功能。WebStorm允许用户通过JetBrains账户来同步各种设置，包括但不限于代码风格、键盘快捷键、项目模板、插件设置等。这样，无论在哪台电脑上工作，开发者都可以快速地恢复...

    WebStorm主题，类似VsCode经典主题

    总的来说，这个WebStorm主题旨在提供一个与VsCode经典主题相似的开发环境，同时保留WebStorm自身的强大功能。通过自定义字体、颜色和语法高亮，用户可以创建一个既符合个人风格又高效的开发空间。而导入导出设置的...

    Webstorm 提交代码到Git

    ### Webstorm 提交代码到Git #### 知识点概览 - **Webstorm与Git集成**：如何在Webstorm中设置...通过以上步骤，你可以顺利完成使用Webstorm将编辑的代码提交到GitHub的过程，实现对项目源代码的有效管理和版本控制。

    webstorm课程练习final1.rar

    5. **Live Edit**：体验WebStorm的实时预览功能，能在浏览器中即时看到代码修改的效果，加快了前端开发的迭代速度。 6. **自动化构建与测试**：了解如何配置Gulp、Grunt或Webpack等构建工具，以及如何集成Mocha、...

Magicbox
Global site tag (gtag.js) - Google Analytics