question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

debug with chrome dev tool issue

See original GitHub issue

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

picnicapp:stdout test custom console +0ms

anyone can help me ?

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:4
  • Comments:14 (9 by maintainers)

github_iconTop GitHub Comments

5reactions
Qix-commented, Aug 24, 2017

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');
screen shot 2017-08-23 at 4 46 28 pm

screen shot 2017-08-23 at 4 47 01 pm

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).

0reactions
RabiaSaidcommented, Jun 21, 2022

4.3.4

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issues: Find and fix problems - Chrome Developers
# Open the Issues tab · Visit a page with issues to fix, such as samesite-sandbox.glitch.me. · Open DevTools. · Click the Open...
Read more >
Chrome javascript debugger breakpoints don't do anything?
I fixed my breakpoints problem with "Restore defaults and reload". It's located in the Chrome Developer Tools, Settings, Restore defaults and reload.
Read more >
Debugging in the browser - The Modern JavaScript Tutorial
Debugging is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools – ......
Read more >
Debugging with Chrome DevTools: Quick Front End Fixes
Debugging is an art form. It requires both technical knowledge and data on the bug itself. Here are some quick tricks to solve...
Read more >
How to Use Chrome DevTools to Troubleshoot Website Issues
One of the best ways to debug JavaScript is using Chrome's developer tools. It gives you a direct report of invalid scripts as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found