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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

  1. แถบเครื่องมือด้านบนมีปุ่มสำหรับสลับระหว่าง big และ Litian Endian และเพื่อเปิดการตั้งค่า เปิดการตั้งค่าเพื่อเลือกประเภทค่าที่ต้องการดูโดยค่าเริ่มต้นในเครื่องมือตรวจสอบ ปุ่มแถบเครื่องมือ
  2. พื้นที่หลักจะแสดงการตีความค่าทั้งหมดตามการตั้งค่า ระบบจะแสดงทั้งหมดโดยค่าเริ่มต้น
  3. การเข้ารหัสนั้นคลิกได้ คุณสามารถสลับระหว่าง dec, hex, oct สำหรับจำนวนเต็มและ sci และ dec สำหรับ Flo สวิตช์การเข้ารหัส

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

มาตรวจสอบความทรงจำไปด้วยกัน

  1. ทำตามขั้นตอนต่อไปนี้เพื่อเริ่มการแก้ไขข้อบกพร่อง
  2. เปลี่ยนที่อยู่เป็น 0x00000027 ในการป้อนที่อยู่ การป้อนที่อยู่
  3. โปรดสังเกตการนำเสนอ ASCII และการตีความค่า ค่าทั้งหมดว่างเปล่าในขณะนี้
  4. สังเกตปุ่มข้ามไปยังที่อยู่สีน้ำเงินข้าง Pointer 32-bit และ Pointer 64-bit คุณสามารถคลิกที่อยู่เพื่อข้ามไปยังที่อยู่ได้ ปุ่มจะเป็นสีเทาและคลิกไม่ได้หากที่อยู่ไม่ถูกต้อง ปุ่มข้ามไปยังที่อยู่
  5. คลิกดำเนินการสคริปต์ต่อเพื่อทําขั้นตอนในโค้ด ดำเนินการกับสคริปต์ต่อ
  6. โปรดสังเกตว่าขณะนี้การแทน ASCII ได้รับการอัปเดตแล้ว และจะมีการอัปเดตการตีความค่าทั้งหมดด้วย อัปเดตการตีความค่าทั้งหมดแล้ว
  7. เราจะปรับแต่งเครื่องมือตรวจสอบค่าให้แสดงเฉพาะจุดลอยตัว คลิกปุ่มการตั้งค่า แล้วเลือกเฉพาะแบบลอย 32 บิตและแบบลอย 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

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

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