Launch chrome-devtools url from iTerm in a single click
We wanted to benefit from the built-in debugger support in NodeJS 7.2, but using nodemon, it complicates thing since the chrome-devtools url is regenerated on every nodemon reload. iTerm2 supports opening url from a single Command+Click action and it’s now possible to get chrome-devtools to be recognized (nightly build until it’s officially released).
By default, Mac OSX does not recognize/associate the chrome-devtools URI scheme to Google Chrome. In order to do that, we used linCastor which is simple and very useful.
Install and configure iTerm
- install iTerm2 nightly build: https://www.iterm2.com/downloads.html
- iTerm2 > Preferences > Profiles
- Advanced Tab
- Smart Selection section, click on Edit button
- Add chrome-devtools with regex chrome-devtools://(.*)
- click on Edit Actions… button
- Add chrome-devtools with action Open URL… and parameter \0 (backslash ZERO, thought I would mention it because of the medium’s font)
Install and configure linCastor
- install linCastor : https://onflapp.wordpress.com/lincastor/
- click on add new scheme
- title: chrome-devtools
- scheme(s): chrome-devtools
- choose application : Google chrome
- click on Save and Activate
- In your node application, pass those flags as follow:
nodemon --debug —-inspect .
and then a chrome-devtools link will be displayed in your console
You’ll then be able to Command + Click on the link within iTerm2 and this will launch the debugger within Chrome.