การปรับปรุงการแก้ไขข้อบกพร่อง WebAssembly ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Ingvar Stepanyan
Ingvar Stepanyan

ข้อมูลเบื้องต้น

ก่อนหน้านี้ การแก้ไขข้อบกพร่อง WebAssembly เพียงอย่างเดียวที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับคือการดูสแต็กเทรซ WebAssembly ดิบ และการข้ามคำสั่งแต่ละรายการในรูปแบบข้อความ WebAssembly ที่ถอดประกอบ

ภาพหน้าจอของการสนับสนุนการแก้ไขข้อบกพร่อง WebAssembly แบบจํากัดก่อนหน้านี้ใน Chrome DevTools

แม้ว่าวิธีนี้จะใช้ได้กับโมดูล WebAssembly ใดก็ได้และช่วยแก้ไขข้อบกพร่องของฟังก์ชันเล็กๆ แยกต่างหากได้บ้าง แต่ก็ไม่เหมาะสําหรับแอปขนาดใหญ่ที่การแมประหว่างโค้ดที่ถอดประกอบและแหล่งที่มานั้นไม่ชัดเจนนัก

วิธีแก้ปัญหาชั่วคราว

ในการแก้ปัญหานี้ Emscripten และเครื่องมือสำหรับนักพัฒนาเว็บได้ปรับรูปแบบ Source Map ที่มีอยู่ชั่วคราวเป็น WebAssembly ซึ่งช่วยให้จับคู่การเลื่อนเชิงลบของไบนารีในโมดูลที่คอมไพล์แล้วกับตำแหน่งเดิมในไฟล์ต้นฉบับได้

ภาพหน้าจอของการแก้ไขข้อบกพร่องที่ทำงานด้วย Source Map

อย่างไรก็ตาม แผนที่แหล่งที่มาออกแบบมาสำหรับรูปแบบข้อความที่มีการแมปกับแนวคิดและค่า JavaScript อย่างชัดเจน ไม่ใช่สำหรับรูปแบบไบนารี เช่น WebAssembly ที่มีภาษาต้นทาง ระบบประเภท และหน่วยความจำเชิงเส้นแบบกำหนดเอง การทำเช่นนี้ทำให้การผสานรวมนี้แฮ็ก จำกัด และไม่มีการรองรับในวงกว้างนอก Emscripten

ป้อน DWARF

ในทางกลับกัน ภาษาท้องถิ่นหลายๆ ภาษามีรูปแบบการแก้ไขข้อบกพร่องร่วมกันอยู่แล้ว DWARF ที่ให้ข้อมูลที่จำเป็นทั้งหมดสำหรับโปรแกรมแก้ไขข้อบกพร่องในการระบุตำแหน่ง ชื่อตัวแปร เลย์เอาต์ประเภท และอื่นๆ

แม้ว่าจะยังมีฟีเจอร์บางอย่างของ WebAssembly ที่ต้องเพิ่มเพื่อให้ใช้งานร่วมกันได้อย่างเต็มที่ แต่คอมไพเลอร์อย่าง Clang และ Rust รองรับการแสดงข้อมูล DWARF ในโมดูล WebAssembly อยู่แล้ว ซึ่งช่วยให้ทีมเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เริ่มใช้งานได้โดยตรงในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

ในขั้นตอนแรก ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์รองรับการแมปแหล่งที่มาแบบเนทีฟโดยใช้ข้อมูลนี้ คุณจึงเริ่มแก้ไขข้อบกพร่องของโมดูล Wasm ที่คอมไพเลอร์เหล่านี้สร้างขึ้นได้โดยไม่ต้องใช้รูปแบบที่ถอดประกอบหรือใช้สคริปต์ที่กำหนดเอง

คุณเพียงแค่ต้องบอกให้คอมไพเลอร์รวมข้อมูลการแก้ไขข้อบกพร่องเหมือนที่คุณทำในแพลตฟอร์มอื่นตามปกติ ตัวอย่างเช่น ใน Clang และ Emscripten คุณสามารถดำเนินการนี้ได้โดยการส่ง Flag -g ในระหว่างการคอมไพล์

  clang -g …sources… -target wasm32 -o out.wasm

  emcc -g …sources… -o out.js

คุณใช้ Flag -g เดียวกันใน Rust ได้ ดังนี้

  rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm

หรือหากคุณใช้ Cargo ข้อมูลการแก้ไขข้อบกพร่องจะรวมอยู่โดยค่าเริ่มต้น ดังนี้

  cargo build --target wasm32-unknown-unknown

การผสานรวมเครื่องมือสำหรับนักพัฒนาเว็บกับ DWARF ใหม่นี้ครอบคลุมการรองรับการข้ามโค้ด การตั้งจุดหยุดพัก และแก้ไขสแต็กเทรซในภาษาต้นทางแล้ว

ภาพหน้าจอของการแก้ไขข้อบกพร่องที่ทำงานด้วย DWARF ใหม่

อนาคต

อย่างไรก็ตาม ยังมีงานที่ต้องทำอีกมาก เช่น ในด้านเครื่องมือ Emscripten (Binaryen) และ Wasm-pack (wasm-bindgen) ยังไม่รองรับการอัปเดตข้อมูล DWARF เกี่ยวกับการเปลี่ยนรูปแบบที่เครื่องมือดำเนินการอยู่ ในตอนนี้ ลูกค้าจะยังได้รับประโยชน์จากการผสานรวมนี้

และในส่วนของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome เราจะพัฒนาการผสานรวมเพิ่มเติมในอนาคตเพื่อให้การแก้ไขข้อบกพร่องเป็นไปอย่างราบรื่น ซึ่งรวมถึงการดำเนินการต่อไปนี้

  • การแก้ไขชื่อตัวแปร
  • ประเภทจัดรูปแบบ
  • การประเมินนิพจน์ในภาษาต้นฉบับ
  • ...และอีกมากมาย

โปรดติดตามข้อมูลอัปเดตในอนาคต

ดาวน์โหลดเวอร์ชันตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ Beta เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ

ติดต่อทีม Chrome DevTools

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์และการเปลี่ยนแปลงใหม่ๆ ในโพสต์ หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ