Angular 2 Lỗi và Typescript - làm thế nào để gỡ lỗi?

Question

Tôi vừa mới bắt đầu một dự án để học Angular2 và Typescript + Javascript. Tôi đến từ một nền Java và cách tiếp cận của tôi để gỡ lỗi dự án thường là một sự kết hợp của dấu vết ngăn xếp, biên dịch lỗi, và - trên các dự án lớn hơn - rất nhiều trường hợp thử nghiệm. Tuy nhiên, phần lớn điều này dường như không trực tiếp dịch sang thế giới web-dev; đặc biệt là gỡ lỗi mã của tôi tương tác với các thư viện của Angular2.

Có ai có thể đề xuất bất kỳ phương pháp nào mà tôi có thể thực hiện để gỡ lỗi mã làm việc với Angular2 không? Đặc biệt; làm thế nào tôi có thể thấy những phần nào của HTML/TS của tôi đang gây ra sự cố? Tôi đã kiểm tra giao diện điều khiển, từ đó tôi có thể thấy rằng tôi đã bị hỏng Angular2, nhưng nó không có vẻ nhiều thông tin hơn từ đó.

Chỉ cần làm rõ; Tôi không muốn giúp đỡ cho trường hợp cụ thể này. Tôi muốn tìm hiểu cách tự chẩn đoán + khắc phục các sự cố này.

Answer 1

Giả sử bạn đang sử dụng Chrome, bạn có thể đặt điểm ngắt trong tab "nguồn" trong bảng điều khiển của mình. Những điểm ngắt có thể được thiết lập trên các tập tin ts. Nếu bạn cần thông tin từ tệp js, bạn có thể bỏ chọn các sourcemaps Javascript trong cài đặt giao diện điều khiển: điều này sẽ cho phép bạn đặt các điểm ngắt trong tệp js.

Trên điểm ngắt, bạn có thể thực hiện bình thường (xem, gián điệp, theo dõi ngăn xếp, v.v ...). Bạn cũng có thể viết js trong bảng điều khiển truy cập trực tiếp vào các biến cục bộ, ví dụ:

function b(){ 
    var c = 1; 
    // if you put a breakpoint here and type c in the console, it will write "1" 
} 

Cụ thể trong góc 2, bạn có thể muốn thêm điểm ngắt trong dòng "ném e" trong thư viện của họ, bạn sẽ nhận được nhiều hơn dấu vết ngăn xếp chi tiết. Nếu bạn nhấp vào dấu "..." trong dấu vết ngăn xếp của chúng, bạn sẽ có quyền truy cập vào tệp của mình gây ra lỗi.

Đó là lỗi thực tế. Bây giờ, để có hiệu suất, trên tab "dòng thời gian", bạn có thể nhấp vào nút "ghi" ở trên cùng bên trái. Khi bạn đã ghi xong (nhấp vào "kết thúc"), bạn sẽ thấy mức sử dụng CPU. Bạn có thể phóng to các sự kiện trong dòng thời gian để xem phần nào của mã đang sử dụng quá nhiều tài nguyên.

Bạn cũng có thể theo dõi bộ nhớ bằng cách chọn hộp kiểm "bộ nhớ".

Nếu bạn cần gỡ lỗi khung nội tuyến, có một hộp chọn trong bảng điều khiển nói "khung trên cùng" mà bạn có thể đặt cho bất kỳ iframe nào bạn muốn.

Nếu tôi quên bất kỳ điều gì quan trọng, chỉ cần hỏi :).

Answer 2

Tôi nghĩ rằng điều này không chỉ giữ cho Angular2, nhưng cho bạn đến từ một nền Java tôi giả định điều này giống như "làm cách nào để tôi gỡ lỗi thành công các ứng dụng web JavaScript" nói chung.

Liên quan đến điều này, tôi khuyên bạn nên xem qua số Chrome Devtools page (nếu bạn sử dụng Chrome có trình xây dựng devtools rất gọn gàng).
Trên trang đó có nhiều hướng dẫn hữu ích. Cụ thể trong trường hợp của bạn có lẽ là bài viết trên Debugging JavaScript trong đó có một số núm vú mát mẻ như gỡ lỗi có điều kiện, phá vỡ các sửa đổi DOM, thậm chí phá vỡ các ngoại lệ bị bắt/không bị bắt, v.v.

Tôi cũng thường khuyên mọi người làm miễn phí Code School course on Discover Devtools. tốt.

Trong trường hợp TypeScript, hãy đảm bảo rằng bạn bật sourcemaps. Như bạn có thể biết TypeScript không được thực thi trực tiếp bởi trình duyệt, mà đúng hơn là nó được "biên dịch" (hoặc được gọi là "transpiled") thành JavaScript. Điều đó nói rằng, có thể bạn không muốn gỡ lỗi JS chuyển đổi mà là mã TypeScript bạn đã viết.Để kích hoạt sourcemaps, đặt cờ thích hợp trong tsconfig.json của bạn:

{ 
    "version": "1.6.2", 
    "compilerOptions": { 
    ... 
    "sourceMap": true 
    }, 
    "exclude": [ 
    ... 
    ] 
} 

Answer 3

Nếu bạn đang đến từ thế giới Java, có một cơ hội tốt bạn đã sử dụng IntelliJ IDEA từ JetBrains. Nếu có, thì có thể gỡ lỗi các ứng dụng JavaScript (và TypeScript) trực tiếp trong IDE bằng cách sử dụng cùng một giao diện mà bạn sử dụng cho các ứng dụng Java.

JetBrains có some documentation về chủ đề có thể hữu ích.

Như đã nói trong các câu trả lời khác, bạn cũng có thể sử dụng trình gỡ lỗi của Trình kiểm tra Chrome. Cá nhân, tôi rất thích sử dụng IntelliJ để làm điều đó thay thế.

Nếu bạn chỉ đang tìm kiếm các ví dụ về cách luồng công việc đi, hãy xem Github project that shows the use of Webpack with Angular2 này.

Answer 4

Mở bảng điều khiển dành cho nhà phát triển web, đi tới phần "Nguồn". Nhấn "cntrl + p". Một hộp tìm kiếm sẽ mở nơi bạn gõ ".ts" và tìm tệp của bạn hoặc tìm kiếm trực tiếp tệp của bạn như "myfile.ts". Mở nó và bạn có thể đặt breakpoint trực tiếp trong mã, giống như cách chúng ta đặt breakpoint trong một tệp js và Voila, bạn có thể gỡ lỗi Typescript.