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

# See usage instructions below

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 it seems that chrome ignores navigation to the chrome-devtools:// protocol
  ## Please leave a comment if you know how to workaround this
  #google-chrome --allow-file-access-from-files "${INSPECTOR_ADDRESS}" &
  
  ## You could also try to copy it directly to your clipboard, cpa is not included but it can be found here: 
  ## https://github.com/cvsguimaraes/dotstuff/blob/master/sources/text.sh
  #cpa "${INSPECTOR_ADDRESS}"
  #echo "Copied inspector address to clipboard..."
}