4

For web projects not using npm or task runners, can you you some how get the debugger for Chrome extension to start a server before it starts debugging? I'm using the Live server debugging extension and it would be nice to be able to start the debugging with just one click.

Can I use the "preLaunchTask" property somehow for instance?

Magistern
  • 143
  • 1
  • 4

2 Answers2

2

I was able to get this running using preLaunchTask. Now both the debugger and the live server start with one click. Here are my .vscode folder config files.

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "port": 9222,
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "StartServer",
            "postDebugTask": "StopServer"
        }
    ]
}

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "StartServer",
            "type": "process",
            "command": "${input:startServer}"
        },
        {
            "label": "StopServer",
            "type": "process",
            "command": "${input:stopServer}"
        }
    ],
    "inputs": [
        {
            "id": "startServer",
            "type": "command",
            "command": "extension.liveServer.goOnline"
        },
        {
            "id": "stopServer",
            "type": "command",
            "command": "extension.liveServer.goOffline"
        }
    ]
}

settings.json (workspace settings)

{
    "liveServer.settings.ChromeDebuggingAttachment": true,
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.host": "localhost",
    "liveServer.settings.NoBrowser": true
}
Nathan Raine
  • 121
  • 4
1

You want "compounds" as a top level property in your launch.json. Like so:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Server Debug",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/server/server.js",
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "skipFiles": [
                "<node_internals>/**/*.js",
                "${workspaceRoot}/node_modules/**/*.js"
            ]
        },
        {
            "name": "Client Debug",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}/clientSrc",
            "skipFiles": [
                "${workspaceFolder}/node_modules/",
            ]
        }
    ],
    "compounds": [
        {
            "name": "Debug Both",
            "configurations": ["Server Debug", "Client Debug"]
        }
    ]
}

You can then combine multiple other runners into one or more "compound runners".

Cliff Armstrong
  • 2,266
  • 1
  • 10
  • 18
  • 1
    I don't fully understand, since VS Code Live Server isn't available via the debugger. I mean I can't add a configuration that will start Live Server as far as I know. Have you created your own start-server-script? – Magistern Apr 01 '19 at 12:50
  • I'm sorry, I may have misunderstood what you were asking. I thought you meant "a live server". Did you, instead, mean [this][1] extension? If so, I'm not sure how to help you after all. I'm not familiar with how that extention works. Generally, without this plugin, you would configure a server application and configure VS Code to launch it via the settings file above. What I show is how to have Chrome Debuger for VS Code also start and connect to this server at the same time. [1]:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer – Cliff Armstrong Apr 03 '19 at 00:27
  • I did a little research into that plugin. You might want to look at the `liveServer.settings.ChromeDebuggingAttachment` setting. As per here: https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md – Cliff Armstrong Apr 03 '19 at 00:28
  • Thanks. I wish someone would make that plugin. Start a server, open chrome and debug in VScode. There would be a big interest for it. – Magistern Apr 04 '19 at 08:16