Chrome调试错误Crbug/1173575解决方案

问题描述

当使用Visual Studio Code的调试功能启动Chrome浏览器时，经常会出现以下错误：

Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551

同时浏览器可能会显示"无法访问此站点"和"err_connection_refused"错误。值得注意的是，这个错误信息具有误导性，它实际上与Chrome或已弃用的功能无关，而是表示无法建立连接。

根本原因分析

这个错误通常是由于以下原因之一导致的：

1. 本地开发服务器未运行 - 调试器尝试连接的端口上没有运行任何服务
2. 端口号配置错误 - launch.json中的端口与实际服务端口不匹配
3. 网络设置问题 - 防火墙、VPN或网络配置阻止了连接
4. 浏览器扩展干扰 - 广告拦截器或其他扩展程序阻止了连接
5. 项目配置问题 - 缺少依赖项或配置错误

解决方案

1. 确保服务器正在运行

最常见的解决方案是确保您的开发服务器已经启动并在正确的端口上运行：

# Angular项目
ng serve

# React项目
npm start

# 其他Node.js项目
node server.js

TIP

调试器不会自动启动您的开发服务器。您需要先在终端中手动启动服务器，然后再启动调试会话。

2. 检查端口配置

确保launch.json文件中的端口与实际服务端口匹配：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200", // 确保端口正确
            "webRoot": "${workspaceFolder}"
        }
    ]
}

常见的开发服务器默认端口：

• Angular: 4200
• React: 3000
• Vue: 8080
• Live Server: 5500

3. 使用preLaunchTask自动启动服务器

您可以配置VS Code在调试前自动启动服务器。首先创建或修改launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "start-server" // 添加此行
        }
    ]
}

然后创建或修改.vscode/tasks.json文件：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "start-server",
            "type": "npm",
            "script": "start",
            "isBackground": true,
            "problemMatcher": {
                "owner": "typescript",
                "pattern": "$tsc",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": ".*",
                    "endsPattern": "Compiled|Failed to compile"
                }
            }
        }
    ]
}

4. 检查网络和浏览器设置

• 关闭VPN：VPN可能会干扰本地连接
• 禁用广告拦截器：特别是uBlock Origin等扩展
• 清除浏览器缓存：Chrome开发者工具 → 网络标签 → 禁用缓存
• 检查网络节流设置：确保不是"离线"模式

5. 其他特定框架解决方案

Angular项目

确保使用正确的调试配置：

{
    "name": "ng serve",
    "type": "chrome",
    "request": "launch",
    "preLaunchTask": "npm: start",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
}

React项目

{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:3000/",
    "webRoot": "${workspaceFolder}",
    "preLaunchTask": "react"
}

Blazor项目

• 检查按钮类型，确保不是"submit"类型
• 验证项目引用是否正确配置

Flutter项目

移除VSCode设置中的--no-sound-null-safety参数

6. 高级故障排除

如果上述方法都无效，尝试以下高级解决方案：

1. 删除.vscode文件夹并重新创建调试配置
2. 重置网络设置（Windows：设置 → 网络和Internet → 网络重置）
3. 检查hosts文件（C:/Windows/System32/drivers/etc/hosts）是否包含必要的本地主机条目
4. 使用127.0.0.1代替localhost：有时DNS解析可能有问题
5. 确保所有依赖项已安装：运行npm install或相应包管理命令

预防措施

1. 始终在调试前确认服务器已运行或在launch.json中配置preLaunchTask
2. 定期检查并更新VS Code和浏览器扩展
3. 确保项目依赖项完整且最新
4. 使用版本控制跟踪launch.json和tasks.json配置更改

总结

Crbug/1173575错误虽然提示信息具有误导性，但通常是由于简单的连接问题引起的。通过系统地检查服务器状态、端口配置和网络设置，大多数情况下都能快速解决这个问题。最重要的是要记住，VS Code的调试器需要先有服务器在目标端口上运行，然后才能成功附加和调试。

WARNING

如果问题仍然存在，请尝试重启计算机，这可以解决许多临时的网络和进程冲突问题。