ใน 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 และมักสัมพันธ์กับตำแหน่งหน่วยความจำก่อนหน้าเพียงเล็กน้อย การนำไฮไลต์ออกจึงชัดเจนกว่าการข้ามไปยังตำแหน่งหน่วยความจำใหม่ คุณสามารถไฮไลต์ตัวชี้อีกครั้งได้โดยคลิกที่ไอคอนหน่วยความจำในแผงขอบเขต
บทสรุป
บทความนี้จะอธิบายการปรับปรุงเครื่องมือตรวจสอบหน่วยความจำสำหรับการแก้ไขข้อบกพร่อง C/C++ เราหวังว่าฟีเจอร์ใหม่นี้จะช่วยให้การแก้ไขข้อบกพร่องหน่วยความจำของแอป C/C++ ง่ายขึ้น หากคุณมีคำแนะนำให้ปรับปรุงบริการให้ดียิ่งขึ้น โปรดแจ้งให้เราทราบด้วยการรายงานข้อบกพร่อง!
สิ่งที่จะเกิดขึ้นหลังจากนี้
ดูข้อมูลเพิ่มเติมได้ที่