Can I get node --inspect to open Chrome automatically

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:

1. open a feature request here https://github.com/nodejs/node/issues
2. implement the feature yourself and submit a PR
3. 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

While this doesn't specifically answer the question, it makes the question less relevant - once connected you don't need to reconnect.

I tried all the suggestions here and other posts e.g. but I found the debug-in-a-tab would never reconnect once supervisor watch had generated a new GUID - the address in the tab is out of date.

However I found a new link in Chrome (58) standard Developer Pane which opens a new "headless" window which does reconnect magically no matter how the app is rebuilt / restarted.

Under Threads > Main, you should see "Node instance available. Connect".

I find the new-window less usable as I'd prefer a tab, but the auto-reconnect is so reliable I'll live with that!

The only downside I've found is when it does reconnect it clears all breakpoints.

UPDATE: I’ve found it’s possible to workaround the problem of the breakpoints vanishing on reload, if you open several debug windows using the “Connect” link under Chrome Debug > Sources > Threads > Main. Most of them will be blank and won’t even have any sources listed in them, but the one that’s properly connected will eventually retain its bookmarks. I don’t know why this hack works — I discovered it by mistake.

Also this Hackernoon article discusses the problem, and the tool NIM is recommended as a solution, and general improvement to managing the inspector (also suggested in the answer by Adrian Moisa).

Update (08/2017)

It seems Chrome v60 has changed the DevTools for Node, moving the link I described to a small green box icon in the top left nav-bar of the JS dev tools.

However now my breakpoint hack no longer works as you can no longer open multiple windows. Sadly they've not fixed the disappearing breakpoints issue either. So now I'm back to closing it and reopening it every time... This is extra annoying as it doesn't even remember its window position (I like to move it to differentiate it from the front-end JS debug window which I use simultaneously being full-stack...), nor the fact I've close all those source file tabs already (I'll stop ranting now).

Now in modern chrome (I have v64, don't know about lower versions), typing

chrome.send('open-node-frontend')

in the chrome console open a window that automatically connect to nodejs process
(also accessible via chrome://inspect)

You can also start and close the inspector programatically
(see the doc https://nodejs.org/dist/latest/docs/api/inspector.html)

Or using kill -USR1 $PID where $PID is your node process pid
(but I don't know how to stop it, and it's not possible to specify host and port, it will use localhost:9229)

This is not possible, for multiple reasons.

1. Starting the Chrome (or other "desktop" application) is platform dependent. Core Node can't do it and it would add unnecessary complexity (e.g. think about discovering the install location, dealing with Chrome not installed, etc).
2. This would tie Node to Chrome, which is not desirable.
3. Chrome does not provide a way to pass devtools URL from the command line.

npm install express
npm install esm
npm install open
npm install --save-dev node-key-sender

package.json

{
  "name": "open-browser",
  "version": "1.0.0",
  "description": "browser",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "esm": "node -r esm server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "esm": "^3.2.25",
    "open": "^7.0.0",
  },
  "devDependencies": {
    "node-key-sender": "^1.0.11"
  }
}

server.js

import express from 'express'
import http from 'http'
import open from 'open'
import keysender from 'node-key-sender'

const webApp = express()
const webServer = http.createServer(webApp)

webServer.listen(3000, function(){
  console.log('> Server listening on port:',3000)
  open('http://localhost:3000')
  keysender.sendCombination(['control', 'shift', 'i'])
})

the browser must already be open, then run

node -r esm server.js