Can I get node --inspect to open Chrome automatically

node.js

In the new versions of node, node-inspector is built in and can be fired using the command node --inspect index.js. However, this always provides a command line with the address you have to plug into the address bar. I know this may not be the most "secure" but is there a way to eliminate that copy and paste step?

In Chrome 60+ there is an item "Open dedicated DevTools for Node" in chrome://inspect/#devices url, (as well as Node.js icon in DevTools while Node is running). The opened inspect window will connect to Node.js as soon as it starts or restarts, so there is no need to open it manually each time.

I was searching an answer for the same problem and I discovered two nice tools:

Node inspector Manager
Node.js V8 Inspector

NIM seems more advanced, it's able to auto-detect node instances which plays very nice with my current setup. I use nodemon to automatically restart node server whenever a file is changed. Even further than this I setup Webpack with HMR (Hot module reload) and I have total coverage of /public and /server folders. It took me 2 weeks to learn how to setup but now it's starting to pay off.

npm install -g nodemon
npm install -g ts-node // In case you use typescript

nodemon.json

{
    "verbose": false,
    "watch": ["server/**/*.ts"],
    "ext": "ts js json",
    "ignore": ["server/**/*.spec.ts"],
    "exec": "set DEBUG=app:*,-not_this & ts-node --inspect --debug-brk server/main.ts"
}

set DEBUG=app:*,-not_this is used to enable output from Visionmedia debug

(!) Currently there is an issue with debug() not printing text in chrome inspector, However for the moment at least the text is visible in the command line. I use command line to see the debug statements and inspector to expand objects.

Edit

Meanwhile I found a rather ugly fix but I does the job, partly... Color metadata is ignored and worse it's rendered in the strings. So it's badly affecting the readability. But hey... I got some logs coming out, better then nothing.

Another issue I had recently is that NIM was not connecting properly. Eventually I figured out that I need to input the actual IP address 127.0.0.1 in NIM config panel instead of localhost

debugOff it's just an improvised way to have logs closed temporarily until I need them back again.

// Debug
let debugOff = (...any: any[]) => { }, debug = require('debug')('vs:ServerApp');

// Workaround for debug working with node inspector in chrome
let Debug = require('debug');
Debug.log = console.log.bind(console);


/** 
 * Listen for incoming requests
 */
public listen(): void {
    debug('Start server');
    debugOff('Server port:', SERVER.port); // This would be usually too verbose

There is a separate utility to do this called inspect-process, but no in built support.

As far as I can see, the (C++) code that is starting the inspector and outputting that debug message is here:

https://github.com/nodejs/node/blob/master/src/inspector_socket_server.cc

Specifically the functions, InspectorSocketServer::Start, PrintDebuggerReadyMessage

I don't see any feature to auto open a browser in this code (at the time of writing v7.4) but would suggest one of the following:

open a feature request here https://github.com/nodejs/node/issues
implement the feature yourself and submit a PR
use inspect-process

Yes!! Use Node.js V8 --inspector Manager (NiM) Chrome plugin, it opens Chrome automagically when I run node --inspect-brk app

On a side note - debugging with Visual Studio Code has become a breeze

For OSX users, install the amazing chrome-cli with brew install chrome-cli.

Put this in your ~/.bashrc:

node-inspect() {
  local TAB_ID=`chrome-cli open 'chrome://inspect/#devices' -n | head -n 1 | awk '{ print $2 }'`
  sleep 0.5
  chrome-cli execute "document.getElementById('node-frontend').click()" -t $TAB_ID && chrome-cli close -t $TAB_ID
  node --inspect-brk $@
}

Now you can do: node-inspect ./server --foo --bar

Can I get node --inspect to open Chrome automatically

Related

Recent Posts