Gỡ lỗi và chạy Angular2 Typescript với Visual Studio Code?

Gỡ lỗi và chạy Angular2 Typescript với Visual Studio Code?

Tôi đang cố gắng gỡ lỗi ứng dụng sắp chữ Angular2 với mã VS https://angular.io/guide/quickstart

Bất cứ ai có thể vui lòng chia sẻ các bước để gỡ lỗi và chạy từ mã VS?

Sau rất nhiều nghiên cứu, tôi tìm thấy các bước này-

Trước khi bắt đầu, hãy đảm bảo bạn có phiên bản mã VS mới nhất. Bạn có thể xác minh phiên bản mới nhất - Trợ giúp> Kiểm tra Cập nhật hoặc Giới thiệu.

1. Cài đặt tiện ích mở rộng có tên 'Trình gỡ lỗi cho Chrome'. Sau khi cài đặt hoàn tất, hãy khởi động lại mã VS.

2. Chuyển đến cửa sổ Gỡ lỗi, mở launcher.json bằng Chrome.

3. Trong phần cấu hình Launch.json, sử dụng cấu hình bên dưới

   {
       "name": "Launch localhost with sourcemaps",
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:3000/Welcome",
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"
   }
   

4. Trong tsconfig.json, hãy đảm bảo rằng bạn có "sourceMap": true

Điều này hoàn thành cài đặt môi trường gỡ lỗi của bạn. Bây giờ, trước khi bạn bắt đầu gỡ lỗi, hãy đảm bảo rằng tất cả các phiên bản Chrome.exe hiện có của bạn đã được đóng. Xác minh từ Trình quản lý Tác vụ HOẶC Sử dụng lệnh DOS 'killall chrome'

5. Chạy dự án của bạn, sử dụng lệnh npm start và Chrome làm trình duyệt mặc định.

6. Khi ứng dụng được chạy thành công, bạn sẽ nhận được số cổng. Sao chép URL từ trình duyệt chrome và dán vào phần url ở trên. (LƯU Ý: Nếu bạn đang sử dụng định tuyến trong ứng dụng của mình thì url sẽ giống như trên nếu không, nó sẽ kết thúc index.html, v.v.)

7. Bây giờ, hãy đặt các điểm ngắt ở bất kỳ đâu bạn muốn trong các tệp bảng chữ của mình.

8. Một lần nữa, hãy chuyển đến cửa sổ gỡ lỗi trong mã VS và nhấn Run. Tab / phiên bản của bạn được kết nối với trình gỡ lỗi sẽ giống như bên dưới.

Chỉ định userDataDir - điều này sẽ tránh va chạm với các phiên bản Chrome khác mà bạn có thể đã chạy. Tôi nhận thấy vì điều này, Chrome chỉ ngừng nghe trên bất kỳ cổng nào bạn chỉ định. Dưới đây là những gì tôi sử dụng và nó là tuyệt vời!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Cảm ơn @reecebradley - GitHub: Không thể kết nối với đích: kết nối ECONNREFUSED

Tôi đang gặp sự cố tương tự nhưng dự án của tôi cũng bao gồm webpack khiến các giải pháp trên không thành công. Sau khi lướt qua Internet, tôi đã tìm thấy một giải pháp trong một chuỗi trên github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

Dù sao, đây là những gì đã được thực hiện.

Lưu ý: - Trước khi bắt đầu, bạn phải kiểm tra xem bạn có phiên bản mới nhất của mã visual studio hay không và cũng đã cài đặt tiện ích mở rộng có tên ' Trình gỡ lỗi cho Chrome ' trong VS Code.

Đầu tiên, trong './config/webpack.dev.js'

• use => devtool: 'source-map'
• thay vì => devtool: 'Cheap-module-source-map'

Sau đó, cài đặt và sử dụng ghi-tệp-webpack-plugin:

• npm install - lưu ghi-tệp-webpack-plugin

Thêm plugin vào './config/webpack.dev.js' bằng cách thêm:

• const WriteFilePlugin = request ('write-file-webpack-plugin');

trong Phần bổ sung Webpack ở trên cùng. Tiếp tục thêm:

• mới WriteFilePlugin ()

vào danh sách các plugin sau DefinePlugin () mới mới, tức là

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

Điều này đảm bảo rằng các bản đồ nguồn được ghi vào đĩa

Cuối cùng, launcher.json của tôi được đưa ra bên dưới.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

nhận thấy sự vắng mặt của '/ dist /' trong webroot. với cấu hình này, bản đồ nguồn ở ./dist/, nhưng chúng trỏ đến ./src/. vscode thêm gốc tuyệt đối vào không gian làm việc và giải quyết chính xác tệp.

Đây là tài liệu mã studio trực quan chính thức về cách gỡ lỗi Angular trong VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Để gỡ lỗi mã Angular phía máy khách, chúng tôi sẽ cần cài đặt tiện ích mở rộng Debugger cho Chrome. Mở chế độ xem Tiện ích mở rộng (Ctrl + Shift + X) và nhập 'chrome' vào hộp tìm kiếm. Bạn sẽ thấy một số tiện ích mở rộng tham chiếu đến Chrome. Nhấn nút Cài đặt cho Trình gỡ lỗi cho Chrome. Nút sẽ chuyển thành Cài đặt, sau khi cài đặt xong sẽ chuyển thành Tải lại. Nhấn Tải lại để khởi động lại Mã VS và kích hoạt tiện ích mở rộng.

Ban đầu chúng ta cần cấu hình trình gỡ lỗi. Để làm như vậy, hãy chuyển đến chế độ xem Gỡ lỗi (Ctrl + Shift + D) và nhấp vào nút bánh răng để tạo tệp cấu hình trình gỡ lỗi Launc.json. Chọn Chrome từ menu thả xuống Chọn môi trường. Thao tác này sẽ tạo tệp khởi chạy.json trong thư mục .vscode mới trong dự án của bạn, bao gồm cấu hình để khởi chạy trang web hoặc đính kèm vào phiên bản đang chạy. Chúng ta cần thực hiện một thay đổi cho ví dụ của mình: thay đổi cổng từ 8080 thành 4200.

Tôi gặp sự cố với điều này và trong khi câu trả lời của @Sankets đã giúp thì vấn đề này đã giải quyết cho tôi https://github.com/angular/angular-cli/issues/2453 .

Cụ thể là thêm phần bên dưới vào launcher.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

Đối với hạt góc:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

Những bản mod này phù launch.jsonhợp với tôi trên MacOS, cho phép tôi có được trình gỡ lỗi và điểm ngắt hoạt động trong một phiên bản Chrome mới cho mỗi phiên gỡ lỗi ...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

Cái này đã được thử và kiểm tra -

Bước 1: Cài đặt trình gỡ lỗi chrome: chỉ cần mở Command Palette (Ctrl + Shift + P) bên trong VS Code và gõ lệnh Extensions: Install Extension. Khi danh sách tiện ích mở rộng xuất hiện, hãy nhập 'chrome' để lọc danh sách và cài đặt tiện ích mở rộng Trình gỡ lỗi cho Chrome. Sau đó, bạn sẽ tạo một tệp cấu hình khởi chạy.

[Chi tiết khác của Bước 1]

Bước 2: Tạo và cập nhật tập tin launcher.json: Hai ví dụ khởi chạy.json cấu hình với "request": "khởi chạy". Bạn phải chỉ định tệp hoặc url để khởi chạy Chrome dựa trên tệp cục bộ hoặc url. Nếu bạn sử dụng url, hãy đặt webRoot thành thư mục chứa tệp được cung cấp từ đó. Đây có thể là một đường dẫn tuyệt đối hoặc một đường dẫn sử dụng $ {workspaceRoot} (thư mục mở trong Code). webRoot được sử dụng để phân giải các url (như " http: //localhost/app.js ") thành một tệp trên đĩa (như "/Users/me/project/app.js"), vì vậy hãy cẩn thận để nó được đặt chính xác. cập nhật Nội dung của tệp launcher.json như sau-

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[Chi tiết khác của Bước 2]

Tôi cần sử dụng CORSnên tôi mở chrome bằng tính năng bảo mật web bị tắt. Sau đó, tôi thực hiện gỡ lỗi ứng dụng Angular bằng cách đính kèm trình gỡ lỗi vào chrome.

Dòng CMD để khởi chạy chrome với bảo mật web bị vô hiệu hóa:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json tệp để đính kèm trình gỡ lỗi:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Câu trả lời của Sanket là đúng nhưng tôi gặp một số vấn đề với điều đó.

Đầu tiên, Launch.json nằm trong thư mục ".vscode" của dự án và thứ hai, số cổng phải giống với cổng máy chủ mặc định mà bạn sử dụng để khởi chạy ứng dụng của mình. Tôi sử dụng ng serve từ cmd để khởi chạy dự án của mình và số cổng mặc định là 4200 , vì vậy tôi đã thay đổi tệp khởi chạy.json như sau.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}