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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

ใช้เครื่องมือตรวจสอบหน่วยความจำเพื่อตรวจสอบหน่วยความจำ 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 อย่างเต็มที่

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

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

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

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

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

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

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

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