IntelliJ 2021使用TypeScript调试器调试Angular应用连接失败

问题场景 #

• 运行环境：Ubuntu操作系统，Node.js v16.14.2，IntelliJ 2021，使用内置TypeScript/JavaScript调试器调试Angular应用
• 项目结构：单体仓库架构，Angular前端作为子文件夹存放在Java项目中，在Java项目根目录执行sbt run可同时启动前后端服务：Java后端默认监听9000端口，内置Angular服务默认监听4200端口
• 复现步骤：
  1. 在Java项目根目录执行sbt run启动前后端服务
  2. 按照教程要求需要单独启动前端服务，因4200端口已被sbt run拉起的Angular进程占用，进入Angular子目录执行npm start -- --port 4201，在4201端口启动独立Angular服务
  3. 修改IntelliJ JavaScript Debug配置，将访问URL改为http://localhost:4201，选择Chrome浏览器并填写本机Chromium安装路径
  4. 4201端口服务启动完成后点击调试按钮，功能未正常运行，数秒后弹出报错
• 报错信息：

Waiting for connection to localhost: 39807.
Please ensure that the browser was started successfully with remote debugging port opened. Port cannot be opened if Chrome having the same User Data Directory is already launched.

• 核心疑问：39807端口并非settings > debugger > built-in server中配置的端口，不清楚端口来源，需要可行的修复方案。

原因说明 #

报错中的39807端口是IntelliJ启动调试专用浏览器实例时，随机分配的Chrome远程调试通信端口，和用户手动配置的内置服务器端口没有关联，不需要手动指定或修改该端口。
触发该报错的根本原因是：当前系统中已有运行中的Chrome/Chromium进程，占用了IntelliJ调试浏览器默认使用的用户数据目录，导致IntelliJ无法拉起携带--remote-debugging-port参数的独立浏览器实例，自然无法和随机分配的调试端口建立连接。

修复方案 #

按以下优先级依次操作即可解决问题：

1. 彻底关闭所有正在运行的Chrome、Chromium窗口，终端执行以下命令检查是否存在残留后台进程：

   ps aux | grep -E '(chrome|chromium)' | grep -v grep
   

   如果输出中存在相关进程，执行kill -9 <进程ID>命令全部清理，之后重新点击调试按钮即可正常连接。
2. 如果需要保留日常使用的浏览器窗口不关闭，可以给调试用浏览器指定独立的用户数据目录，彻底避免目录冲突：
   • 打开Run > Edit Configurations，找到当前使用的JavaScript Debug配置项
   • 在浏览器路径设置下方的启动参数输入框中，添加如下参数：

     --user-data-dir=/tmp/intellij-chrome-debug-profile
     

   • 保存配置后重新启动调试，该参数会让调试用浏览器实例使用临时目录下的独立配置文件，和系统中正在运行的浏览器进程完全隔离，不会产生冲突。
3. 额外配置校验（前两步无效时检查）：
   • 确认配置中填写的Chromium路径为可执行文件路径，可在终端执行which chromium获取准确路径，不要填写桌面快捷方式路径
   • 确认http://localhost:4201可直接在普通浏览器中正常访问，页面加载、控制台无报错
   • 如果系统开启了全局代理，在浏览器启动参数中额外添加--no-proxy-server参数，避免代理拦截本地调试端口的通信。

内容的提问来源于stack exchange，提问作者rapt