การดีบักโค้ด TypeScript ด้วย Visual Studio

มีวิธีใดที่จะดีบั๊กโค้ด TypeScript ใน Visual Studio (แทนที่จะดีบั๊ก JavaScript ที่สร้างขึ้น) ไหม?

จากข้อกำหนดของภาษาประเภท TypeScript:

TypeScript มีตัวเลือกในการให้แผนที่แหล่งที่มา ซึ่งช่วยให้การดีบักระดับซอร์สโค้ดเป็นไปได้

ดังนั้นฉันจึงคาดหวังว่าจะสามารถวางจุดเบรกในโค้ด ts และสามารถดีบักมันได้ แต่กลับไม่สามารถทำงานได้ ฉันก็ไม่พบการกล่าวถึงการดีบักในสเปกอื่น ๆ มีอะไรที่ฉันควรทำเพื่อให้มันทำงานหรือเปล่า บางทีคำว่า "ตัวเลือก" อาจบอกเป็นนัยว่าฉันต้องทำบางอย่างเพื่อให้มันทำงาน... มีข้อเสนอแนะอะไรไหม?

คำตอบ #1

คำตอบปัจจุบันสำหรับ VS2017 และเวอร์ชันต่อไป

การดีบัก Typescript โดยตรงใน Visual Studio เป็นไปได้ตั้งแต่ VS2017 จากเอกสาร:

คุณสามารถดีบักโค้ด JavaScript และ TypeScript โดยใช้ Visual Studio คุณสามารถตั้งและเข้าถึงจุดหยุดชั่วคราว แนบดีบักเกอร์ ตรวจสอบตัวแปร ดูสแต็กการเรียก และใช้คุณสมบัติการดีบักอื่น ๆ ได้

ยังมีแหล่งข้อมูลเพิ่มเติมเกี่ยวกับการดีบั๊ก Typescript/Asp.NET Core ใน Visual Studio ด้วย

นอกจากนี้ยังสามารถดีบัก TypeScript ใน Visual Studio Code ได้ด้วย:

Visual Studio Code รองรับการดีบัก TypeScript ผ่านตัวดีบัก Node.js ที่มีมาพร้อมในตัวและยังรองรับผ่านส่วนขยายเช่น Debugger for Chrome เพื่อรองรับการดีบัก TypeScript ฝั่งลูกค้า

คำตอบต้นฉบับสำหรับเวอร์ชันก่อนของ VS:

คุณอาจไม่สามารถแก้ไขข้อบกพร่องใน VS ได้ แต่คุณสามารถทําได้ในบางเบราว์เซอร์ Aaron Powell ได้เขียนบล็อกเกี่ยวกับการทําให้เบรกพอยต์ทํางานใน Chrome Canary ในวันนี้: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/

เพื่อสรุป (อย่างย่อมาก) สิ่งที่ Aaron กล่าว คุณใช้สวิตช์ -sourcemap บนคอมไพเลอร์เพื่อสร้างไฟล์ *.js.map ในไดเรกทอรีเดียวกับซอร์สของคุณ ในเบราว์เซอร์ที่รองรับแผนที่ซอร์ส (Chrome Canary และอาจจะ build ล่าสุดของ Firefox เนื่องจากเป็นแนวคิดของ Mozilla) คุณจึงสามารถดีบักซอร์ส .ts ของคุณได้เหมือนกับไฟล์ .js ปกติ

บล็อกจบลงด้วยคำว่า "หวังว่าทีม Visual Studio หรือ IE (หรือทั้งสองทีม) จะหันมาใช้ Source Maps และเพิ่มการสนับสนุนให้ด้วย" - ซึ่งบ่งบอกว่ายังไม่ได้เกิดขึ้นจริง

อัปเดต:

ด้วยการเปิดตัว TypeScript 0.8.1 การดีบัก Source Map ตอนนี้ก็สามารถใช้งานได้ใน Visual Studio ด้วย:

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

จากประกาศ:

การดีบัก TypeScript ตอนนี้รองรับการดีบักระดับซอร์สแล้ว! รูปแบบแผนที่ซอร์ส (source map) กำลังได้รับความนิยมเป็นวิธีการดีบักภาษาที่แปลงเป็น JavaScript และได้รับการสนับสนุนโดยเว็บเบราว์เซอร์และเครื่องมือต่าง ๆ กับเวอร์ชัน 0.8.1 ตัวคอมไพเลอร์ TypeScript รองรับแผนที่ซอร์สอย่างเป็นทางการ นอกจากนี้ เวอร์ชันใหม่ของ TypeScript สำหรับ Visual Studio 2012 ยังรองรับการดีบักโดยใช้รูปแบบแผนที่ซอร์สด้วย จากบรรทัดคำสั่ง ตอนนี้เราสนับสนุนการใช้แฟล็ก --sourcemap อย่างเต็มที่ ซึ่งจะสร้างไฟล์แผนที่ซอร์สที่สอดคล้องกับผลลัพธ์ JavaScript ไฟล์นี้จะอนุญาตให้ดีบักซอร์ส TypeScript ดั้งเดิมโดยตรงในเว็บเบราว์เซอร์และ Visual Studio ที่รองรับแผนที่ซอร์ส เพื่อเปิดใช้งานการดีบักใน Visual Studio ให้เลือก ‘Debug’ จากเมนูแบบเลื่อนลงหลังจากสร้างโปรเจ็กต์ HTML Application ด้วย TypeScript

อัปเดต:

WebStorm ยังได้เพิ่มการสนับสนุนสำหรับการดีบักผ่าน SourceMaps: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

ก่อนอื่น WebStorm ช่วยให้การพัฒนาเว็บมีความชาญฉลาดและเป็นระเบียบมากขึ้นด้วยภาษาใหม่ๆ เช่น TypeScript, CoffeeScript และ Dart นอกเหนือจากการให้ตัวแก้ไขโค้ดชั้นเยี่ยมสำหรับภาษาพวกนี้แล้ว WebStorm 6 ยังมี:

การรวบรวม/แปลงรหัสอัตโนมัติของภาษาระดับสูงเหล่านี้ไปสู่ภาษาที่เบราว์เซอร์รับรู้บนแพลตฟอร์มที่สนับสนุนทั้งหมด การดีบักแบบครบคุณสมบัติของ TypeScript, Dart หรือ CoffeeScript พร้อมแผนที่แหล่งที่มา

คำตอบ #2

กับแอปพลิเคชัน Typescript ใน VS2013 ผมไม่ต้องเปลี่ยนอะไรใน web.config ผมใส่เบรกพอยต์ในไฟล์ ts และดีบักใน IE และทันใดนั้น เบรกพอยต์ก็หยุดใน TypeScript