บทความนี้จะแนะนำเครื่องมือตรวจสอบหน่วยความจำที่อยู่ใน Chrome 91 ซึ่งจะช่วยให้คุณตรวจสอบ ArrayBuffer, TypedArray, DataView และ Wasm Memory ได้
เกริ่นนำ
คุณเคยอยากทำความเข้าใจข้อมูลใน ArrayBuffer ไหม ก่อนใช้เครื่องมือตรวจสอบหน่วยความจำ เครื่องมือสำหรับนักพัฒนาเว็บจะอนุญาตให้ใช้เฉพาะข้อมูลเชิงลึกเกี่ยวกับ ArrayBuffers เท่านั้น การตรวจสอบจากมุมมองขอบเขตในระหว่างเซสชันการแก้ไขข้อบกพร่องจะจำกัดอยู่ที่การดูรายการค่าเดี่ยวภายในบัฟเฟอร์อาร์เรย์ ซึ่งทำให้ทำความเข้าใจข้อมูลโดยรวมได้ยาก ตัวอย่างเช่น มุมมองขอบเขตจะแสดงบัฟเฟอร์เป็นช่วงที่ขยายได้ของอาร์เรย์ในตัวอย่างด้านล่าง
การนำทางไปยังบางช่วงภายในบัฟเฟอร์เป็นปัญหาที่ทำให้ผู้ใช้ต้องเลื่อนลงเพื่อไปยังดัชนีดังกล่าว แต่ถึงแม้ว่าการไปยังตำแหน่งหนึ่งๆ จะเป็นเรื่องง่าย แต่จริงๆ แล้ววิธีการinspectingค่าเหล่านี้ก็เป็นเรื่องยาก ที่จะบอกว่าตัวเลขเหล่านี้หมายถึงอะไร ซึ่งทำได้ยาก โดยเฉพาะอย่างยิ่ง จะเกิดอะไรขึ้นหากไม่ควรตีความว่าเป็นไบต์เดี่ยว เช่น เป็นจำนวนเต็ม 32 บิต
การตรวจสอบค่าโดยใช้เครื่องมือตรวจสอบหน่วยความจำ
เราจะเปิดตัวเครื่องมือตรวจสอบหน่วยความจำ ซึ่งเป็นเครื่องมือตรวจสอบบัฟเฟอร์ของอาร์เรย์ใน Chrome 91 ก่อนหน้านี้ คุณอาจเคยเห็นเครื่องมือตรวจสอบหน่วยความจำเพื่อดูข้อมูลไบนารี ซึ่งแสดงเนื้อหาไบนารีในตารางกริดพร้อมที่อยู่ และมีวิธีต่างๆ ในการตีความค่าพื้นฐาน นี่คือสิ่งที่เครื่องมือตรวจสอบหน่วยความจำมอบให้คุณ ตอนนี้คุณสามารถดูเนื้อหา ไปยังส่วนต่างๆ และเลือกประเภทเนื้อหาที่จะใช้ในการตีความค่าต่างๆ ได้ด้วยเครื่องมือตรวจสอบหน่วยความจำ โดยจะแสดงค่า ASCII ถัดจากไบต์โดยตรง และช่วยให้ผู้ใช้เลือกปลายทางที่แตกต่างกันได้ ดูการทำงานของเครื่องมือตรวจสอบหน่วยความจำด้านล่าง
อยากลองใช้ดูไหม หากต้องการดูวิธีเปิดเครื่องมือตรวจสอบหน่วยความจำและดูบัฟเฟอร์อาร์เรย์ (หรือ TypedArray, DataView หรือ Wasm Memory) และดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้งานเครื่องมือนี้ได้ที่เอกสารประกอบเกี่ยวกับเครื่องมือตรวจสอบหน่วยความจำ ลองใช้ตัวอย่างของเล่นเหล่านี้ (สำหรับ JS, Wasm และ C++)
การออกแบบเครื่องมือตรวจสอบหน่วยความจำ
ในส่วนนี้ เราจะมาดูว่าเครื่องมือตรวจสอบหน่วยความจำออกแบบโดยใช้คอมโพเนนต์เว็บอย่างไร และเราจะแสดงหนึ่งในเป้าหมายการออกแบบที่เรามีและวิธีการนำไปใช้ ถ้ามีข้อสงสัยและต้องการดูเพิ่มเติม โปรดดูเอกสารการออกแบบสำหรับเครื่องมือตรวจสอบหน่วยความจำ
คุณอาจได้เห็นบล็อกโพสต์ของเราเกี่ยวกับการย้ายข้อมูลไปยังคอมโพเนนต์ของเว็บ ซึ่ง Jack ได้เผยแพร่คำแนะนำภายในเกี่ยวกับวิธีสร้างคอมโพเนนต์ UI โดยใช้คอมโพเนนต์เว็บ การย้ายข้อมูลไปยังคอมโพเนนต์เว็บนั้นสอดคล้องกับงานของเราในเครื่องมือตรวจสอบหน่วยความจำ ด้วยเหตุนี้ เราจึงตัดสินใจลองใช้ระบบใหม่นี้ ด้านล่างนี้เป็นแผนภาพที่แสดงคอมโพเนนต์ต่างๆ ที่เราสร้างไว้เพื่อสร้างเครื่องมือตรวจสอบหน่วยความจำ (โปรดทราบว่าภายในเราเรียกเครื่องมือดังกล่าวว่าเครื่องมือตรวจสอบหน่วยความจำแบบเชิงเส้น)
คอมโพเนนต์ LinearMemoryInspector เป็นคอมโพเนนต์ระดับบนสุดที่รวมคอมโพเนนต์ย่อยที่สร้างองค์ประกอบทั้งหมดในเครื่องมือตรวจสอบหน่วยความจำ โดยพื้นฐานแล้ว ระบบจะใช้ Uint8Array และ address และในแต่ละการเปลี่ยนแปลงของทั้ง 2 การเปลี่ยนแปลง ระบบจะเผยแพร่ข้อมูลไปยังหน่วยย่อย ซึ่งทริกเกอร์การแสดงผลอีกครั้ง LinearMemoryInspector เองแสดงคอมโพเนนต์ย่อย 3 องค์ประกอบ ได้แก่
LinearMemoryViewer(แสดงค่า)LinearMemoryNavigator(อนุญาตการนำทาง) และLinearMemoryValueInterpreter(แสดงการตีความประเภทต่างๆ ของข้อมูลที่สำคัญ)
คอมโพเนนต์หลังเป็นคอมโพเนนต์ระดับบนสุด ซึ่งแสดงผล ValueInterpreterDisplay (แสดงค่า) และ ValueInterpreterSettings (เลือกประเภทที่ต้องการให้แสดงในจอแสดงผล)
คอมโพเนนต์แต่ละรายการออกแบบมาให้แสดงถึงองค์ประกอบเล็กๆ ของ UI เพียงองค์ประกอบเดียว ดังนั้นจึงสามารถนำคอมโพเนนต์มาใช้ซ้ำได้หากจำเป็น ทุกครั้งที่มีการตั้งค่าข้อมูลใหม่ในคอมโพเนนต์ ระบบจะทริกเกอร์การแสดงผลอีกครั้ง ซึ่งจะแสดงการเปลี่ยนแปลงที่แสดงให้เห็นในข้อมูลที่ตั้งค่าไว้ในคอมโพเนนต์ ตัวอย่างหนึ่งของเวิร์กโฟลว์ที่มีคอมโพเนนต์แสดงอยู่ด้านล่าง ซึ่งผู้ใช้กำลังเปลี่ยนที่อยู่ในแถบที่อยู่ ซึ่งจะทริกเกอร์การอัปเดตโดยการตั้งค่าข้อมูลใหม่ ซึ่งในกรณีนี้คือที่อยู่ที่จะดู
LinearMemoryInspector เพิ่มตนเองเป็นผู้ฟังใน LinearMemoryNavigator ระบบจะทริกเกอร์ฟังก์ชัน addressChanged ในเหตุการณ์ address-changed ทันทีที่ผู้ใช้กำลังแก้ไขข้อมูลที่ป้อนอยู่ การดำเนินการนี้จะส่งเหตุการณ์ข้างต้นออกไป โดยจะมีการเรียกฟังก์ชัน addressChanged ฟังก์ชันนี้จะบันทึกที่อยู่ไว้ภายในและอัปเดตองค์ประกอบย่อยโดยใช้ตัวตั้งค่า data(address, ..) องค์ประกอบย่อยจะบันทึกที่อยู่ไว้ภายในและแสดงผลมุมมองอีกครั้ง โดยแสดงเนื้อหาตามที่อยู่นั้น
เป้าหมายการออกแบบ: ทำให้ประสิทธิภาพและการใช้หน่วยความจำเป็นอิสระจากขนาดบัฟเฟอร์
แง่มุมหนึ่งระหว่างการออกแบบเครื่องมือตรวจสอบหน่วยความจำที่เราคิดไว้ก็คือประสิทธิภาพของเครื่องมือตรวจสอบหน่วยความจำไม่ควรขึ้นอยู่กับขนาดของบัฟเฟอร์
ดังที่คุณได้เห็นในส่วนก่อนหน้านี้ คอมโพเนนต์ LinearMemoryInspector จะใช้ UInt8Array ในการแสดงผลค่า ในขณะเดียวกัน เราอยากมั่นใจว่าเครื่องมือตรวจสอบหน่วยความจำจะไม่ต้องเก็บข้อมูลทั้งหมดไว้ เนื่องจากเครื่องมือตรวจสอบหน่วยความจำจะแสดงเฉพาะข้อมูลเพียงบางส่วน (เช่น Wasm Memory อาจมีขนาดถึง 4 GB และเราไม่ต้องการจัดเก็บ 4 GB ไว้ภายในตัวตรวจสอบหน่วยความจำ)
ดังนั้นเพื่อให้ความเร็วและการใช้หน่วยความจำของเครื่องมือตรวจสอบหน่วยความจำเป็นอิสระจากบัฟเฟอร์จริงที่เราแสดง เราปล่อยให้คอมโพเนนต์ LinearMemoryInspector เก็บเฉพาะช่วงย่อยของบัฟเฟอร์ดั้งเดิมเท่านั้น
เพื่อให้ทำงานได้ LinearMemoryInspector ก่อนอื่น จำเป็นต้องมีอาร์กิวเมนต์อีก 2 อาร์กิวเมนต์ คือ memoryOffsetและouterMemoryLength memoryOffset จะแสดงค่าออฟเซ็ต ที่ Uint8Array จะเริ่มทำงาน และจำเป็นต้องใช้ในการแสดงผลที่อยู่ข้อมูลที่ถูกต้อง outerMemoryLength คือความยาวของบัฟเฟอร์ต้นฉบับ และจำเป็นต้องมีเพื่อทำความเข้าใจว่าช่วงใดที่เราแสดงได้:
ข้อมูลนี้จะช่วยให้เรามั่นใจได้ว่ายังคงแสดงผลการแสดงผลเหมือนเดิม (เนื้อหาที่เกี่ยวข้องกับ address) ได้โดยไม่ต้องมีข้อมูลทั้งหมด แล้วต้องทำอย่างไรหากมีการขอที่อยู่อื่น ซึ่งอยู่ในช่วงอื่น ในกรณีดังกล่าว LinearMemoryInspector จะทริกเกอร์ RequestMemoryEvent ซึ่งจะอัปเดตช่วงปัจจุบันที่เก็บไว้ ดูตัวอย่างได้ด้านล่างนี้
ในตัวอย่างนี้ ผู้ใช้ไปยังส่วนต่างๆ ในหน้าหน่วยความจำ (เครื่องมือตรวจสอบหน่วยความจำกำลังใช้การแบ่งหน้าเพื่อแสดงข้อมูลเป็นกลุ่ม) ซึ่งทริกเกอร์ PageNavigationEvent ซึ่งทริกเกอร์ RequestMemoryEvent ขึ้นมาเอง
เหตุการณ์ดังกล่าวจะเริ่มต้นการดึงข้อมูลช่วงใหม่ ซึ่งจะกระจายไปยังคอมโพเนนต์ LinearMemoryInspector ผ่านการตั้งค่าข้อมูล ดังนั้น เราจะแสดงข้อมูลที่ดึงมาใหม่
อ้อ แล้วรู้ไหมว่า คุณยังสามารถตรวจสอบหน่วยความจำในโค้ด Wasm และ C/C++ ได้อีกด้วย
เครื่องมือตรวจสอบหน่วยความจำไม่มีให้ใช้งานสำหรับ ArrayBuffers ใน JavaScript เท่านั้น แต่ยังใช้สำหรับตรวจสอบหน่วยความจำ Wasm และหน่วยความจำที่ผู้อ้างอิง/ตัวชี้ C/C++ ชี้ไป (โดยใช้ส่วนขยาย DWARF ของเราด้วย หากคุณยังไม่เคยทำมาก่อน ดูการแก้ไขข้อบกพร่องของ WebAssembly ด้วยเครื่องมือที่ทันสมัยที่นี่ มุมมองเล็กๆ เกี่ยวกับเครื่องมือตรวจสอบหน่วยความจำในการใช้งานสำหรับการแก้ไขข้อบกพร่องของระบบ C++ บนเว็บ
บทสรุป
บทความนี้นำเสนอเครื่องมือตรวจสอบหน่วยความจำและแสดงให้เห็นการออกแบบคร่าวๆ เราหวังว่าเครื่องมือตรวจสอบหน่วยความจำจะช่วยให้คุณเข้าใจสิ่งที่เกิดขึ้นใน ArrayBuffer ของคุณ :-) หากคุณมีคำแนะนำในการปรับปรุง โปรดแจ้งให้เราทราบและรายงานข้อบกพร่อง
ดาวน์โหลดช่องตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ตัวอย่างช่องทางเหล่านี้จะช่วยให้คุณสามารถเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะทำงานได้
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ๆ และการเปลี่ยนแปลงในโพสต์หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม
> ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ - ทวีตที่ @ChromeDevTools
- แสดงความคิดเห็นเกี่ยวกับ "มีอะไรใหม่ในวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ" หรือเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บวิดีโอ YouTube