WebAssembly มีวิธีเรียกใช้งาน เช่น โค้ด C/C++ บนเว็บด้วยความเร็วที่ใกล้เคียงกับความเร็วดั้งเดิมและควบคู่ไปกับ JavaScript เอกสารนี้แสดงวิธีตั้งค่าและใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อแก้ไขข้อบกพร่องของแอปพลิเคชันดังกล่าวได้ดียิ่งขึ้น
เมื่อตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บแล้ว คุณจะทำสิ่งต่อไปนี้ได้
- ตรวจสอบโค้ดต้นฉบับในแหล่งที่มา > เครื่องมือแก้ไข
- หยุดการดําเนินการชั่วคราวด้วยจุดหยุดพักบรรทัดโค้ด และดูซอร์สโค้ด C/C++ ต้นฉบับ ไม่ใช่ไฟล์ไบนารี
.wasmที่คอมไพล์แล้ว
และในระหว่างที่หยุดชั่วคราว คุณจะดำเนินการต่อไปนี้ได้
- วางเมาส์เหนือตัวแปรในไฟล์ต้นฉบับเพื่อดูค่า
- ทำความเข้าใจชื่อฟังก์ชันในสแต็กการเรียกใช้และตัวแปรในขอบเขต
- แสดงพร็อพเพอร์ตี้ที่ฝังลึกและออบเจ็กต์ที่ซับซ้อนไปยังคอนโซล
- ตรวจสอบหน่วยความจำของออบเจ็กต์ด้วยเครื่องมือตรวจสอบหน่วยความจำ
ตั้งค่า
วิธีเปิดใช้การแก้ไขข้อบกพร่องของ C/C++ WebAssembly ในเครื่องมือสำหรับนักพัฒนาเว็บ
คอมไพล์แอปพลิเคชันพร้อมข้อมูลการแก้ไขข้อบกพร่อง DWARF เรียกใช้คอมไพเลอร์ Emscripten เวอร์ชันล่าสุดและส่ง Flag
-gเช่นemcc -g source.cc -o app.htmlโปรดดูข้อมูลเพิ่มเติมที่หัวข้อการสร้างโปรเจ็กต์ด้วยข้อมูลการแก้ไขข้อบกพร่อง
ติดตั้งส่วนขยาย Chrome สำหรับรองรับเครื่องมือสำหรับนักพัฒนาเว็บ C/C++ (DWARF)
แก้ไขข้อบกพร่อง
เมื่อตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บแล้ว ให้ดีบักโค้ดโดยทำดังนี้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบเว็บไซต์ สําหรับบทแนะนํานี้ คุณสามารถลองใช้หน้าสาธิตนี้ ซึ่งคอมไพล์ด้วย Flag
-gที่จําเป็น - (ไม่บังคับ) จัดกลุ่มไฟล์ที่คุณเขียนเพื่อให้ไปยังส่วนต่างๆ ได้ง่ายขึ้น ในแหล่งที่มา ให้ตรวจสอบ
> หน้า > 
> จัดกลุ่มตามหัวข้อ Authored/Deployed 
- เลือกไฟล์ต้นฉบับต้นฉบับจากโครงสร้างไฟล์ ในกรณีนี้คือ
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