ที่มา
ก่อนหน้านี้ การแก้ไขข้อบกพร่องของ WebAssembly ที่ Chrome DevTools รองรับคือการดูสแต็กเทรซ WebAssembly ดิบ และนำคำสั่งแต่ละรายการมาดำเนินการในรูปแบบข้อความ WebAssembly ที่แยกออกมาแล้ว
แม้ว่าการดำเนินการนี้จะใช้งานได้กับโมดูล WebAssembly ทุกตัวและช่วยในการแก้ไขข้อบกพร่องของฟังก์ชันขนาดเล็กที่แยกกัน แต่ก็อาจไม่เหมาะสำหรับแอปขนาดใหญ่ที่การแมประหว่างโค้ดที่ถอดแยกชิ้นส่วนและแหล่งที่มาของคุณไม่ชัดเจนนัก
วิธีแก้ปัญหาชั่วคราว
เพื่อแก้ปัญหานี้ Emscripten และ DevTools ได้ปรับรูปแบบ แผนที่แหล่งที่มาที่มีอยู่เป็น WebAssembly เป็นการชั่วคราว ซึ่งทำให้สามารถจับคู่ออฟเซ็ตไบนารีในโมดูลที่คอมไพล์เข้ากับตำแหน่งเดิมในไฟล์ต้นฉบับได้
อย่างไรก็ตาม แผนที่แหล่งที่มาได้รับการออกแบบมาสำหรับรูปแบบข้อความที่มีการจับคู่กับแนวคิดและค่า JavaScript ที่ชัดเจน ไม่ใช่สำหรับรูปแบบไบนารี เช่น WebAssembly ที่มีภาษาต้นฉบับที่กำหนดเอง ระบบประเภท และหน่วยความจำเชิงเส้น ทำให้การผสานรวมใช้งานยาก มีข้อจำกัด และไม่มีการรองรับอย่างกว้างขวางภายนอก Emscripten
ป้อน DWARF
ในทางกลับกัน ภาษาดั้งเดิมหลายๆ ภาษามีรูปแบบการแก้ไขข้อบกพร่องที่ใช้กันอยู่แล้ว นั่นคือ DWARF ซึ่งจะให้ข้อมูลที่จำเป็นทั้งหมดสำหรับโปรแกรมแก้ไขข้อบกพร่องในการแปลตำแหน่ง ชื่อตัวแปร เลย์เอาต์ประเภท และอื่นๆ
ถึงแม้ว่าจะยังมีบางฟีเจอร์เฉพาะสำหรับ WebAssembly ที่ต้องเพิ่มเพื่อความเข้ากันได้อย่างสมบูรณ์ แต่คอมไพเลอร์ เช่น Clang และ Rust รองรับการเผยแพร่ข้อมูล DWARF ในโมดูล WebAssembly อยู่แล้ว ซึ่งช่วยให้ทีมเครื่องมือสำหรับนักพัฒนาเว็บเริ่มใช้งานได้โดยตรงใน DevTools
ในขั้นตอนแรก ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับการแมปแหล่งที่มาแบบเนทีฟโดยใช้ข้อมูลนี้แล้ว คุณจึงเริ่มแก้ไขข้อบกพร่องของโมดูล Wasm ที่สร้างโดยคอมไพเลอร์เหล่านี้ได้โดยไม่ต้องเปลี่ยนไปใช้รูปแบบที่แยกส่วนหรือต้องใช้สคริปต์ที่กำหนดเองใดๆ
แต่เพียงบอกให้คอมไพเลอร์ใส่ข้อมูลการแก้ไขข้อบกพร่องเหมือนที่ทำเป็นประจำในแพลตฟอร์มอื่นๆ เช่น ใน Clang และ Emscripten อาจทำได้โดยการส่งแฟล็ก -g ระหว่างการรวบรวม:
clang -g …sources… -target wasm32 -o out.wasm
emcc -g …sources… -o out.js
คุณใช้แฟล็ก -g เดียวกันใน Rust ได้ ดังนี้
rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm
หรือหากคุณใช้ Cargo ข้อมูลการแก้ไขข้อบกพร่องจะรวมอยู่ด้วยโดยค่าเริ่มต้น ดังนี้
cargo build --target wasm32-unknown-unknown
การผสานรวม DevTools ใหม่กับ DWARF นี้ครอบคลุมการรองรับการก้าวข้ามโค้ด การตั้งค่าเบรกพอยท์ และการแก้ปัญหาสแต็กเทรซในภาษาต้นฉบับของคุณ
อนาคต
เรายังคงต้องพัฒนาอีกเล็กน้อย
เช่น ในด้านเครื่องมือ Emscripten (Binaryen) และ Wasm-pack (wasm-bindgen) ยังไม่รองรับการอัปเดตข้อมูล DWARF เกี่ยวกับการเปลี่ยนรูปแบบที่ดำเนินการอยู่ ในตอนนี้ ผู้ใช้ยังไม่ได้รับประโยชน์จากการผสานรวมนี้
และในส่วนของ Chrome DevTools นั้น เราจะพัฒนาการผสานรวมมากขึ้นอย่างต่อเนื่องเพื่อให้การแก้ไขข้อบกพร่องเป็นไปอย่างราบรื่น ซึ่งรวมถึงสิ่งต่อไปนี้
- การค้นหาชื่อตัวแปร
- รูปแบบการพิมพ์
- การประเมินนิพจน์ในภาษาต้นฉบับ
- ...และอีกมากมาย
โปรดติดตามการอัปเดตในอนาคต
ดาวน์โหลดช่องตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ตัวอย่างช่องทางเหล่านี้จะช่วยให้คุณสามารถเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะทำงานได้
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ๆ และการเปลี่ยนแปลงในโพสต์หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม
> ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ - ทวีตที่ @ChromeDevTools
- แสดงความคิดเห็นเกี่ยวกับ "มีอะไรใหม่ในวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ" หรือเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บวิดีโอ YouTube