{"id":19150451,"url":"https://github.com/vicompany/demo-js-debugging","last_synced_at":"2025-10-12T20:14:47.470Z","repository":{"id":39894522,"uuid":"219955500","full_name":"vicompany/demo-js-debugging","owner":"vicompany","description":"A demo and project to get started with JavaScript debugging","archived":false,"fork":false,"pushed_at":"2022-12-11T12:15:11.000Z","size":625,"stargazers_count":0,"open_issues_count":13,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-03T18:15:29.592Z","etag":null,"topics":["debugging","javascript","nodejs"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vicompany.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-06T09:09:04.000Z","updated_at":"2020-02-26T15:31:10.000Z","dependencies_parsed_at":"2023-01-26T23:01:18.296Z","dependency_job_id":null,"html_url":"https://github.com/vicompany/demo-js-debugging","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fdemo-js-debugging","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fdemo-js-debugging/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fdemo-js-debugging/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fdemo-js-debugging/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vicompany","download_url":"https://codeload.github.com/vicompany/demo-js-debugging/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240236198,"owners_count":19769571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debugging","javascript","nodejs"],"created_at":"2024-11-09T08:12:04.178Z","updated_at":"2025-10-12T20:14:42.446Z","avatar_url":"https://github.com/vicompany.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Demo JavaScript debugging\n\n## Console\n\nThe very, very, very basics, but here are some tips:\n\n- Use `console.log({ a, b })` instead of `console.log(a, b)`;\n- Use `console.dir()` to display a list of properties of an Object, e.g. `console.dir(window.location)`.\n- Use `console.table()` for Objects or Arrays.\n\nAnd check the [console documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console/dir).\n\n## Browser Dev tools\n\n### Debugger statement\n\nThe easiest way to debug your JavaScript code is by adding a [`debugger` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger). When the debugger is invoked, execution is paused at the debugger statement.\n\n```js\nconst toggle = (el, show) =\u003e {\n   if (typeof show === 'boolean') {\n     el.hidden = show;\n   } else {\n     el.hidden = !e.hidden;\n   }\n\n  debugger; // the browser pauses execution here\n\n  return el.hidden;\n}\n```\n\n### Stepping\n\nYou can now _step thru the code_.\n\n![Debug stepping](_docs/stepping.png)\n\n1. Resume (`F8` or `F5` in VS Code).\n2. Step over next _function call_ (`F10`).\n3. Step into _function call_ (`F11`).\n4. Step out of _current function_ (`Shift + F11`).\n\n### Watch expressions\n\nWatch the values of expressions change over time. This is especially valuable in the case of (reactive) state or data.\n\n![Watch](_docs/watch.png)\n\n### Breakpoints\n\nDirectly add breakpoints to your code in the `Sources` (Chrome) or `Debugger` (Firefox) panel. **When you are working with transpiled or minified code, you have to enable `source maps` maps in the build step!**\n\n### Logpoints\n\nThese work simarly as breakpoints with the exception that they don't pause execution and log the output of the expression in the console.\n\n## VS Code debug Client-side code\n\nYou need to install the following extension for your browser(s):\n\n- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)\n- [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)\n\nThen you need to add a `launch configuration`.\n\n```json\n{\n  \"type\": \"firefox\",\n  \"request\": \"launch\",\n  \"name\": \"Launch: Firefox\",\n  \"url\": \"http://localhost:8080\",\n  \"webRoot\": \"${workspaceFolder}/src\"  \n}\n```\n\nNow you are ready to start debugging from [within VS Code](https://code.visualstudio.com/docs/editor/debugging).\n\n## VS Code debug Node.js\n\nThe Node.js script has to be running with the  `--inspect` enabled. The default debugging host and port are `127.0.0.1:9229`, but you can easily change this e.g. `node --inspect=0.0.0.0:9230 script.js`.\n\n### Skipping uninteresting code (Node, Chrome)\n\nYou probably don't want to debug internal Node.js scripts or node modules, so you can add the following to the [launch configuration](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_skipping-uninteresting-code-node-chrome):\n\n```js\n\"skipFiles\": [\n  \"\u003cnode_internals\u003e/**/*.js\" // 'magic name' for built-in core modules of Node.js\n  \"${workspaceFolder}/node_modules/**/*.js\",\n]\n```\n\n## Use Chrome inspect to debug Node.js\n\nOpen Chrome and enter `chrome://inspect` in the search. This will open the DevTools and will search for remote targets that are debuggable (`--inspector` flag). Choose a target and this will open the `dedicated DevTools for Node`.\n\n## Bonus: NDB\n\n\u003e ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools\n\nUse `ndb` instead of `node` command to run a script and you will get a full-blown Chromium debugger.\n\n```bash\nnpx ndb server/app.js\n```\n\nhttps://github.com/GoogleChromeLabs/ndb\n\n### More information\n\n- https://nodejs.org/en/docs/guides/debugging-getting-started/\n- https://code.visualstudio.com/docs/nodejs/nodejs-debugging\n- https://youtu.be/TtsvMRxmfGA\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicompany%2Fdemo-js-debugging","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvicompany%2Fdemo-js-debugging","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicompany%2Fdemo-js-debugging/lists"}