Chrome Debugging: Fixing Crbug/1173575 Connection Issues

The Crbug/1173575: non-JS module files deprecated error in Chrome often appears when trying to debug web applications in Visual Studio Code. This misleading message typically indicates a connection issue rather than actual JavaScript module problems.

Common Causes and Solutions

1. Port Mismatch in Debug Configuration

The most frequent cause is a mismatch between your application's running port and your debug configuration.

Example Configuration Issue

Your Angular/React app might run on port 3000 while launch.json points to 8080:

// launch.json (incorrect)
{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080", // Wrong port
    "webRoot": "${workspaceFolder}"
}

// launch.json (corrected)
{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200", // Match your app's port
    "webRoot": "${workspaceFolder}"
}

2. Server Not Running

The debugger requires your development server to be running before launching Chrome.

Important

Unlike some IDEs, Visual Studio Code's debugger doesn't automatically start your development server unless configured to do so.

Solution: Start your server manually first:

# For Angular
ng serve

# For React
npm start

# For Next.js
next dev

3. Configure Automatic Server Startup

Add a tasks.json file to automate server startup before debugging:

// .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."
                }
            }
        }
    ]
}

Then update your launch.json:

{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "Debug Chrome",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}",
    "preLaunchTask": "start-server" // Added this line
}

Framework-Specific Solutions

Angular Projects

Ensure your launch.json matches Angular's default port (4200):

{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "Angular Debug",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
}

React/Next.js Applications

{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "React Debug",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}"
}

Blazor Applications

• Ensure button types are set to type="button" instead of type="submit"
• Verify project references between .Client and .Server projects

Network and Browser Issues

Chrome Network Throttling Settings

Check Network Tab Settings

1. Open Chrome Developer Tools (F12)
2. Go to Network tab
3. Ensure throttling is set to "No throttling" (not "Offline")

Browser Extensions

Some extensions (ad blockers, privacy tools) can interfere with localhost connections:

1. Try incognito mode
2. Disable extensions temporarily
3. Whitelist localhost in your ad blocker

Clear Browser Cache

Cached files might cause conflicts:

1. Open Chrome Developer Tools
2. Right-click refresh button
3. Select "Empty Cache and Hard Reload"

Advanced Troubleshooting

Hosts File Issues

Windows may overwrite your hosts file, removing localhost entries:

1. Check C:/Windows/System32/drivers/etc/hosts
2. Ensure it contains: 127.0.0.1 localhost
3. Save as administrator if changes are needed

VPN and Network Configuration

VPN connections can interfere with localhost access:

1. Disconnect VPN temporarily
2. Reset network settings (Windows: Settings → Network & Internet → Network reset)

MIME Type Issues

If using .mjs files, ensure proper MIME types and path references:

<!-- Incorrect -->
<script type="module" src="module.mjs"></script>

<!-- Correct -->
<script type="module" src="./module.mjs"></script>

Visual Studio Code Configuration

Delete .vscode Folder

Corrupted debug configurations can cause this error:

1. Close VS Code
2. Delete the .vscode folder in your project
3. Restart VS Code and recreate launch configurations

Update Extensions

Ensure you're using the latest JavaScript debugger instead of deprecated Chrome debugger:

1. Install "JavaScript Debugger" extension
2. Remove any deprecated Chrome debugger extensions

When All Else Fails

Restart Everything

Sometimes a simple restart resolves the issue:

1. Close all browser instances
2. Stop all running servers
3. Restart Visual Studio Code
4. Restart your computer

Test in Different Browsers

Verify if the issue is Chrome-specific by testing in Firefox or Edge.

Prevention Best Practices

1. Always match ports between your running application and debug configuration
2. Use preLaunchTask in launch.json to automate server startup
3. Regularly update VS Code and extensions
4. Check network settings before debugging sessions
5. Document your environment configuration for team consistency

Remember: The "Crbug/1173575" error is almost always a connectivity issue rather than a JavaScript module problem. Focus on ensuring your development server is properly running and accessible at the URL specified in your debug configuration.