调试部署到远程服务器的 JavaScript
在你开始前
确保在Settings/Preferences |上启用了JavaScript 和 TypeScript以及JavaScript 调试器所需的插件。插件页面，选项卡Installed，有关详细信息，请参阅管理插件。
如配置 JavaScript 调试器中所述配置内置调试器。
要使您对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中而不重新加载页面，请激活实时编辑功能。有关详细信息，请参阅HTML、CSS 和 JavaScript中的实时编辑。
什么是远程 Web 服务器？
在 PhpStorm 中，文档根目录在当前项目之外的任何服务器都称为remote。该服务器可能实际运行在物理上的远程主机或您的机器上。
例如，如果您的项目位于C:/PhpStormProjects/MyProject并且 Web 服务器文档根目录是C:/XAMPP/htdocs，则对于 PhpStorm，此 Web 服务器是remote。
如何将服务器上的应用程序源与我的 PhpStorm 项目中的本地副本同步？
要在远程Web 服务器上调试应用程序，您需要在 PhpStorm 项目中拥有其源代码的副本。要同步本地和远程源，请按照创建远程服务器配置和配置与 Web 服务器的同步中所述创建部署配置。
在远程服务器上调试应用程序
根据需要在 JavaScript 代码中设置断点。
创建JavaScript Debug类型的调试配置：
从主菜单中，选择，然后在Edit Configurations对话框中，单击工具栏上的 并从列表中
选择JavaScript Debug 。在打开的运行/调试配置：JavaScript 调试对话框中，指定运行应用程序的 URL 地址。根据服务器访问配置，此 URL 地址应该是Web 服务器根 URL和相对于 Web 服务器文档根的 HTML 文件路径的串联，请参阅配置与 Web 服务器的同步。
单击确定以保存配置设置。
在工具栏的Select run/debug configuration列表中选择新创建的配置，然后单击Debug
。运行配置中指定的 HTML 文件将在所选浏览器中打开，并出现调试工具窗口。在调试工具窗口中，照常进行：单步调试程序、 暂停和恢复程序执行、暂停时检查、查看实际的 HTML DOM、在控制台中运行 JavaScript 代码片段，等等。.
例子
假设您有一个由index.html文件和App.js文件组成的简单应用程序，其中index.html引用App.js。
现在让我们将我们的简单应用程序部署到本地 Web 服务器，请参阅部署您的应用程序。在此示例中，它是 Apache：
当使用本地 Web 服务器（如我们的示例中的 Nginx 或 Apache）时，或者 Web 服务器位于远程主机上时，您需要创建运行/调试配置来启动 JavaScript 调试器。为此，请单击 PhpStorm 窗口右上角的列表，然后选择Edit Configurations。或者，选择从主菜单
在打开的运行/调试配置对话框中，单击并从列表中
选择JavaScript 调试：
指定您正在运行应用程序的 URL：
在我们的示例中，服务器上的本地项目结构和文件结构是相同的，因此不需要映射。
现在我们可以开始调试：从 PhpStorm 窗口右上角的列表中选择新的运行/调试配置，然后单击
列表右侧：
配置映射
映射设置 Web 服务器上的文件与其本地副本之间的对应关系。您需要映射：
当您的应用程序在远程Web 服务器上部署和运行时。
除了项目根目录之外，您还定义了多个资源根文件夹。
在大多数情况下，PhpStorm 通过重用部署配置中的映射来自动设置路径映射。如果您的应用程序结构复杂，则需要额外的手动配置。
配置映射
如调试应用程序中所述，创建JavaScript 调试类型的调试配置。
在本地文件的远程URL区域，根据当前使用的部署配置将文件和文件夹映射到服务器上文件和文件夹的URL地址，请参见将本地文件夹映射到服务器上的文件夹以及访问它们的URL地址。