配置 JavaScript 调试器
IntelliJ IDEA 为您的 client-side JavaScript 代码提供内置调试器。 内置调试器会在您 启动调试会话时自动启动。
为了确保调试成功，您只需指定内置 web 服务器端口并接受 IntelliJ IDEA 为其他调试器选项建议的默认设置。
开始之前
确保在设置中启用 JavaScript and TypeScript捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 JavaScript and TypeScript。 如需了解有关插件的更多信息，请参阅 管理插件。
请确保在设置中启用 JavaScript Debugger 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 JavaScript Debugger。 如需了解有关插件的更多信息，请参阅 管理插件。
设置内置 web 服务器端口
按 Ctrl+Alt+S 打开设置，然后选择 。
在 内置服务器 区域，指定内置 web 服务器运行的端口。 默认情况下，此端口设置为默认的 IntelliJ IDEA 端口 63342 ，IntelliJ IDEA 通过该端口接受来自服务的连接。 您可以将端口号设置为从 1024 开始的任何其他值。
自定义默认调试器配置
抑制调用
通过按下 Ctrl+Alt+S 打开设置，并导航到 。
通过清除 可接受外部连接(E) 或 允许未签名的请求(A) 复选框，分别抑制来自其他计算机或 IntelliJ IDEA 外部的对内置服务器文件的调用。
选择删除断点的方式
默认情况下，您可以通过点击鼠标左键切换断点。 要更改此行为：
通过按下 Ctrl+Alt+S 打开设置，并导航到 。
在 移除断点 区域中，选择适当的选项。
高级选项:
来管理属性列表。
使用默认的 Chrome 用户数据启动调试会话
您可能会注意到，您的调试会话在一个新的窗口中启动，使用自定义的 Chrome 用户数据 而不是您的默认数据。 因此，窗口看起来很不寻常，例如您的书签、浏览器历史记录和扩展都消失了，这会完全破坏您的开发体验。 因为 IntelliJ IDEA 使用 Chrome 调试协议 并使用 --remote-debugging-port 选项运行 Chrome。 然而，如果 Chrome 已经启动，则无法为具有相同用户数据的新建或现有 Chrome 实例打开调试端口。 因此，IntelliJ IDEA 总是用自定义用户数据在一个新窗口中开始调试会话。
要使用熟悉的外观和感觉打开一个新的 Chrome 实例，请在 IntelliJ IDEA 中配置 Chrome 以使用您的用户数据启动。 在这种情况下，在开始调试会话之前，始终确保 Chrome 没有使用您的用户数据运行。 否则，IntelliJ IDEA 仍会使用您的用户数据启动另一个 Chrome 实例，但无法为其打开调试端口。 因此，IntelliJ IDEA 调试器未能连接到新 Chrome 实例中的应用程序，并且调试会话无法启动。
在 IntelliJ IDEA 中配置 Chrome 以启动您的 Chrome 用户数据
将您的 Chrome user data保存到计算机上的任意位置。
按 Ctrl+Alt+S 打开设置，然后选择 。
要创建新的 Chrome 配置，请点击
。 列表中出现了一个新项。 在 路径 字段中，指定 Chrome 安装文件夹的路径。选择新配置并点击 编辑 按钮(
)。在 Chrome 设置 对话框中，选择 使用自定义用户数据目录(U) 复选框，并在 IntelliJ IDEA 设置中指定 用户数据目录 的路径。
如果您有多个 用户数据配置文件 ，它们中的每一个都存储在一个单独的子目录中。 默认情况下，IntelliJ IDEA 使用 默认 子目录中的配置文件。 要使用其他配置文件，请在 命令行选项 字段中指定，如下所示：
--profile-directory="<profile_to_use>"
请按照 Web Browsers中描述的将您的Chrome浏览器配置标记为 default。 请不要忘记从 浏览器 列表中选择必要的浏览器在 创建运行/调试配置 时。