เครื่องมือตรวจสอบหน่วยความจำ: ตรวจสอบ ArrayBuffer, TypedArray, DataView และหน่วยความจำ Wasm

Jecelyn Yeen

Sofia Emelianova

หมายเหตุ: แผงเครื่องมือตรวจสอบหน่วยความจำพร้อมใช้งานใน Chrome 91 คุณตรวจสอบเวอร์ชันได้ที่ chrome://version/

ใช้เครื่องมือตรวจสอบหน่วยความจำเพื่อตรวจสอบหน่วยความจำ ArrayBuffer, TypedArray และ DataView ใน JavaScript รวมถึง WebAssembly.Memory ของแอปพลิเคชัน Wasm ที่เขียนด้วย C++

ภาพรวม

เครื่องมือตรวจสอบหน่วยความจำจะจัดระเบียบเนื้อหาหน่วยความจำและช่วยให้คุณไปยังส่วนต่างๆ ของอาร์เรย์ขนาดใหญ่ได้อย่างรวดเร็ว คุณสามารถดูค่า ASCII ของเนื้อหาหน่วยความจำข้างไบต์ได้โดยตรง และเลือกรูปแบบการเรียงลำดับไบนารีที่แตกต่างกัน ใช้เครื่องมือตรวจสอบหน่วยความจำขณะแก้ไขข้อบกพร่องของเว็บแอปเพื่อให้เวิร์กโฟลว์มีประสิทธิภาพ

เปิดเครื่องมือตรวจสอบหน่วยความจำ

คุณเปิดเครื่องมือตรวจสอบหน่วยความจำได้หลายวิธี

เปิดจากเมนู

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > เครื่องมือตรวจสอบหน่วยความจำ

เปิดระหว่างการแก้ไขข้อบกพร่อง

1. เปิดหน้าเว็บด้วย JavaScript ArrayBuffer เราจะใช้หน้าเดโมนี้
2. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. เปิดไฟล์ demo-js.js ในแผงแหล่งที่มา แล้วตั้งจุดหยุดพักที่บรรทัด 18
4. รีเฟรชหน้าเว็บ
5. ขยายส่วนขอบเขตในแผงโปรแกรมแก้ไขข้อบกพร่องด้านขวา

6. คุณเปิดเครื่องมือตรวจสอบหน่วยความจําได้โดยทำดังนี้

   • จากไอคอน คลิกไอคอนข้างพร็อพเพอร์ตี้ buffer หรือ
   • จากเมนูตามบริบท คลิกขวาที่พร็อพเพอร์ตี้ buffer แล้วเลือกแสดงในแผงเครื่องมือตรวจสอบหน่วยความจํา

   

ตรวจสอบวัตถุหลายรายการ

1. นอกจากนี้ คุณยังตรวจสอบ DataView หรือ TypedArray ได้ด้วย เช่น b2 เป็น TypedArray หากต้องการตรวจสอบ ให้คลิกขวาที่พร็อพเพอร์ตี้ b2 แล้วเลือกแสดงในแผงเครื่องมือตรวจสอบหน่วยความจำ (ยังไม่มีไอคอนสำหรับ TypedArray หรือ DataView)
2. แท็บใหม่จะเปิดขึ้นในเครื่องมือตรวจสอบหน่วยความจำ โปรดทราบว่าคุณตรวจสอบวัตถุหลายรายการพร้อมกันได้

เครื่องมือตรวจสอบหน่วยความจำ

เครื่องมือตรวจสอบหน่วยความจำประกอบด้วย 3 ส่วนหลักดังนี้

แถบนำทาง

1. อินพุตที่อยู่จะแสดงที่อยู่ไบต์ปัจจุบันในรูปแบบเลขฐานสิบหก คุณสามารถป้อนค่าใหม่เพื่อข้ามไปยังตำแหน่งใหม่ในบัฟเฟอร์หน่วยความจำได้ เช่น ลองพิมพ์ 0x00000008
2. บัฟเฟอร์หน่วยความจําอาจมีความยาวมากกว่า 1 หน้า คุณใช้ปุ่มซ้ายและขวาเพื่อไปยังส่วนต่างๆ ได้โดยไม่ต้องเลื่อน
3. ปุ่มทางด้านซ้ายช่วยให้คุณเลื่อนไปข้างหน้า/ข้างหลังได้
4. โดยค่าเริ่มต้น บัฟเฟอร์จะอัปเดตโดยอัตโนมัติเมื่อมีการเลื่อน ในกรณีที่ไม่ได้อัปเดต ปุ่มรีเฟรชจะให้ตัวเลือกในการรีเฟรชหน่วยความจำและอัปเดตเนื้อหา

บัฟเฟอร์หน่วยความจำ

1. จากด้านซ้าย ที่อยู่จะแสดงในรูปแบบฐาน 16
2. หน่วยความจำจะแสดงในรูปแบบฐาน 16 ด้วย โดยแต่ละไบต์จะคั่นด้วยเว้นวรรค ไบต์ที่เลือกอยู่จะไฮไลต์ คุณสามารถคลิกไบต์หรือไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ (ซ้าย ขวา ขึ้น ลง)
3. การนำเสนอแบบ ASCII ของหน่วยความจำจะแสดงอยู่ทางด้านขวา ข้อความไฮไลต์จะแสดงค่าที่สอดคล้องกันกับบิตที่เลือกในไบต์ คุณสามารถคลิกไบต์หรือไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ (ซ้าย ขวา บน ล่าง) ได้เช่นเดียวกับหน่วยความจำ

เครื่องมือตรวจสอบมูลค่า

1. แถบเครื่องมือด้านบนมีปุ่มสลับระหว่าง Big Endian และ Little Endian และปุ่มเปิดการตั้งค่า เปิดการตั้งค่าเพื่อเลือกประเภทค่าที่ต้องการดูโดยค่าเริ่มต้นในเครื่องมือตรวจสอบ
2. พื้นที่หลักจะแสดงการตีความค่าทั้งหมดตามการตั้งค่า โดยค่าเริ่มต้น ระบบจะแสดงทั้งหมด
3. การเข้ารหัสคลิกได้ คุณสามารถสลับระหว่างฐานทศนิยม ฐาน 16 และฐาน 8 สำหรับจำนวนเต็ม และฐานวิทยาศาสตร์และฐานทศนิยมสำหรับจำนวนทศนิยม

การตรวจสอบหน่วยความจำ

มาตรวจสอบหน่วยความจำกัน

1. ทำตามขั้นตอนต่อไปนี้เพื่อเริ่มการแก้ไขข้อบกพร่อง
2. เปลี่ยนที่อยู่เป็น 0x00000027 ในการป้อนที่อยู่
3. ดูการนําเสนอ ASCII และการตีความค่า ขณะนี้ค่าทั้งหมดเป็นค่าว่าง
4. สังเกตปุ่มข้ามไปยังที่อยู่สีน้ำเงินข้าง Pointer 32-bit และ Pointer 64-bit คุณสามารถคลิกเพื่อข้ามไปยังที่อยู่ได้ ปุ่มจะเป็นสีเทาและคลิกไม่ได้หากที่อยู่ไม่ถูกต้อง
5. คลิกดำเนินการสคริปต์ต่อเพื่อดูโค้ดทีละขั้นตอน
6. โปรดทราบว่าการนําเสนอ ASCII ได้รับการอัปเดตแล้ว การตีความค่าทั้งหมดจะได้รับการอัปเดตด้วยเช่นกัน
7. มาปรับแต่งเครื่องมือตรวจสอบค่าให้แสดงเฉพาะจุดทศนิยมกัน คลิกปุ่มการตั้งค่า แล้วเลือกเฉพาะ Float 32 บิต และ Float 64 บิต
8. มาเปลี่ยนการเข้ารหัสจาก dec เป็น sci กัน โปรดทราบว่าการนําเสนอค่าจะอัปเดตตามนั้น
9. ลองไปยังส่วนต่างๆ ของบัฟเฟอร์หน่วยความจำด้วยแป้นพิมพ์หรือใช้แถบนำทาง ทําซ้ำขั้นตอนที่ 4 เพื่อสังเกตการเปลี่ยนแปลงของค่า

การตรวจสอบหน่วยความจําของ WebAssembly

ออบเจ็กต์ WebAssembly.Memory คือ ArrayBuffer ที่เก็บไบต์ดิบของหน่วยความจำออบเจ็กต์ แผงเครื่องมือตรวจสอบหน่วยความจำช่วยให้คุณตรวจสอบออบเจ็กต์ดังกล่าวในแอปพลิเคชัน Wasm ที่เขียนด้วย C++ ได้

วิธีใช้ประโยชน์จากการตรวจสอบ WebAssembly.Memory อย่างเต็มที่

• ใช้ Chrome 107 ขึ้นไป ตรวจสอบเวอร์ชันของคุณที่ chrome://version/
• ติดตั้งส่วนขยายการรองรับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ C/C++ (DWARF) นี่เป็นปลั๊กอินสำหรับการแก้ไขข้อบกพร่องแอปพลิเคชัน WebAssembly ของ C/C++ โดยใช้ข้อมูลการแก้ไขข้อบกพร่อง DWARF

วิธีตรวจสอบ WebAssembly.Memory ของวัตถุ

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตนี้
2. ในแผงแหล่งที่มา ให้เปิด demo-cpp.cc และตั้งจุดหยุดในฟังก์ชัน main() ที่บรรทัด 15: x[i] = n - i - 1;
3. โหลดหน้าเว็บซ้ำเพื่อเรียกใช้แอปพลิเคชัน โปรแกรมแก้ไขข้อบกพร่องจะหยุดชั่วคราวที่เบรกพอยต์
4. ในแผงโปรแกรมแก้ไขข้อบกพร่อง ให้ขยายขอบเขต > ในเครื่อง

5. คลิกไอคอน ข้างอาร์เรย์ x: int[10]

   หรือคลิกขวาที่อาร์เรย์แล้วเลือกแสดงในแผงเครื่องมือตรวจสอบหน่วยความจำ

หมายเหตุ: ตั้งแต่ Chrome เวอร์ชัน 107 เป็นต้นไป เครื่องมือตรวจสอบหน่วยความจำจะไฮไลต์ไบต์ทั้งหมดของออบเจ็กต์หน่วยความจำ C/C++ วิธีนี้ช่วยให้คุณแยกความแตกต่างของหน่วยความจำดังกล่าวออกจากหน่วยความจำรอบๆ ได้

หากต้องการหยุดไฮไลต์หน่วยความจำของออบเจ็กต์ ให้วางเมาส์เหนือป้ายออบเจ็กต์ในแผงเครื่องมือตรวจสอบหน่วยความจำ แล้วคลิกปุ่ม x

ดูข้อมูลเพิ่มเติมได้ที่

• การขยายเครื่องมือตรวจสอบหน่วยความจําสําหรับการแก้ไขข้อบกพร่อง C/C++
• การแก้ไขข้อบกพร่อง WebAssembly ด้วยเครื่องมือสมัยใหม่