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

Ingvar Stepanyan
Ingvar Stepanyan

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

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

ภาพหน้าจอของการสนับสนุนการแก้ไขข้อบกพร่อง WebAssembly แบบจํากัดก่อนหน้านี้ในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

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

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

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

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

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

ป้อน DWARF

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

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

ในขั้นตอนแรก ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์รองรับการแมปแหล่งที่มาแบบเนทีฟโดยใช้ข้อมูลนี้ คุณจึงเริ่มแก้ไขข้อบกพร่องของโมดูล 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 หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางพรีวิวเหล่านี้ทำให้คุณสามารถเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะเจอ

ติดต่อทีม Chrome DevTools

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