Proof of Concept for Stepping into code
To debug, how does one set breakpoints and step into one's application code, in a Nuxt JS app? It's apparently not as straightforward as one would have hoped. 😞
As part of this convo in Discord (the "official" place where the Nuxt community interacts), I put up this repo to "pair up" and try and figure out how to set break points and step into one's Nuxt, application code to debug. It seems that Nuxt's dependence on Webpack makes this VERY challenging.
To facilitate application code, I added a simple, Nuxt page route and middleware to have some code that I should be able to step into:
• This is the very simple middleware .
• this is where the middleware is declared in the nuxt.config.js
• this is the simple page route (not sure was needed)
I try to step into the code by doing the following:
(1) Run:
NODE_ENV=development node --inspect-brk ./server/index.js
(2) I jump on chrome uri: chrome:inspect
(2.5) go to the inspector window
(3) i set a break point here
(4) then i click run (in chrome inspector window).
(5) I open up a chrome tab and go to http://localhost:3000
(6) the middleware outputs the req.rawHeaders to the terminal console successfully, from the code where the breakpoint is set.
(7) but, the chrome inspector never stops at the above breakpoint.
Given rafal
's suggestion, I tried using source maps. Here's my implementation of it, but it still didn't work.
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm start
# generate static project
$ npm run generate
For detailed explanation on how things work, checkout Nuxt.js docs.