Checking point (if you are working with a folder/file)

1. Check the folder/file name
2. Remove special characters (the folder/file name does not allow special characters)
3. Debug you code carefully (Java catch exception can't catch those errors)

I had the same issue with an app that needed to run navigator.geolocation.getCurrentPosition in my React application which of course needs HTTPS.

// .env.local HTTPS is set to true
HTTPS=true

The problem - I was loading the page with HTTP and not HTTPS.

Error Screenshot

I had the error crbug/1173575, non-JS module files deprecated with some PDF files displayed in an iframe.

It was because they had a comma (",") in the filename. After renaming the file, everything was OK.

I had the same issue and the problem was with the URL, it was https://localhost:8000; in place of http://localhost:8000.

So try checking your URL and routes.

I had encountered the same problem in Visual Studio Code when I tried to debug a Python file. I resolved it by deleting the previous launch.json file and create a new one for this file.

I had a similar encounter in a JavaScript project. But I hadn’t learned JSON, but I just deleted the last three commands in the JSON file that is removed the names "url" and "webroot".

My server was just not running locally. :) Starting localhost solved it.

Try this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "type": "dart"
        }
    ]
}

I think we should just remove the cookies in that URL:

I have seen a lot of solutions for this problem, but nothing worked.

After a little debugging and commenting out many parts of the code, I managed to locate the issue.

Basically, it occurs on the backend; not the frontend.

There was an infinite loop that kept responses stuck. Fixing that issue, solved it for me.

Open file launch.json and change the port number in “URL” in “configurations” to the port number of the live server.

Try to use HTTP instead HTTPS from Google Chrome with an incognito window.

I was able to get mine running by clicking "Add Configuration" and including the command that we specify in our package.json file and use for running during development.

For me, the issue was react/next.js application was not running. Basically, you have to keep the application running in a separate window/terminal to be able to attach the debugger. This is unlike the other application where it starts from debug console itself.

In my case, the problem was because port 4200 was taken by another application (Docker). As soon as I changed the port to 4201 by adding the next structure in the serve section of angular.json file the problem was solved.

"options": {
    "port": 4201
}

I displaied a similar message in my debug console and the problem was that the local web server was turned off, therefore unreachable. I turned on the server in the virtual machine and the app started working again :-)

I ran into this error on 3 separate Next.js projects. Same error in Chrome, Chrome Incognito, Firefox, and Edge. Happened on production build (next build && next start) and dev server (next dev). After trying a number of fixes – ensuring I was on HTTP not HTTPS, checking if port was in use, deleting node_modules and running npm install, etc. – the thing that finally worked was restarting my computer...

Posting here in case anyone has run into this issue when using Next.js – hopefully this helps, and I'd love to hear what causes the error!

Removing these lines two worked for me. Its an Https error

   var cors = require('cors');
   app.use(cors());

This issue I face while debugging in vs code for an Angular application.The probable causes may be the server is not up and listening to port.You may start the server manually by ng serve --port with port number .Also compare URL in lauch.json and compare the port number

In VSCode Change your RUN AND DEBUG to Flutter & Dart and then try to run it will work

I also had this issue and none of the solutions listed were helpful. However the problem was rather easy to solve.

Just go into the Network tab of the Chrome Developer Console. Be sure that the connection is on No throttling and not Offline.

In my case, I had a Blazor solution and began receiving the Crbug/1173575, non-JS module files deprecated message, besides this, I also received a 404 error for the Index.html file!

The cause was that I inadvertently removed the reference on the .Server project to the .Client project. The project compiled fine without the reference, but I guess Asp.netCore does some sort of reflection-based analysis on the dependencies to dynamically build the route map.

Restoring the reference to the .Client project on the .Server project fixed the problem.

This is a tricky one. The fact that there are (as of this date 21-Jan-2022) 275k view, 55 upvotes, 41 answers (mostly with zero upvotes) of people who found a highly specific fix and no actually accepted answer indicates it is probably a misleading error message, that gets triggered when something bad and unexpected happens. With me that turned out to be the case.

This error seemingly has nothing to do with Chrome or any deprecitated functionality. It seems to occur whenever connectivity can't be established.

I got this while following the React tutorial for VS Code. In that tutorial you start by creating a template with npx then running it with npm start. That worked and I could see that it was using http://localhost:3000 for the URL in the browser.

However when I changed the code as the tutorial requested and set a breakpoint to debug, I got the error in the OP's post, both with Chrome and with Edge.

Eventually after much research I found out that VS Code was creating a default launch.json for debugging and populating it like this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

And I needed to manually change the 8080 to 3000 which fixed the problem.

Key for me was configuring the breakpoint to catch the exception like the OP described (note - you can only configure that with the Debug icon selected in the far left icon menu). While the emitted error message is still the misleading "depreciated" one, there was a message that "the site can't be reached" which you can find if you dig a little - as shown here:

I image that practically any configuration issue that causes the connection to fail will cause this error. So firewall issues, missing host program, bad configuration (like mine), etc.

Good luck on your journey to find your own version of the answer to this problem and hope this helps.

In my case it was caused by uBlock origin. Disabling it on the website promptly fixed the error.

I haven't seen anyone mention this yet, so adding my answer.

"Chrome Debugger" is deprecated, so basically, with updated VsCode to latest release and just with embedded "Javascript Debugger", the good practice is explained in the "vscode main github cookbook page":

Chrome/Edge Debugging with Angular CLI

And going straight to the point, with just basic launch.json like this:

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

And adding a task.json file ( in the same folder of launch.json):

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    },
  ]
}

you're good to go. Given that your project is properly configured, just press F5 and you're ready to go with pinpointed debug points in your vscode. Tested with Angular 13 project.

I've encountered this issue with React.

TL;DR:

• make sure the URL is using http and on the proper port
• you need to have your server running, do it by adding tasks.json(same folder as launch.json)
• add the label's name inside your launch.json to preLaunchTask

launch.json example:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "react" //remember to add this
        }
    ]
}

tasks.json example:

{
    "version": "2.0.0",
    "tasks": [{
        "label": "react",
        "options": {
            "cwd": "${workspaceFolder}/YOUR-PROJECT-PATH-HERE-IF-NEEDED"
        },
        "script": "start",
        "type": "npm"
    }]
}

Explanation:
The debugger doesn't do npm run start, you need to add it through tasks.json which goes inside the same folder where launch.json is. Depending how your project is organized you will have to modify the path in tasks.json: "cwd": "${workspaceFolder}/YOUR-PROJECT-PATH-HERE-IF-NEEDED".

You can also start your project through shell like this, instead of using npm directly:

{
    "version": "2.0.0",
    "tasks": [{
        "label": "react",
        "command": "npm run start",
        "options": {
            "cwd": "${workspaceFolder}/YOUR-PROJECT-PATH-HERE-IF-NEEDED"
        },
        "type": "shell"
    }]
}

This may be of use to someone working on a project that communicates across iframes, I found this warning within a current web application: Crbug/1173575, non-JS module files deprecated.

In my case, the reason was that the resource iframe origin wasn't being served meaning the Iframe request URL was not accessible. When serving the resource the warning disappeared.

The Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551 VS Code error is normally associated with your application's launch entry in the launch.json file.

The solution appears to be to first install the Ritwick Dey, Live Server. This normally launches and listens on Port 5500. Once Live Server has been launched you can then edit your launch.json file, to include the Live Server port, for example:

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
      "name":"JS TEST",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost:5500/index.html",
        "webRoot": "${workspaceFolder}"
    }
]

}

You will now find that the launch.json works properly and that you can debug your javascript within VS Code.

My problem was in the network settings of my Windows 10 computer not on the browser. I have tried my URL in another computer and mobile browsers and it was working fine.

So, I have fixed the issue by resetting my network settings

To do that, go to Settings -> Network and Internet -> Scroll down to network reset

Wait for 5 minute until it restarts.

To add another angle to this. I named my javascript modules with .mjs after setting my web server to serve mjs with mime type application/javascript I got the error

'crbug/1173575, non-JS module files deprecated.'

None of the answers here helped. To fix it I gave a path to the module.

From

<script type="module" src="xxx.mjs"></script>

To

<script type="module" src="./xxx.mjs"></script>

And the error went away.

In Visual Studio Code you can use the "normal" Dart&Flutter run and debug config. If you don't have an emulator opened, the app will automatically open in the Chrome browser.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "app",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "app (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        }
    ]
}

Tested in VSCode 1.62.3 with Dart 2.14.4 and Flutter 2.8.0-3.3.pre

I had a similar issue. However, I discovered a different solution. It's still worth checking the steps in the GitHub link from the OP’s solution.

The project I was working on was made in an older version, and the launch.json URL had // delimiters. Replacing these with no delimiters resolved the issue.

from

"url":"file:///C://exampleParent//exampleChild//file.txt"

to

 "url":"file:///c:/exampleParent/exampleChild/file.txt"

Instead of launching your application using the option "Launch Chrome against localhost", rather set your application name for launching - Resolved.

See the attached image for more context.

In my case, it got resolved by closing the browser and recompiling the app.

I had this same error and I resolved it by turning off my plugins. Specifically a CORS plugin I have been using.

When I try and follow the steps described on Chrome Debugging with Angular CLI, I get a message that the library is no longer supported and a link to this article:

Request’s Past, Present and Future #3142