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) แล้วคลิกรายละเอียด > ตัวเลือกส่วนขยาย - ระบุเส้นทางไฟล์เก่าและใหม่
ดูข้อมูลเพิ่มเติม
ดูบล็อกวิศวกรรมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขข้อบกพร่องของ WebAssembly