AngularJS Development With VS Code - p-patel/software-engineer-knowledge-base GitHub Wiki

https://robertwray.co.uk/blog/how-to-debug-an-angularjs-app-in-visual-studio-code-with-chrome

Windows Javascript Development Environment

Current Setup

  • VS Code launch.json
{
    "name": "vscode-browser-sync",
    "version": "1.0.0",
    "description": "Demo web app project using browser-sync with VS Code",
    "main": "index.html",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "browser-sync start --server --files \"**/*.*\""
    },
    "keywords": [
      "demo",
      "vs-code",
      "browser-sync"
    ],
    "author": "[email protected]",
    "license": "ISC",
    "dependencies": {
      "npm": "^6.7.0"
    },
    "devDependencies": {
      "browser-sync": "^2.26.3"
    },
    "configurations": [
        {
            "name": "Chrome : Launch with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "runtimeArgs": [
            "--remote-debugging-port=9222"
            ]
        }
    ]
  }

run browser-sync from terminal: npm start

  • Chrome debugger extension
  • Browser-sync (replace with live-server?)

VS Code

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Local Dev Server

Browser-sync, live-server, livereload-js

https://stackoverflow.com/questions/40045078/vscode-gulp-grunt-script-running-vscode-chrome-debugger-extension/40096464#40096464
https://stackoverflow.com/questions/46945784/how-to-debug-javascript-in-visual-studio-code-with-live-server-running
https://www.youtube.com/watch?v=THDTDTkyB1I
https://www.youtube.com/watch?v=GiXWJFIrDaY
https://www.youtube.com/watch?v=WzE0yqwbdgU
https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development

Other tools

https://code.visualstudio.com/docs/languages/javascript
https://medium.com/netscape/a-modern-javascript-project-setup-b7842955d1d3
https://winsmarts.com/how-to-debug-gulp-tasks-in-vscode-e42fb0cd4fb5
https://hansrwindhoff.wordpress.com/2015/05/05/debugging-task-runner-tasks-like-gulp-with-visual-studio-code-editordebugger/