WebAssembly มีวิธีการเรียกใช้ ตัวอย่างเช่น การใช้โค้ด C/C++ บนเว็บด้วยความเร็วที่ใกล้เคียงกันและควบคู่ไปกับ JavaScript เอกสารนี้แสดงวิธีตั้งค่าและใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อแก้ไขข้อบกพร่องของแอปพลิเคชันดังกล่าวให้ดียิ่งขึ้น
เมื่อตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บแล้ว คุณจะทำสิ่งต่อไปนี้ได้
- ตรวจสอบโค้ดต้นฉบับในแหล่งที่มา > ตัวแก้ไข
- หยุดการดำเนินการชั่วคราวด้วยเบรกพอยท์บรรทัดโค้ด และดำเนินการผ่านซอร์สโค้ด C/C++ เดิม ไม่ใช่ไฟล์ไบนารี
.wasmที่คอมไพล์แล้ว
และในขณะที่หยุดชั่วคราว คุณสามารถทำสิ่งต่อไปนี้
- วางเมาส์เหนือตัวแปรในไฟล์ต้นฉบับต้นฉบับและดูค่า
- ทำความเข้าใจชื่อฟังก์ชันในสแต็กการเรียกใช้และตัวแปรในขอบเขต
- แสดงผลพร็อพเพอร์ตี้ที่ฝังลึกและออบเจ็กต์ที่ซับซ้อนไปยังคอนโซล
- ตรวจสอบหน่วยความจำของออบเจ็กต์ด้วยเครื่องมือตรวจสอบหน่วยความจำ
ตั้งค่า
วิธีเปิดใช้การแก้ไขข้อบกพร่องของ C/C++ WebAssembly ในเครื่องมือสำหรับนักพัฒนาเว็บ
คอมไพล์แอปพลิเคชันของคุณด้วยข้อมูลการแก้ไขข้อบกพร่อง DWARF ที่รวมมาด้วย เรียกใช้คอมไพเลอร์ Emscripten ล่าสุดและส่งแฟล็ก
-gเช่นemcc -g source.cc -o app.htmlโปรดดูข้อมูลเพิ่มเติมที่หัวข้อการสร้างโปรเจ็กต์ที่มีข้อมูลการแก้ไขข้อบกพร่อง
แก้ไขข้อบกพร่อง
เมื่อตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ ให้แก้ไขข้อบกพร่องของโค้ดดังนี้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบเว็บไซต์ สำหรับบทแนะนำนี้ คุณลองดูได้ในหน้าสาธิตนี้ ซึ่งคอมไพล์ด้วยแฟล็ก
-gที่จำเป็น - จัดกลุ่มไฟล์ที่คุณเขียน (ไม่บังคับ) เพื่อให้ไปยังส่วนต่างๆ ได้ง่ายขึ้น ในแหล่งที่มา ให้เลือก
> หน้า > 
> จัดกลุ่มตามผู้เขียน/ทำให้ใช้งานได้ 
- เลือกไฟล์ต้นฉบับต้นฉบับจากโครงสร้างไฟล์ ในกรณีนี้คือ
mandelbrot.cc หากต้องการตั้งค่าเบรกพอยท์บรรทัดของโค้ด ให้คลิกหมายเลขบรรทัดในคอลัมน์ทางด้านซ้ายของตัวแก้ไข เช่น ในบรรทัดที่ 38
เรียกใช้โค้ดอีกครั้ง การดำเนินการจะหยุดชั่วคราวก่อนบรรทัดที่มีเบรกพอยท์
ขณะที่หยุดชั่วคราว ให้ลองทำตามขั้นตอนต่อไปนี้
- ในส่วนแหล่งที่มา > ตัวแก้ไข ให้วางเมาส์เหนือตัวแปรเพื่อดูค่าในเคล็ดลับเครื่องมือ
- ในแหล่งที่มา > สแต็กการเรียกใช้ ให้ดูชื่อฟังก์ชันเหมือนกับในแหล่งที่มา
- ในแหล่งที่มา > ขอบเขต ให้ดูตัวแปรภายในและร่วม ประเภท และค่า
ในคอนโซล ตัวแปรเอาต์พุตและออบเจ็กต์ที่ยากต่อการนำทางในขอบเขตมีดังนี้
- ตัวแปรที่ฝังลึก เช่น รายการที่จัดทำดัชนีในอาร์เรย์ขนาดใหญ่
- วัตถุที่ซับซ้อน รวมถึงวัตถุที่คุณเข้าถึงได้ด้วยตัวชี้ (
->) ขยายวัตถุเพื่อตรวจสอบ
- ในแหล่งที่มา > ขอบเขต ให้คลิกไอคอน
เพื่อเปิดเครื่องมือตรวจสอบหน่วยความจำ และตรวจสอบไบต์ดิบของหน่วยความจำออบเจ็กต์ ดูข้อมูลเพิ่มเติมได้ที่การตรวจสอบหน่วยความจำของ WebAssembly
ประสิทธิภาพของโปรไฟล์
เมื่อตั้งค่าและเปิดเครื่องมือสำหรับนักพัฒนาเว็บแล้ว โค้ดที่ Chrome ทำงานจะไม่ได้รับการเพิ่มประสิทธิภาพ ซึ่งจะแบ่งเป็นระดับชั้นเพื่อให้คุณได้รับประสบการณ์การแก้ไขข้อบกพร่องที่ดีขึ้น
ในกรณีนี้ คุณจะไม่สามารถอาศัย console.time() และ performance.now() ในโค้ดเพื่อสร้างโปรไฟล์ แต่ให้ใช้แผงประสิทธิภาพเพื่อสร้างโปรไฟล์แทน
หรือจะเรียกใช้โค้ดการสร้างโปรไฟล์โดยไม่ต้องเปิดเครื่องมือสำหรับนักพัฒนาเว็บ จากนั้นเปิดเพื่อตรวจสอบข้อความในคอนโซลก็ได้
แยกข้อมูลการแก้ไขข้อบกพร่อง
หากต้องการให้โหลดเร็วขึ้นแต่ยังคงมีประสบการณ์การแก้ไขข้อบกพร่องที่ดีขึ้น ให้แยกข้อมูลการแก้ไขข้อบกพร่องออกเป็นไฟล์ .wasm แยกต่างหาก ดูข้อมูลเพิ่มเติมได้ที่การแก้ไขข้อบกพร่องของ WebAssembly ที่เร็วขึ้น
คุณจะเก็บไฟล์นี้ไว้ในเครื่องหรือโฮสต์ไว้ในเซิร์ฟเวอร์แยกต่างหากก็ได้ หากต้องการใช้ Emscripten ให้ส่งแฟล็ก -gseparate-dwarf=<filename> และระบุเส้นทางไปยังไฟล์ ดังนี้
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
สร้างและแก้ไขข้อบกพร่องบนเครื่องที่แตกต่างกัน
หากสร้างบนเครื่องที่มีระบบปฏิบัติการ (คอนเทนเนอร์, VM หรือเซิร์ฟเวอร์ระยะไกล) ต่างจากเครื่องที่ใช้เรียกใช้ Chrome คุณอาจต้องแมปเส้นทางไฟล์แก้ไขข้อบกพร่องด้วยตนเอง
ตัวอย่างเช่น หากโปรเจ็กต์อยู่ที่ C:\src\project ในเครื่อง แต่สร้างในคอนเทนเนอร์ Docker ที่มีเส้นทาง /mnt/c/src/project ให้ทำดังนี้
- ไปที่
chrome://extensions/ค้นหาส่วนขยาย C/C++ DevTools Support (DWARF) แล้วคลิกรายละเอียด > ตัวเลือกส่วนขยาย - ระบุเส้นทางไฟล์เก่าและใหม่
ดูข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขข้อบกพร่อง WebAssembly ได้ที่บล็อกวิศวกรรมของ Chrome DevTools