codecamp

HTML,CSS和JavaScript中的实时编辑

IntelliJ IDEA提供了实时编辑功能,使您可以在调试会话期间动态预览HTML,CSS或JavaScript代码的更改。您编辑的页面的实时内容显示在“调试”工具窗口的Elements选项卡中 。

实时编辑通过JetBrains Chrome扩展程序运行,因此仅适用于Google Chrome。

提示:实时编辑也适用于包含或生成HTML,CSS或JavaScript的其他文件类型。

在开始使用之前,按照插件管理中的说明安装并启用LiveEdit插件。

安装JetBrains Chrome扩展程序

在调试会话过程中,该JetBrains Chrome扩展负责HTML、CSS和JavaScript中的实时编辑。该扩展还显示了DOM树和实际页面的源代码。

安装JetBrains Chrome扩展程序

  1. 在Chrome Web Store中打开JetBrains IDE支持页面。
  2. 单击“添加到Chrome”按钮 chrome扩展添加到chrome,然后在打开的“确认新扩展”对话框中单击“添加”。“添加到Chrome”按钮更改为“添加到Chrome”铬扩展添加到铬

安装扩展程序后,Chrome地址栏旁会显示chrome extenstion jb图标图标。

激活实时编辑

默认情况下,禁用“实时编辑”,因此,你需要启用它:

  1. 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“构建,执行,部署”下的“调试器” ,然后单击“实时编辑”。将打开“实时编辑”页面。
  2. 选中“Chrome中的更新应用程序”复选框。这可以实现HTML和CSS的即时预览。
  3. 要在JavaScript中启用“实时编辑”,请选中“更新时更新”复选框。 
  4. 设置将更改应用于正在运行的应用程序所用的时间:接受默认值300ms,或使用相应字段旁边的spin框指定自定义值。
  5. 要配置突出显示,请选中“在插入符更改时在浏览器中突出显示当前元素”复选框。否则,在调试会话期间,您必须按住Shift并单击要突出显示的元素。
  6. 如果客户端代码的更改自动上载失败,而要使IntelliJ IDEA重新启动服务器,请选中“如果hotswap失败则重新启动”复选框。

激活,取消激活和卸载JetBrains Chrome扩展程序

  • JetBrains Chrome扩展程序的控制通过chrome://extensions页面提供。要打开该页面,只需在Chrome地址栏输入chrome://extensions即可。或者,单击“   自定义并控制Google Chrome(铬扩展控制图标)”,在上下文菜单中选择“设置”,然后在打开的chrome://settings页面上单击“扩展”。
  • 要取消激活扩展,请清除“已启用”复选框。复选框名称将更改为“启用”。
  • 要激活扩展,请选中“启用”复选框。
  • 要卸载扩展程序,请点击“从Chrome移除”按钮 镀铬扩展删除

更改用于连接到IntelliJ IDEA的默认端口

在使用实时编辑进行调试会话的过程中,Chrome扩展程序会监听调用扩展的JetBrains IDE的端口。包含IntelliJ IDEA的每个IDE都有自己的默认端口。

如果由于某种原因,默认的IntelliJ IDEA端口已经忙,IntelliJ IDEA会找到最近的可用端口并从中启动。这会导致冲突:IntelliJ IDEA正在“新”端口上运行,而Chrome扩展程序仍然会监听先前启动的产品的端口。

当您使用实时编辑启动调试会话时会发生冲突:扩展无法通过默认端口连接,IntelliJ IDEA等待来自扩展的连接,并显示以下消息及其实际运行的端口号(例如,current port 63342) :

js_debug_install_extension.png

在Chrome扩展选项中指定实际的IntelliJ IDEA端口

  1. 右键单击chrome extenstion jb图标,并在上下文菜单中选择“选项”。带有Chrome扩展程序选项的网页会打开,显示连接到IntelliJ IDEA的参数。
  2. 在“IDE连接”区域中,在“端口”选值框中指定实际的IntelliJ IDEA端口。

覆盖默认的CORS设置

假设您正在调试的页面使用实时编辑请求资源,出于安全原因,该资源可以防止通过CORS设置进行访问。您可以通过更改Chrome扩展选项来启用对受保护资源的访问权限。

  1. 右键单击chrome extenstion jb图标,并在上下文菜单中选择“选项”。带有Chrome扩展程序选项的网页会打开,显示连接到IntelliJ IDEA的参数。
  2. 在“Force CORS”文本框中,键入定义要使其可访问的URL地址的模式,例如:http://youtrack.jetbrains.com/rest/*。
调试部署到远程服务器的JavaScript
查看实际的HTML DOM
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

IntelliJ IDEA的一般准则

什么是IntelliJ IDEA项目

使用IntelliJ IDEA的意图行为

IntelliJ IDEA使用运行/调试配置

特定于VCS的程序

IntelliJ IDEA语言和特定框架指南

IntelliJ IDEA的数据库和SQL功能

IntelliJ IDEA使用之JavaServer Faces(JSF)

IntelliJ IDEA:分析PHP应用程序的性能

IntelliJ IDEA:调试PHP应用程序

IntelliJ IDEA:适用于PHP的Google App Engine

IntelliJ IDEA更多内容

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }