Not able to debug in TypeScript - VS Code

Question

I am unable to open the localhost and unable to debug TypeScript file in VS Code because of some error. I have set target to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" "--remote-debugging-port=9222" in Chrome Properties. I got the error as [debugger-for-chrome] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222. Refer the following image for error after killing all chrome.exe processes. Can someone help me to solve this issue? Thanks in advance.

.vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    }
}

app/app.ts:

var x = 1;
console.log(x); //made debugger here in VS Code

index.html:

<!doctype html>
<html>
<body>
    <h3>TypeScript Debugger</h3>

    <script src="app/app.js"></script>
</body>
</html>

Try killing all chrome.exe processes in your Task Manager and then try launching again with the remote debugging flag — Gideon Pyzer
– Gideon Pyzer, Commented Jun 29, 2016 at 21:37
Can you post those text files as, you know, text? If someone wanted to recreate your situation, they'd have to retype all of that code. — Heretic Monkey
– Heretic Monkey, Commented Jun 29, 2016 at 21:39
@Gideon I have tried killing all chrome.exe processes. Now I got "Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:3000/)" error which you can refer in this post which i just edited — Abraham Gnanasingh
– Abraham Gnanasingh, Commented Jun 29, 2016 at 21:52
@MikeMcCaughan I have edited this post. Does it makes sense? — Abraham Gnanasingh
– Abraham Gnanasingh, Commented Jun 29, 2016 at 21:54
Much better, but please do include the text of the error message. The problem is that images are not searchable, so people trying to find this by searching would be out of luck. — Heretic Monkey
– Heretic Monkey, Commented Jun 29, 2016 at 21:56

Kokodoko · Accepted Answer · 2016-06-30 13:59:08Z

2

Not directly answering the question but perhaps still useful: did you know that you can debug typescript directly in Chrome, including breakpoints? You don't even need to install a plugin. See this screenshot:

answered Jun 30, 2016 at 13:59

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abraham Gnanasingh Over a year ago

this is cool. but how can i debug nativescript js project(for android & ios) in vs code?

Abraham Gnanasingh Over a year ago

can you check my other post regarding nativescript emulator issue and give me a solution?

Collectives™ on Stack Overflow

Not able to debug in TypeScript - VS Code

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related