Debug: Visual Studio Code express app

[shanekwheeler]

I am trying to run an express app through Visual Studio Code. I have a launch.json file with DEBUG defined like so:

        "env": {
             "DEBUG": "*"
        }

Here is a trimmed down version of my app.js file where you can see the bolded debug line that doesn't output to the debug console (Test 2). Test 1 before it outputs as expected. If I run this from the command line passing DEBUG=* npm start both lines show as expected.

var debug = require('debug')('app');
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const app = express();
const v1 = require('./routes/v1');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

**debug("Test 1 that outputs!");**

app.use(function(req, res, next) {
    console.error("THIS OUTPUTS");
    **debug("Test 2 that doesn't output!!");**
    console.log(`${req.method} request for '${req.url}' - ${JSON.stringify(req.body)}`);
    next();
});

app.use(cors());

app.listen(3000);

console.log("Service running on port 3000");

module.exports = app;

[Qix-]

Above that line, could you please add console.log('debug', process.env.DEBUG); and re-run and show the output here?

[shanekwheeler]

It outputs: debug *

Mon, 03 Dec 2018 16:17:23 GMT app Test 1 that outputs!
Mon, 03 Dec 2018 16:17:23 GMT express:router use '/' <anonymous>
Mon, 03 Dec 2018 16:17:23 GMT express:router:layer new '/'
Mon, 03 Dec 2018 16:17:23 GMT express:router use '/' corsMiddleware
Mon, 03 Dec 2018 16:17:23 GMT express:router:layer new '/'
Service running on port 3000       app.js:49
THIS OUTPUTS                              app.js:15
debug *                                           app.js:16
POST request for '/accessory-api/v1/accessory/32bdaa89-e791-42a3-a472-8f5f732be1ea' - {"reachable":false}     app.js:18

[Qix-]

Thanks for the report and the detailed information. It's refreshing to be able to reproduce something so quickly 😄

You're absolutely right. For some bizarre reason, VSCode patches console when they should really be consuming stdout/stderr streams - or both, I suppose.

See https://github.com/Microsoft/vscode/issues/19750#issuecomment-344037380 - it doesn't appear to be something they want to fix concretely.

Add this to your launch.json:

{
    "outputCapture": "std"
}

(by default, it's "console", but debug uses process.stderr.write() - appropriately, I might add).

Thanks again for reporting.

---

I would happily accept a PR for adding this piece of information into the README :)

[Qix-]

Blocked by #649 - please let that issue be resolved first before tackling this issue!

[michielbdejong]

Related to https://github.com/Microsoft/vscode/issues/41600#issuecomment-358130837.

The solution of adding "outputCapture": "std" in VSCode is not ideal, because the output is in a single colour, which makes it less readable than when running DEBUG=* npm start from a bash terminal window.

Interestingly, they mention "Getting output through the debug socket" as an alternative (seemingly) to getting output from stdout? How does one log a debug statement "through the debug socket"?

[dimitarnestorov]

Or you can keep "outputCapture": "console" and add the following (before requiring debug) to trigger the browser logger:

process.browser = true
global.window = { process: { type: 'renderer' } }

Would love a toggle switch like debug.forceConsoleLogging = true. Or if anyone wants to automate it I would suggest this implementation from Node's Cluster module:
https://github.com/nodejs/node/blob/422e8f762873aef4a37185f3237c0d666c929d8e/lib/internal/cluster/master.js#L103-L109

---

@michielbdejong the debug socket is the ws://127.0.0.1:45341/f8704798-75c0-4c1c-9086-7a3c1d483cf3 which you can see in the beginning of my debug console above. VS Code and Node communicate through this socket using Chrome Debugging Protocol to transfer console.logs, console.errors... (no stdout/stderr), and also stack trace info (browser.js:183 on the right), breakpoint control and so on. I believe that by attaching to it you won't be able to solve the issue, because you would be a client and the server (Node) is what emits the console, not sure.

---

In case anyone is using TypeScript, here's the type declarations:

declare global {
    namespace NodeJS {
        interface Process {
            browser: boolean
        }

        interface Global {
            window: object
        }
    }
}

---

Just found out that there is an inspector module built in to node which allows you to transfer information to the debug console. So I guess it could actually be easily implemented by adding inspector.console.log call after the process.stdout.write call, the only issue would be coloring.

[GioLogist]

+1 For this issues, happy to see this discussion happening : )

@dimitarnestorov Not sure how that solution for coloring worked for you.

With the following solution, I receive debug info (w/out color):

_launch.json_

"outputCapture": "std",

With this solution, I don't receive anything

_launch.json_

"outputCapture": "console", // or even if i leave as std

_test.js_

process.browser = true
global.window = { process: { type: 'renderer' } }
// blah blah debug

[dimitarnestorov]

@GioLogist Where is your require/import? It must be after the two lines. I'll setup an example project if you want?

[GioLogist]

@dimitarnestorov just tried re-ordering now w/no luck

[dimitarnestorov]

@GioLogist Check this example out: https://github.com/dimitarnestorov/vscode-debug-with-colors

[zwneng]

try this:

in lanuch.json
"console": "integratedTerminal"