Tuesday, March 3, 2020

how to use Chrome DevTools to debug Node.js Code in development?

it should a very interesting topic for debugging the Node.js Code with Chrome.


1. you must have mocha package install in your node.js project.

npm install --save --save-exact mocha@2.47.5

after the installation, you will find this package in the package.json file.

"devDependencies": {
    "chai""3.5.0",
    "mocha""2.4.5"
  },

2. set up the test run command in the scripts section

 "scripts": {
    "test:debug""node --inspect node_modules/mocha/bin/_mocha --watch --no-timeouts"
  },

3. execute npm run test:debug to generate a web socket that Chrome can connect to for debugging.

PS C:\node\databases> npm run test:debug

> databases@1.0.0 test:debug C:\node\databases
> node --inspect node_modules/mocha/bin/_mocha --watch --no-timeouts

Debugger listening on ws://127.0.0.1:9229/433a7d4f-e829-47e0-a4b4-d6f6f87df9f0
For help, see: https://nodejs.org/en/docs/inspector



  parseRDF
    √ should be a function
    √ should parse RDF content


  2 passing (52ms)



4. Launch the Chrome browse and navigate to Chrome//inspect, then click on "Open dedicated DevTools for Node" then click on the inspect link to launch the chrome DevTool.









5. click on the source tab, then navigate to the filesystem. click on the add folder button to add your source code folder. interesting, after you complete this step. you have to close the  DevTools window and click on the inspect link again to force the breakpoint get hitting.









you have to click on the allow button in order to your source code.





6 set a breakpoint on the source code that you want to debug, then open a new terminal in visual studio code to run touch yourJavscript.js.

7. the breakpoint will be hit immediately, you can start to step through your code and debug it.




No comments:

Post a Comment