调试部署到远程服务器的 JavaScript
最后修改时间:2023 年 10 月 11 日所需插件:
Javascript and TypeScript
, JavaScript Debugger
- 这些插件仅在 IntelliJ IDEA Ultimate 中可用,默认情况下启用。
笔记
仅Google Chrome和其他基于 Chromium 的浏览器支持 JavaScript 代码的调试。
在你开始之前
确保在设置中启用JavaScript 和 TypeScript捆绑插件。按打开 IDE 设置,然后选择插件。单击“已安装”选项卡。在搜索字段中,输入JavaScript 和 TypeScript。有关插件的更多信息,请参阅管理插件。CtrlAlt0S
确保在设置中启用JavaScript 调试器捆绑插件。按打开 IDE 设置,然后选择插件。单击“已安装”选项卡。在搜索字段中,输入JavaScript 调试器。有关插件的更多信息,请参阅管理插件。CtrlAlt0S
配置内置调试器,如配置 JavaScript 调试器中所述。
要使您对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中而无需重新加载页面,请激活实时编辑功能。有关实时编辑功能的更多信息,请参阅HTML、CSS 和 JavaScript 中的实时编辑。
什么是远程网络服务器?
在 IntelliJ IDEA 中,文档根目录位于当前项目之外的任何服务器都称为远程服务器。该服务器实际上可能在物理远程主机或您的计算机上运行。
例如,如果您的项目位于C:
如何将服务器上的应用程序源与 IntelliJ IDEA 项目中的本地副本同步?
要在远程Web 服务器上调试应用程序,您需要在 IntelliJ IDEA 项目中拥有其源代码的副本。要同步本地和远程源,请创建部署配置,如创建远程服务器配置和配置与服务器同步中所述。
调试远程服务器上的应用程序
根据需要在 JavaScript 代码中设置断点。
创建JavaScript 调试类型的运行/调试配置:
转到“运行”| 编辑配置,然后在“编辑配置”对话框中打开的“编辑配置”对话框中,单击工具栏上的“添加”按钮 ( ),并从列表中选择“JavaScript 调试” 。
在打开的“运行/调试配置:JavaScript 调试”对话框中,指定运行应用程序的 URL 地址。根据服务器访问配置,该 URL 地址应该是Web 服务器根 URL和相对于 Web 服务器文档根的 HTML 文件路径的串联。有关详细信息,请参阅配置与服务器的同步。
单击“确定”保存配置设置。
在工具栏的“选择运行/调试配置”列表中选择新创建的配置,然后单击“调试”按钮。运行配置中指定的 HTML 文件将在所选浏览器中打开,并显示“调试”工具窗口。
在“调试”工具窗口中,照常进行:单步执行程序、 停止和恢复程序执行、挂起时检查程序、查看实际的 HTML DOM、在控制台中运行 JavaScript 代码片段等。
提示
默认情况下,调试会话会在带有自定义Chrome 用户数据的新窗口中启动。要打开具有您熟悉的外观的新 Chrome 实例,请在 IntelliJ IDEA 中配置 Chrome 以从您的用户数据开始。有关详细信息,请参阅使用默认 Chrome 用户数据启动调试会话。
例子
假设您有一个简单的应用程序,由一个index.html文件和一个App.js文件组成,其中index.html引用App.js。
现在让我们将简单的应用程序部署到本地 Web 服务器,请参阅部署您的应用程序。在以下示例中,它是 Apache:
当使用本地 Web 服务器(例如 Nginx 或 Apache)(如我们的示例中所示)或 Web 服务器位于远程主机上时,您需要创建运行/调试配置来启动 JavaScript 调试器。为此,请单击 IntelliJ IDEA 窗口右上角的列表,然后选择Edit Configurations。或者,选择运行 | 从主菜单编辑配置:
在“运行/调试配置”对话框中,单击并从列表中选择“JavaScript 调试” :
指定正在运行的应用程序的 URL:
在我们的示例中,本地项目结构和服务器上的文件结构相同,因此不需要映射。
现在我们可以开始调试:从 IntelliJ IDEA 窗口右上角的列表中选择新的运行/调试配置,然后单击列表右侧的“调试”按钮( ):
配置映射
映射设置 Web 服务器上的文件与其本地副本之间的对应关系。您需要映射:
当您的应用程序部署并在远程Web 服务器上运行时。
当您除了项目根之外还定义了多个资源根文件夹时。
在大多数情况下,IntelliJ IDEA 通过重用部署配置中的映射来自动设置路径映射。如果您的应用结构比较复杂,则需要额外的手动配置。
配置映射
创建JavaScript 调试类型的调试配置,如调试应用程序中所述。
在“本地文件的远程URL”区域中,根据当前使用的部署配置,将文件和文件夹映射到服务器上文件和文件夹的URL地址,请参见将本地文件夹映射到服务器上的文件夹以及访问的URL地址。
感谢您的反馈意见!