ข้อมูลเบื้องต้น
ก่อนหน้านี้การแก้ไขข้อบกพร่อง WebAssembly เพียงรายการเดียวที่รองรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือ สแต็กเทรซ WebAssembly แบบดิบ และการเปลี่ยนไปใช้คำสั่งแต่ละรายการใน รูปแบบข้อความ WebAssembly ที่แยกชิ้นส่วนแล้ว
แม้ว่าวิธีนี้จะใช้งานได้กับโมดูล WebAssembly ทั้งหมดและช่วยแก้ไขข้อบกพร่องของฟังก์ชันขนาดเล็กที่แยกต่างหากได้ แต่วิธีนี้ก็ไม่ได้ในทางปฏิบัติสำหรับแอปขนาดใหญ่ซึ่งการแมประหว่างโค้ดที่แยกชิ้นส่วนและแหล่งที่มานั้นไม่ชัดเจนนัก
วิธีแก้ปัญหาชั่วคราว
เพื่อแก้ไขปัญหานี้ Emscripten และ DevTools ได้ปรับเปลี่ยน การแมปแหล่งที่มาไปยัง WebAssembly การแมปที่อนุญาตนี้ ระหว่างออฟเซ็ตไบนารีในโมดูลที่คอมไพล์ไปยังตำแหน่งต้นฉบับในไฟล์ต้นฉบับ
อย่างไรก็ตาม แผนที่แหล่งที่มาได้รับการออกแบบมาสำหรับรูปแบบข้อความที่มีการแมปกับแนวคิดและค่า JavaScript อย่างชัดเจน ไม่ใช่รูปแบบไบนารี เช่น WebAssembly ที่มีภาษาต้นฉบับที่กำหนดเอง ระบบประเภท และหน่วยความจำเชิงเส้น การทำเช่นนี้ทำให้การผสานรวมนี้แฮ็ก จำกัด และไม่มีการรองรับในวงกว้างนอก Emscripten
ป้อน DWARF
ในทางกลับกัน ภาษาท้องถิ่นหลายๆ ภาษามีรูปแบบการแก้ไขข้อบกพร่องร่วมกันอยู่แล้ว DWARF ที่ให้ข้อมูลที่จำเป็นทั้งหมดสำหรับโปรแกรมแก้ไขข้อบกพร่องในการระบุตำแหน่ง ชื่อตัวแปร เลย์เอาต์ประเภท และอื่นๆ
แม้จะมีบางฟีเจอร์เฉพาะสำหรับ WebAssembly ที่ต้องเพิ่มเพื่อให้ใช้งานร่วมกันได้อย่างเต็มรูปแบบ แต่คอมไพเลอร์อย่าง Clang และ Rust ก็รองรับการปล่อยข้อมูล DWARF ในโมดูล WebAssembly อยู่แล้ว ซึ่งทำให้ทีม DevTools เริ่มใช้งานได้ ในเครื่องมือสำหรับนักพัฒนาเว็บโดยตรง
ในขั้นตอนแรก DevTools รองรับการแมปแหล่งที่มาแบบเนทีฟโดยใช้ข้อมูลนี้ คุณจึงเริ่มแก้ไขข้อบกพร่องของโมดูล Wasm ที่คอมไพเลอร์เหล่านี้สร้างขึ้นได้โดยไม่ต้องเปลี่ยนไปใช้รูปแบบที่แยกส่วนแล้วหรือต้องใช้สคริปต์ที่กำหนดเอง
คุณเพียงแค่ต้องบอกให้คอมไพเลอร์รวมข้อมูลการแก้ไขข้อบกพร่องเหมือนที่คุณทำในแพลตฟอร์มอื่นๆ ตามปกติ ตัวอย่างเช่น ใน Clang และ Emscripten ก็สามารถทำได้โดยการส่งแฟล็ก -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 นี้ครอบคลุมการรองรับการเปลี่ยนไปใช้โค้ด การตั้งค่าเบรกพอยท์ และการแก้ไขสแต็กเทรซในภาษาต้นฉบับแล้ว
อนาคต
อย่างไรก็ตาม ยังมีงานที่ต้องทำอีกมาก
เช่น ทางด้านเครื่องมือ Emscripten (Binaryen) และ Wasm-pack (wasm-bindgen) ยังไม่รองรับการอัปเดตข้อมูล DWARF เกี่ยวกับการเปลี่ยนรูปแบบที่เครื่องมือดำเนินการอยู่ ในตอนนี้ ผู้ใช้จะยังได้รับประโยชน์จากการผสานรวมนี้
และในส่วนของ Chrome DevTools เราจะพัฒนาการผสานรวมอย่างต่อเนื่องเพื่อให้การแก้ไขข้อบกพร่องเป็นไปอย่างราบรื่น ซึ่งรวมถึง
- การแก้ไขชื่อตัวแปร
- ประเภทจัดรูปแบบ
- การประเมินนิพจน์ในภาษาต้นฉบับ
- ...และอีกมากมาย
โปรดติดตามการอัปเดตในอนาคต
ดาวน์โหลดเวอร์ชันตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือ เบต้า เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องทางพรีวิวเหล่านี้จะทำให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และพบปัญหาในเว็บไซต์ก่อนผู้ใช้
ติดต่อทีม Chrome DevTools
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่และการเปลี่ยนแปลงในโพสต์ หรืออื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม
> ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ - ทวีตที่ @ChromeDevTools
- แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ