ใน Chrome 92 เราได้เปิดตัว Memory Inspector ซึ่งเป็นเครื่องมือสำหรับตรวจสอบบัฟเฟอร์หน่วยความจำเชิงเส้น ในบทความนี้ เราจะพูดถึงวิธีที่เราปรับปรุงเครื่องมือตรวจสอบสำหรับการแก้ไขข้อบกพร่อง C/C++ และปัญหาด้านเทคนิคที่พบระหว่างทาง
ต่อไปนี้เป็นบล็อกโพสต์ที่เกี่ยวข้องบางส่วนหากคุณเพิ่งเริ่มใช้การแก้ไขข้อบกพร่อง C/C++ และเครื่องมือตรวจสอบหน่วยความจำ
- สนใจการแก้ไขข้อบกพร่องของหน่วยความจำแบบลึกไหม โปรดดูการแนะนำเครื่องมือตรวจสอบหน่วยความจำ
- ต้องการข้อมูลเบื้องต้นเกี่ยวกับชุดเครื่องมือแก้ไขข้อบกพร่อง C/C++ อย่างเต็มรูปแบบไหม โปรดดูหัวข้อการแก้ไขข้อบกพร่อง WASM ด้วยเครื่องมือที่ทันสมัยและการแก้ไขข้อบกพร่องของ WebAssembly ให้เร็วขึ้น
บทนำ
เครื่องมือตรวจสอบหน่วยความจำมอบตัวเลือกการแก้ไขข้อบกพร่องที่มีประสิทธิภาพมากขึ้นสำหรับบัฟเฟอร์หน่วยความจำเชิงเส้น ในกรณีที่เป็น C/C++ คุณสามารถตรวจสอบออบเจ็กต์หน่วยความจำ C/C++ ใน WebAssembly Memory
การรู้ไบต์ของออบเจ็กต์ในหน่วยความจำ WebAssembly โดยรอบเป็นปัญหา คุณต้องรู้ขนาดของวัตถุและนับจำนวนไบต์จากจุดเริ่มต้นของวัตถุ ในภาพหน้าจอด้านล่าง มีการเลือกไบต์แรกของอาร์เรย์ int32 ที่มี 10 เอลิเมนต์ แต่ไม่ทราบแน่ชัดว่าไบต์ใดเป็นของอาร์เรย์ คงจะดีไม่น้อยหากคุณสามารถจดจำไบต์ทั้งหมดที่เป็นของออบเจ็กต์นั้นได้ในทันที
การไฮไลต์ออบเจ็กต์ในเครื่องมือตรวจสอบหน่วยความจำ
ตั้งแต่ Chrome 107 เป็นต้นไป เครื่องมือตรวจสอบหน่วยความจำจะไฮไลต์ไบต์ทั้งหมดของออบเจ็กต์หน่วยความจำ C/C++ ซึ่งจะช่วยให้คุณแยกนักเรียนออกจากความทรงจำรอบๆ ได้
ดูวิดีโอด้านล่างเพื่อดูการทำงานของเครื่องมือตรวจสอบหน่วยความจำ ขณะที่คุณแสดงอาร์เรย์ x ในเครื่องมือตรวจสอบหน่วยความจำ หน่วยความจำที่ไฮไลต์จะปรากฏในโปรแกรมดูหน่วยความจำพร้อมกับชิปใหม่ที่ด้านบน ชิปนี้จะช่วยเตือนคุณให้รู้ชื่อและประเภทของความทรงจำที่ไฮไลต์ คลิกที่ชิปเพื่อข้ามไปยังหน่วยความจำของออบเจ็กต์ หากวางเมาส์เหนือชิป ไอคอนกากบาทจะปรากฏขึ้น ให้คลิกไอคอนกากบาทเพื่อนำไฮไลต์ออก
เมื่อเลือกไบต์นอกวัตถุที่ตรวจสอบ ไฮไลต์จะย้ายโฟกัสเพื่อไม่ให้รบกวนคุณ หากต้องการปรับโฟกัสอีกครั้ง ให้คลิกไบต์ของออบเจ็กต์หรือชิปอีกครั้ง
การรองรับการไฮไลต์วัตถุไม่ได้จำกัดไว้เฉพาะกับอาร์เรย์ คุณสามารถตรวจสอบโครงสร้าง ออบเจ็กต์ และตัวชี้ได้ด้วย การเปลี่ยนแปลงเหล่านี้ทำให้การค้นหาความทรงจำของแอป C/C++ เป็นเรื่องง่ายกว่าที่เคย
อยากลองใช้ดูไหม คุณจะต้องดำเนินการต่อไปนี้
- มี Chrome 107 ขึ้นไป
- ติดตั้งส่วนขยาย C/C++ DWARF
- เปิดใช้การแก้ไขข้อบกพร่อง DWARF ใน DevTools >
การตั้งค่า > การทดสอบ > การแก้ไขข้อบกพร่องของ WebAslike: เปิดใช้การรองรับ DWARF - เปิดหน้าการสาธิตนี้
- ทำตามวิธีการในหน้าดังกล่าว
ตัวอย่างการแก้ไขข้อบกพร่อง
ในส่วนนี้ มาดูข้อบกพร่องของของเล่นเพื่อแสดงให้เห็นว่าคุณจะใช้เครื่องมือตรวจสอบหน่วยความจำสำหรับการแก้ไขข้อบกพร่อง C/C++ ได้อย่างไร ในตัวอย่างโค้ดด้านล่าง โปรแกรมเมอร์สร้างอาร์เรย์จำนวนเต็มและตัดสินใจใช้การคำนวณของตัวชี้เพื่อเลือกองค์ประกอบสุดท้าย ขออภัย โปรแกรมเมอร์เกิดความผิดพลาดในการคำนวณตัวชี้ และขณะนี้โปรแกรมจะพิมพ์ค่าที่ไม่มีความหมายแทนการพิมพ์องค์ประกอบสุดท้าย
#include <iostream>
int main()
{
int numbers[] = {1, 2, 3, 4};
int *ptr = numbers;
int arraySize = sizeof(numbers)/sizeof(int);
int* lastNumber = ptr + arraySize; // Can you notice the bug here?
std::cout <<../ *lastNumber <<../ '\n';
return 0;
}
โปรแกรมเมอร์จะเปลี่ยนไปใช้เครื่องมือตรวจสอบหน่วยความจำเพื่อแก้ไขข้อบกพร่อง คุณสามารถติดตามไปพร้อมกับการสาธิตนี้ โดยก่อนอื่นจะตรวจสอบอาร์เรย์ในเครื่องมือตรวจสอบหน่วยความจำ และพบว่าอาร์เรย์ numbers มีเฉพาะจำนวนเต็ม 1, 2, 3 และ 4 ตามที่คาดไว้
จากนั้น จะแสดงตัวแปร lastNumber จากแผงขอบเขต และสังเกตเห็นว่าตัวชี้ชี้ไปยังจำนวนเต็มนอกอาร์เรย์ เมื่อมีความรู้นี้ โปรแกรมเมอร์ก็ตระหนักได้ว่าพวกเขานับค่าชดเชยของตัวชี้ผิดที่บรรทัดที่ 8 ควรเป็น ptr + arraySize - 1
ถึงแม้จะเป็นเพียงตัวอย่างของเล่น แต่แสดงให้เห็นว่าการไฮไลต์วัตถุจะถ่ายทอดขนาดและตำแหน่งของวัตถุหน่วยความจำได้อย่างมีประสิทธิภาพอย่างไร ซึ่งจะทำให้คุณเข้าใจเกี่ยวกับสิ่งที่เกิดขึ้นภายในหน่วยความจำของแอป C/C++ ได้ดียิ่งขึ้น
วิธีที่เครื่องมือสำหรับนักพัฒนาเว็บค้นหาว่าควรไฮไลต์สิ่งใด
ในส่วนนี้ เราจะพูดถึงระบบนิเวศของเครื่องมือที่เปิดใช้การแก้ไขข้อบกพร่องของ C/C++ คุณจะได้เรียนรู้วิธีที่เครื่องมือสำหรับนักพัฒนาเว็บ, V8, ส่วนขยาย C/C++ DWARF และ Emscripten ทำให้การแก้ไขข้อบกพร่องของ C/C++ ใน Chrome เป็นไปได้
หากต้องการปลดล็อกศักยภาพของการแก้ไขข้อบกพร่อง C/C++ อย่างเต็มศักยภาพในเครื่องมือสำหรับนักพัฒนาเว็บ คุณต้องมี 2 สิ่งต่อไปนี้
- ส่วนขยาย C/C++ DWARF ที่ติดตั้งใน Chrome
- ไฟล์ต้นฉบับ C/C++ ที่คอมไพล์ไปยัง WebAssembly พร้อมคอมไพเลอร์ Emscripten ล่าสุดตามวิธีการในบล็อกโพสต์นี้
แต่ทำไมล่ะ V8 ซึ่งเป็นเครื่องมือ JavaScript และ WebAssembly ของ Chrome ไม่ทราบวิธีเรียกใช้ C หรือ C++ การใช้ Emscripten ซึ่งเป็นคอมไพเลอร์ C/C++ ไปยัง WebAssembly ทำให้คุณสามารถคอมไพเลอร์แอปที่สร้างใน C หรือ C++ เป็น WebAssembly และเรียกใช้ในเบราว์เซอร์
ในระหว่างการคอมไพล์ emscripten จะฝังข้อมูลการแก้ไขข้อบกพร่อง DWARF ลงในไบนารีของคุณ ในระดับสูง ข้อมูลนี้จะช่วยให้ส่วนขยายค้นหาตัวแปร WebAssembly ที่ตรงกับตัวแปร C/C++ ของคุณได้ และอื่นๆ อีกมากมาย วิธีนี้จะทำให้เครื่องมือสำหรับนักพัฒนาเว็บแสดงตัวแปร C++ ได้ แม้ว่า V8 จะเรียกใช้ WebAssembly อยู่จริงๆ หากสงสัย โปรดดูบล็อกโพสต์นี้เพื่อดูตัวอย่างข้อมูลการแก้ไขข้อบกพร่องของ DWARF
แล้วจริงๆ แล้วเกิดอะไรขึ้นเมื่อคุณเปิดเผย lastNumber เมื่อคลิกไอคอนหน่วยความจำ เครื่องมือสำหรับนักพัฒนาเว็บจะตรวจสอบว่าตัวแปรใดที่คุณต้องการตรวจสอบ จากนั้นจะค้นหาส่วนขยายในประเภทข้อมูลและตำแหน่งของ lastNumber ทันทีที่ส่วนขยายตอบสนองด้วยข้อมูลดังกล่าว เครื่องมือตรวจสอบหน่วยความจำจะสามารถแสดงส่วนที่เกี่ยวข้องของหน่วยความจำและทราบประเภทหน่วยความจำ ส่วนขยายนี้ยังแสดงขนาดของอ็อบเจกต์ให้คุณดูได้ด้วย
หากดู lastNumber ในตัวอย่างก่อนหน้านี้ คุณอาจสังเกตเห็นว่าเราตรวจสอบ lastNumber: int * แล้ว แต่ชิปในเครื่องมือตรวจสอบหน่วยความจำระบุว่า *lastNumber: int ทำให้เกิดอะไร เครื่องมือตรวจสอบจะใช้ตัวชี้รูปแบบ C++ เพื่อระบุว่าเป็นวัตถุประเภทใด หากคุณดูเคอร์เซอร์ เครื่องมือตรวจสอบจะแสดงตำแหน่งของตัวชี้
การไฮไลต์ที่ยังคงอยู่ในขั้นตอนโปรแกรมแก้ไขข้อบกพร่อง
เมื่อคุณแสดงออบเจ็กต์ในเครื่องมือตรวจสอบหน่วยความจำและทำขั้นตอนด้วยโปรแกรมแก้ไขข้อบกพร่อง ตัวตรวจสอบจะยังคงไฮไลต์ไว้หากเห็นว่ายังนำมาใช้ได้อยู่ ในช่วงแรกเราไม่มีฟีเจอร์นี้ในแผนกลยุทธ์ แต่เรารู้ได้อย่างรวดเร็วว่าการดำเนินการนี้อาจส่งผลต่อประสบการณ์การแก้ไขข้อบกพร่องของคุณ ลองนึกภาพดูว่าคุณจะต้องตรวจสอบอาร์เรย์ซ้ำหลังเสร็จสิ้นทุกขั้นตอนเหมือนในวิดีโอด้านล่าง
เมื่อโปรแกรมแก้ไขข้อบกพร่องพบเบรกพอยท์ใหม่ เครื่องมือตรวจสอบหน่วยความจำจะค้นหา V8 และส่วนขยายตัวแปรที่เชื่อมโยงกับไฮไลต์ก่อนหน้าอีกครั้ง จากนั้นจะเปรียบเทียบตำแหน่งและประเภทของวัตถุ หากตรงกัน ไฮไลต์จะยังคงอยู่ ในวิดีโอด้านบน มีการเขียนแบบวนซ้ำไปยังอาร์เรย์ x การดำเนินการเหล่านี้จะไม่เปลี่ยนประเภทหรือตำแหน่งของอาร์เรย์ ระบบจึงไฮไลต์ไว้
คุณอาจสงสัยว่าการดำเนินการนี้จะส่งผลต่อเคอร์เซอร์อย่างไร หากคุณมีเคอร์เซอร์ที่ไฮไลต์และกำหนดเคอร์เซอร์ใหม่ให้กับวัตถุอื่น ตำแหน่งเก่าและใหม่ของวัตถุที่ไฮไลต์จะแตกต่างกันและไฮไลต์จะหายไป เนื่องจากออบเจ็กต์ที่ชี้ไปยังตำแหน่งใหม่อาจคงอยู่ที่ใดก็ได้ใน WebAssembly Memory และมักจะมีความเกี่ยวข้องกับตำแหน่งหน่วยความจำก่อนหน้าเพียงเล็กน้อย การนำไฮไลต์ออกจึงชัดเจนกว่าการข้ามไปยังตำแหน่งหน่วยความจำใหม่ คุณสามารถไฮไลต์ตัวชี้อีกครั้งได้โดยคลิกที่ไอคอนหน่วยความจำในแผงขอบเขต
บทสรุป
บทความนี้จะอธิบายการปรับปรุงเครื่องมือตรวจสอบหน่วยความจำสำหรับการแก้ไขข้อบกพร่อง C/C++ เราหวังว่าฟีเจอร์ใหม่นี้จะทำให้การแก้ไขข้อบกพร่องในหน่วยความจำของแอป C/C++ ง่ายขึ้น หากคุณมีคำแนะนำให้ปรับปรุงบริการให้ดียิ่งขึ้น โปรดแจ้งให้เราทราบด้วยการรายงานข้อบกพร่อง!
สิ่งที่จะเกิดขึ้นหลังจากนี้
ดูข้อมูลเพิ่มเติมได้ที่