Gỡ lỗi mã TypeScript với Visual Studio

Có cách nào để gỡ lỗi nguồn TypeScript trong Visual Studio (thay vì gỡ lỗi javascript được tạo) không?

Từ các đặc tả ngôn ngữ TypeScript:

TypeScript tùy chọn cung cấp bản đồ nguồn, cho phép gỡ lỗi mức nguồn.

Do đó, tôi đã mong đợi có thể đặt các điểm ngắt trong mã ts và có thể gỡ lỗi nó, nhưng nó không hoạt động. Tôi không tìm thấy bất kỳ đề cập nào khác về gỡ lỗi trong thông số kỹ thuật. Có điều gì tôi nên làm để làm cho việc này thành công không? Có lẽ từ "tùy chọn" gợi ý rằng tôi cần phải làm gì đó để nó hoạt động ... Có gợi ý nào không?

Câu trả lời hiện tại cho VS2017 trở lên

Đã có thể gỡ lỗi Typecript trực tiếp trong Visual Studio kể từ VS2017. Từ tài liệu :

Bạn có thể gỡ lỗi mã JavaScript và TypeScript bằng Visual Studio. Bạn có thể đặt và nhấn các điểm ngắt, đính kèm trình gỡ lỗi, kiểm tra các biến, xem ngăn xếp cuộc gọi và sử dụng các tính năng gỡ lỗi khác.

Ngoài ra còn có các tài nguyên bổ sung về Gỡ lỗi Typecript / Asp.NET Core trong Visual Studio .

Cũng có thể gỡ lỗi bản ghi trong Visual Studio Code :

Visual Studio Code hỗ trợ gỡ lỗi TypeScript thông qua trình gỡ lỗi Node.js được tích hợp sẵn của nó và cũng thông qua các tiện ích mở rộng như Trình gỡ lỗi cho Chrome để hỗ trợ gỡ lỗi TypeScript phía máy khách.

Câu trả lời gốc cho các phiên bản trước của VS:

Bạn có thể không gỡ lỗi được trong VS, nhưng bạn có thể gỡ lỗi trong một số trình duyệt. Aaron Powell đã viết blog về việc đưa các điểm ngắt hoạt động trong Chrome Canary ngay hôm nay: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Để tóm tắt (rất ngắn gọn) những gì Aaron nói, bạn sử dụng công -sourcemaptắc trên trình biên dịch để tạo một *.js.maptệp trong cùng thư mục với nguồn của bạn. Trong các trình duyệt hỗ trợ bản đồ nguồn (Chrome Canary và có lẽ là các bản dựng Firefox gần đây, vì chúng là ý tưởng của Mozilla), sau đó bạn có thể gỡ lỗi .tsnguồn của mình giống như .jscác tệp bình thường .

Blog kết thúc với "Hy vọng rằng nhóm Visual Studio hoặc IE (hoặc cả hai) cũng chọn Bản đồ nguồn và thêm hỗ trợ cho họ." - điều đó cho thấy nó vẫn chưa xảy ra.

Cập nhật:

Với việc phát hành TypeScript 0.8.1, gỡ lỗi Bản đồ nguồn hiện cũng có sẵn trong Visual Studio:

https://blogs.msdn.com/b/typescript/archive/2012/11/15/annocting-typescript-0-8-1.aspx

Từ thông báo:

Gỡ lỗi TypeScript hiện hỗ trợ gỡ lỗi cấp nguồn! Định dạng bản đồ nguồn đã trở nên phổ biến như một cách gỡ lỗi các ngôn ngữ dịch sang JavaScript và được hỗ trợ bởi nhiều trình duyệt và công cụ. Với phiên bản 0.8.1, trình biên dịch TypeScript chính thức hỗ trợ bản đồ nguồn. Ngoài ra, phiên bản mới của TypeScript cho Visual Studio 2012 hỗ trợ gỡ lỗi bằng cách sử dụng định dạng bản đồ nguồn. Từ dòng lệnh, giờ đây chúng tôi hoàn toàn hỗ trợ việc sử dụng cờ --sourcemap, cờ này xuất ra tệp bản đồ nguồn tương ứng với đầu ra JavaScript. Tệp này sẽ cho phép gỡ lỗi trực tiếp nguồn TypeScript ban đầu trong các trình duyệt hỗ trợ bản đồ nguồn và Visual Studio. Để bật gỡ lỗi trong Visual Studio, hãy chọn 'Gỡ lỗi' từ menu thả xuống sau khi tạo Ứng dụng HTML với dự án TypeScript.

Cập nhật :

WebStorm cũng đã thêm hỗ trợ gỡ lỗi qua Bản đồ nguồn: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- và nhiều hơn nữa/

Đầu tiên, WebStorm cho phép phát triển web thông minh hơn và hợp lý hơn với các ngôn ngữ hiện đại như TypeScript, CoffeeScript và Dart. Ngoài việc cung cấp trình soạn thảo mã hạng nhất cho các ngôn ngữ này, WebStorm 6 còn cung cấp:

Tự động biên dịch / chuyển đổi các ngôn ngữ cấp cao hơn này sang các ngôn ngữ được trình duyệt công nhận trên tất cả các nền tảng được hỗ trợ. Gỡ lỗi đầy đủ tính năng của TypeScript, Dart hoặc CoffeeScript với bản đồ nguồn.

Với ứng dụng Typecript VS2013, tôi không phải thay đổi bất kỳ điều gì trong web.config. Tôi đã đặt một điểm ngắt trong tệp ts và gỡ lỗi trong IE, và trước khi bắt đầu, điểm ngắt đã dừng bên trong TypeScript.

Điều này hiện đã được khắc phục trong VS 2017 để bạn có thể gỡ lỗi trực tiếp trong Visual Studio và sắp chữ.

Chỉ cần thiết lập điểm ngắt trong tệp * .ts của bạn và nó sẽ bị tấn công.

Và nó sẽ gỡ lỗi trong VS, không phải IE, như thể bạn đang gỡ lỗi c #.

Gỡ lỗi tập lệnh với Visual Studio hoạt động với các cài đặt phù hợp. (Trong các phiên bản trước của VS đôi khi tôi gặp sự cố, dưới đây là cách nó hoạt động tốt với VS 2015 CTP 6)

1. Đầu tiên, bạn đảm bảo rằng bạn tạo bản đồ nguồn khi biên dịch typecript sang javascript. Vì vậy, bạn nên có một tệp xxx.js.map gần mỗi xxx.js.

   Lấy bản đồ nguồn bằng cách chạy trình biên dịch typecript bên ngoài Visual Studio không gây ra bất kỳ khó khăn nào, tại dòng lệnh tsc, hãy thêm

   --sourcemap %1.ts
   

   tập lệnh gulp của bạn thường sẽ tạo bản đồ nguồn theo mặc định.

2. Định cấu hình ứng dụng web của bạn trong Visual Studio .

   Đặt Internet Explorer làm trình duyệt bắt đầu. Tôi nhận thấy nó chỉ hoạt động với IE và không nghĩ rằng bất kỳ trình duyệt nào khác sẽ hoạt động.

   Trong thuộc tính dự án, hãy chuyển đến tab "Web" và định cấu hình phần "Trình gỡ lỗi" ở dưới cùng: Tắt tất cả trình gỡ lỗi ! Điều này là không trực quan và bạn có thể thấy thông báo lỗi này:

   Bạn đã cố gắng khởi động trình gỡ lỗi, nhưng dựa trên cài đặt gỡ lỗi hiện tại của bạn trên trang thuộc tính Web, không có quy trình nào để gỡ lỗi. Điều này xảy ra khi tùy chọn "Không mở trang. Chờ yêu cầu từ quy trình khác" được chọn và gỡ lỗi ASP.NET bị tắt. Vui lòng kiểm tra cài đặt của bạn trên trang thuộc tính Web và thử lại.

   Như thông báo lỗi cho biết, Hành động Bắt đầu ở đầu thuộc tính Web phải là một tùy chọn khác, như " Trang hiện tại ".

   Đặt các điểm ngắt trong mã ts của bạn bên trong Visual Studio ngay bây giờ hoặc mới hơn.

   Nhấn F5

Mặc dù bạn có thể sử dụng Trình chỉnh sửa Visual Studio để gỡ lỗi và chỉnh sửa tệp ts, "Chỉnh sửa và tiếp tục" sẽ không hoạt động, hiện không có trình duyệt nào có thể tải lại tệp js và js.map và tiếp tục. (Sửa cho tôi bất cứ ai nếu tôi sai và tôi sẽ hạnh phúc.)

Gỡ lỗi TypeScript hoàn toàn không hoạt động với tôi với VS2013 Update 3 trên bất kỳ máy nào của tôi. Sau nhiều lần thất vọng, tôi quyết định thử cập nhật lên VS2013 Update 4 CTP. Cuối cùng, các điểm ngắt đang bị tấn công trong VS!

câu trả lời ngắn gọn: Khởi động lại Visual Studio

background: Tôi đã có 2 phiên bản visual studio 2015 với hai dự án khác nhau với TypeScript. Phiên bản bắt đầu đầu tiên không gỡ lỗi chính xác, phiên bản thứ hai đã gỡ lỗi. Tất cả các cài đặt dự án đều giống nhau. Cuối cùng tôi đã khởi động lại phiên bản đầu tiên và sau đó nó đã gỡ lỗi TypeScript (cuối cùng).