Debug webpack config written in TypeScript using ts-node and Chrome Devtools

README.md

Just pipe the output of any node process with node-inspector enabled to the inspector function, it will generate a link to connect to the current debugging session...

node --inspect 2>&1 | inspector

You'd better use --inspect-brk instead of --inspect to pause at the first line so you can connect to the inspector first.

To debug my webpack.config.ts I use:

ts-node --inspect-brk=wpk:1337 webpack.config.ts 2>&1 | inspector

And wpk is just a localhost alias btw.

node_inspect.sh

#!/bin/bash

inspector() {
	grep -Paoh -m1 '(?<=ws:\/\/)[[:graph:]]+' | _copy_inspector_address
}

_get_inspector_address() {
	read SOCKET
	INSPECTOR="chrome-devtools://devtools/bundled/inspector.html?v8only=true"
  echo "${INSPECTOR_ADDRESS}&ws=${SOCKET}"
	
  ## Unfortunately chrome ignores chrome-devtools:// protocol
  #google-chrome --allow-file-access-from-files "${INSPECTOR_ADDRESS}" &
  
  ## You could also try to send it directly to your clipboard like,
  #wl-copy "${INSPECTOR_ADDRESS}"
}