debug with chrome dev tool issue

[shivshankar3578]

debug @latest
i hit with follow with node

DEBUG=picnicapp:* node --inspect-brk ./bin/www

const debug = require('debug');
	log = require('debug')('picnicapp:stdout')
	debug.log = console.log.bind(console);
log("test custom console");

console look like

�[33;1mpicnicapp:stdout �[0mtest custom console �[33m+0ms�[0m

anyone can help me ?

[ibc]

This seems to be an encoding error not related to debug module itself. Try the same by just using console.log().

[shivshankar3578]

although It's working on linux console but not in chrome console. as you mention in readme

Web Browser

Colors are also enabled on "Web Inspectors" that understand the %c formatting option. These are WebKit web inspectors, Firefox (since version 31) and the Firebug plugin for Firefox (any version).

and my chrome support

console.log("%c this is blue text", "color:blue")

then this should work. i think debug node with chrome dev tool relativly new. improve "debug" to work with this powerful tool
thanks

[TooTallNate]

Ya I see the problem when debugging a Node app with --inspect-brk. The problem is that I can't seem to figure out a way to change the arguments passed to console.log() depending on if it's the terminal or the web inspector.

If you can come up with any clever ways to handle that then I'm all ears.

[Qix-]

Wrote a hack for you - had to sniff around a lot of C++. Should work in any version of Node with adequate API support, failing back silently to the current functionality. No dependencies.

function formatInspector(...args) {
	// TODO format the message for the web inspector
	return `INSPECTOR: ${JSON.stringify(args)}`;
}

function formatNodeConsole(...args) {
	// TODO format the message for the Node.js console
	return `CONSOLE: ${require('util').inspect(args, {colors: true})}`;
}

function hookConsole(inspectFormatter, nodeFormatter) {
	// Back up the current console configuration for
	// failing back in the event of an error
	const defaultConsole = console;
	const defaultStdout = console._stdout;
	const defaultStderr = console._stderr;

	try {
		// Pull in the config binding, which exposes internal
		// configuration - namely the inspectorEnabled flag,
		// which is true if either `--inspect` or `--inspect-brk`
		// were passed.
		// https://github.com/nodejs/node/blob/5e7c69716ecbb7a0ebceaed7cc1c6847f9bc5058/src/node_config.cc#L114-L116
		const configBinding = process.binding('config');
		if (!configBinding.debugOptions.inspectorEnabled) {
			return console.log;
		}
	
		const inspectorConsole = global.console;
		
		// Create a new console object using the configured stdout and stderr streams.
		// If no errors occur, this is what the global `console` object becomes.
		//
		// This is because the console object has been wrapped in inspector mode
		// to output to both the Console object's configured stdout/stderr
		// as well as the web inspector. There is no other (known) way
		// to get a handle to a stream for the web inspector's output,
		// so instead we hijack the one the current inspector instance provides and
		// 'mute' it from outputting to stdout/stderr. This gives us an effectively
		// exclusive interface to the web inspector session.
		const vanillaConsole = new (require('console')).Console(console._stdout, console._stderr);
	
		// Try to remove the global console object.
		// Simply re-assigning does not work as I don't think
		// the descriptor allows for overwriting, but _does_
		// allow deletion.
		if (!(delete global.console)) {
			return console.log;
		}
	
		// Replace the global console with the new vanilla console.
		global.console = vanillaConsole;

		// Create the black hole stream
		const nullStream = new (require('stream').Writable)();
		nullStream._write = () => {};
	
		// Mute the wrapped Console object's stdout/stderr (see above comment)
		inspectorConsole._stdout = nullStream;
		inspectorConsole._stderr = nullStream;
	
		// Create a wrapper to format/output to the node console
		const nodeOutput = (...args) => console.log(nodeFormatter(...args));
		// Create a wrapper to format/output to the web inspector console
		const inspectorOutput = (...args) => inspectorConsole.log(inspectFormatter(...args));
	
		// This pulls in the internal inspector binding that exposes the consoleCall function,
		// which will call the first argument (a function) if the web inspector is /connected/
		// and will always call the second function. The empty object is used for what appears
		// to be a semaphore-like function, but we don't need any of that so an empty object is fine.
		//
		// https://github.com/nodejs/node/blob/60f2fa9a8b050563d2b7f3642a84ff192bd362a6/src/inspector_agent.cc#L335-L370
		//
		// The return value is a single function call that will call inspectorOutput() (above) if the inspector
		// is connected and has an active session, and then it'll call nodeOutput() after, and will forward
		// all of the arguments to those functions.
		const inspectorBinding = process.binding('inspector');
		return inspectorBinding.consoleCall.bind(inspectorConsole, nodeOutput, inspectorOutput, {});
	} catch (err) {
		// Try to restore the original console (should always work but this protects against
		// strange configurations of the console descriptor).
		try {
			delete global.console;
		} catch (err) {}
		global.console = defaultConsole;
		global.console._stdout = defaultStdout;
		global.console._stderr = defaultStderr;
		return console.log;
	}
}

const debugWriter = hookConsole(formatInspector, formatNodeConsole); // Default is node console in this case

console.log('normal console log');
debugWriter('debug log message');

Only side effect is that it doesn't forward the vanilla console.x() calls to the inspector console anymore, though that's very easily fixed (I just chose to leave it out for brevity here).

[TooTallNate]

This is very cool @Qix- this will make me want to try out --inspect a lot more now! And ya when we add this we should definitely make sure normal console functions still proxy to the Web Inspector as well.

[Qix-]

@TooTallNate added comments explaining how it works.

[Qix-]

@TooTallNate did we ever merge my hack?

[Qix-]

I'll investigate adding this in the 5.x release.

[ricardobeat]

It appears Chrome has 'fixed' this by supporting ANSI escape codes:

[Qix-]

Holy shit. You have got to be kidding me. They really did it.

Thanks for bringing this to my attention @ricardobeat!

Okay well case closed then... 😅

[hcsgzh]

@Qix- Hi, I have the log problem with chrome dev tool when I use this debug module.
Firstly, I like this Node JS Debug module and appreciate the work of those contributors!

Initially, I could not get the log in chrome dev tool when I use this debug module. Then I use the bind, it makes the log appear in chrome dev tool with the display problem like above.

I use the bind like below.

const debug = require('debug')('test:auth');
debug.log = console.log.bind(console);

I use --inspect to start my app.

nodemon --inspect  ./app.js

It shows like below, in VS Code terminal.

It shows like below, in Chrome DevTools.

How to solve the displaying color of the label and the time, in Chrome Devtools?

My version of the debug is "debug": "^4.1.1".

Another question is about the message of the where is the log from. For example, in the above screenshot from Chrome DevTools. auth.js:34 or common.js:116.
Is that possible to pass the message and display, when I use debug module? That will make the module better.

Thanks in advance!

[Qix-]

That's expected. There's a nasty hack to fix that, but you're looking at output from a terminal app in the developer tools. There's nothing simple we can do.

[RabiaSaid]

2.6.8

[RabiaSaid]

4.3.4