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

เยเซล เยน
โซเฟีย เอมิเลียโนวา
Sofia Emelianova
GitHub

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

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

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

เปิดจากเมนู

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

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

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

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

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

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

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

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

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

  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++ DevTools Support (DWARF) นี่คือปลั๊กอินสำหรับแก้ไขข้อบกพร่องแอปพลิเคชัน C/C++ WebAssembly โดยใช้ข้อมูลการแก้ไขข้อบกพร่องของ DWARF

วิธีตรวจสอบ WebAssembly.Memory ของออบเจ็กต์

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

  5. คลิกไอคอน แสดงในเครื่องมือตรวจสอบหน่วยความจำ ข้างอาร์เรย์ x: int[10]

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

อาร์เรย์ x เปิดในเครื่องมือตรวจสอบหน่วยความจำแล้ว

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

หยุดไฮไลต์หน่วยความจำของออบเจ็กต์

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