Pertanyaan Bagaimana cara men-debug Angular dengan VSCode?


Bagaimana cara mengkonfigurasi Angular dan VSCode sehingga breakpoint saya berfungsi?


76
2018-02-27 20:59


asal


Jawaban:


  1. Instal Ekstensi Debugger Chrome
  2. Buat launch.json (di dalam folder .vscode)
  3. Gunakan saya launch.json (Lihat di bawah)
  4. Buat tasks.json (di dalam folder .vscode)
  5. Gunakan saya tasks.json (Lihat di bawah)
  6. tekan CTRL+BERGESER+B
  7. tekan F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

Diuji dengan Angular 5 / CLI 1.5.5


  1. Instal Ekstensi Debugger Chrome
  2. Buat launch.json
  3. Gunakan saya launch.json (Lihat di bawah)
  4. Mulai NG Live Development Server (ng serve)
  5. tekan F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

Diuji dengan Angular 2.4.8


110
2018-02-27 21:27



Sepertinya tim VS Code sekarang menyimpan resep debugging.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

26
2017-07-27 04:25



Ini dijelaskan secara terperinci di situs Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial


3
2018-04-24 08:02



Ini sedikit lebih ringan, bekerja dengan Angular 2+ (saya menggunakan Angular 4)

Juga ditambahkan pengaturan untuk Express Server jika Anda menjalankan tumpukan MEAN.

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

1
2018-05-25 11:45



Ada dua cara berbeda untuk melakukan itu. Kamu bisa meluncurkan sebuah proses baru atau melampirkan ke yang sudah ada.

Titik kunci dalam kedua proses adalah memiliki dev server webpack dan debugger VSCode berjalan pada saat yang sama.

Luncurkan sebuah proses

  1. Di dalam Anda launch.json file tambahkan konfigurasi berikut:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Angular debugging session",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:4200",
          "webRoot": "${workspaceFolder}"
        }
      ]
    }
    
  2. Jalankan dev server Webpage dari CLI Sudut dengan mengeksekusi npm start

  3. Pergi ke debugger VSCode dan jalankan "Angular debugging session" konfigurasi. Akibatnya, jendela browser baru dengan aplikasi Anda akan dibuka.

Lampirkan ke proses yang ada

  1. Untuk itu Anda perlu menjalankan Chrome dalam mode debugger dengan port terbuka (dalam kasus saya ini akan menjadi 9222):

    Mac:

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
    

    Windows:

    chrome.exe --remote-debugging-port=9222
    
  2. launch.json file akan terlihat dengan cara berikut:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Chrome Attach",
          "type": "chrome",
          "request": "attach",
          "port": 9222,
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceFolder}"
        } 
      ]
    }
    
  3. Jalankan dev server Webpage dari CLI Sudut dengan mengeksekusi npm start
  4. Pilih konfigurasi "Chrome Attach" dan jalankan.

Dalam hal ini, debugger melekat pada proses Chrome yang ada bukannya meluncurkan jendela baru.

Saya menulis artikel saya sendiri, di mana saya menggambarkan pendekatan ini dengan ilustrasi.

Instruksi sederhana cara mengkonfigurasi debugger untuk Angular di VSCode


0
2017-07-03 11:38