Câu trả lời:
launch.jsonthư mục (bên trong .vscode)launch.json(xem bên dưới)tasks.jsonthư mục (bên trong .vscode)tasks.json(xem bên dưới)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
}
}
]
}
launch.jsonlaunch.json(xem bên dưới)ng serve)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/*"
}
}
]
}
NG Live Development Servervà sau đó khởi chạy Chromechỉ bằng một F5cú nhấp chuột?
launch.jsonvà tasks.jsonlàm ở đây. Theo tôi hiểu launch.jsonlà khởi chạy máy chủ nút và lắng nghe cổng 8080, và tasks.jsonhướng dẫn sử dụng npmvà thực thi lệnh ng serveđể chạy ứng dụng.
Có vẻ như nhóm VS Code hiện đang lưu trữ các công thức gỡ lỗi.
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"]
}
]
}
Có hai cách khác nhau để làm điều đó. Bạn có thể khởi chạy một quy trình mới hoặc đính kèm vào một quy trình hiện có.
Điểm mấu chốt trong cả hai quy trình là có máy chủ phát triển webpack và trình gỡ lỗi VSCode chạy cùng một lúc .
Trong bạn launch.jsontập thêm các cấu hình sau:
{
"version": "0.2.0",
"configurations": [
{
"name": "Angular debugging session",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Chạy máy chủ phát triển Webpack từ Angular CLI bằng cách thực thi npm start
Vì vậy, bạn cần chạy Chrome ở chế độ gỡ lỗi với cổng đã mở (trong trường hợp của tôi là như vậy 9222):
Mac:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Các cửa sổ:
chrome.exe --remote-debugging-port=9222
launch.json tập tin sẽ nhìn theo cách sau:
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}
npm startTrong trường hợp này, trình gỡ lỗi được đính kèm với quy trình Chrome hiện tại thay vì khởi chạy một cửa sổ mới.
Tôi đã viết bài báo của riêng tôi, nơi tôi mô tả phương pháp này với hình minh họa.
Hướng dẫn đơn giản cách định cấu hình trình gỡ lỗi cho Angular trong VSCode
chrome.exe --remote-debugging-port=9222. Có cách nào khác để cấu hình một lần không
Điều này được giải thích chi tiết trên trang web Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial
Có thể sử dụng cấu hình này:
{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Đây là một giải pháp nhẹ hơn, hoạt động với Angular 2+ (Tôi đang sử dụng Angular 4)
Đồng thời thêm các cài đặt cho Express Server nếu bạn chạy stack 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"
]
}
]
}
Câu trả lời @Asesjix rất kỹ lưỡng, nhưng như một số người đã chỉ ra, vẫn cần nhiều tương tác để bắt đầu ng servevà sau đó khởi chạy ứng dụng Angular trong Chrome. Tôi đã làm việc này với một cú nhấp chuột bằng cách sử dụng cấu hình sau. Sự khác biệt chính từ câu trả lời của @ Asesjix là loại nhiệm vụ hiện có shellvà các lệnh gọi thêm starttrước ng serveđó để ng servecó thể tồn tại trong quy trình riêng của nó và không chặn trình gỡ lỗi khởi chạy:
task.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "ng serve",
"type": "shell",
"command": "\"start ng serve\""
},
{
"label": "ng test",
"type": "shell",
"command": "\"start ng test\"",
}
]
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "ng serve"
}
]
}
Trong trường hợp của tôi, tôi đã không sử dụng cây thư mục dự án Angular ban đầu và tôi biết có gì đó không ổn với webRoot/ {workspaceFolder}bit nhưng tất cả các thử nghiệm của tôi đều không mang lại kết quả. Có một lời khuyên từ một câu trả lời SO khác mà tôi sẽ liên kết nếu tôi tìm thấy nó một lần nữa.
Điều giúp tôi là tìm nội dung của biến {workspaceFolder}khi chạy và sau đó sửa đổi nó thành vị trí của thư mục "src" mà bạn có "app / *". Để tìm nó, tôi đã thêm một preLaunchTasktệp launch.json của mình và một tác vụ để xuất giá trị của {workspaceFolder}.
launch.json , xuất hiện sau khi cài đặt trình gỡ lỗi Chrome
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/src/newProjectRoot/",
"preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
}
]
}
T task.json Không có mặt theo mặc định. Nhấn Ctrl + Shift + p và tôi nghĩ nó được gọi là 'tạo tác vụ cho lệnh khác' hoặc một cái gì đó tương tự. Dường như không thể nhìn thấy nó sau khi task.json được tạo. Bạn cũng có thể tạo tệp ở cùng vị trí với launch.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Echo values",
"command": "echo",
"args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
"type": "shell"
}
]
}
Khi tôi biết giá trị của $ {workspaceFolder}, tôi đã sửa nó để trỏ đến thư mục src của tôi trong cây dự án mới của tôi và tất cả đều hoạt động. Gỡ lỗi yêu cầu ng servephải được chạy dưới dạng nhiệm vụ prelaunch hoặc là một phần của quá trình xây dựng (ví dụ ở trên) hoặc trong dấu nhắc lệnh.
Dưới đây là một liên kết đến tất cả các biến, bạn có thể sử dụng: