ใน Chrome 92 เราได้เปิดตัวเครื่องมือตรวจสอบหน่วยความจำ ซึ่งเป็นเครื่องมือสำหรับตรวจสอบบัฟเฟอร์หน่วยความจำเชิงเส้น ในบทความนี้ เราจะพูดถึงวิธีที่เราปรับปรุงเครื่องมือตรวจสอบสำหรับการแก้ไขข้อบกพร่อง C/C++ และปัญหาทางเทคนิคที่พบระหว่างทาง
ต่อไปนี้เป็นบล็อกโพสต์ที่เกี่ยวข้องบางส่วนหากคุณเพิ่งเริ่มใช้การแก้ไขข้อบกพร่อง C/C++ และเครื่องมือตรวจสอบหน่วยความจำ
- สนใจการแก้ไขข้อบกพร่องหน่วยความจำแบบเจาะลึกไหม โปรดดูหัวข้อขอแนะนําเครื่องมือตรวจสอบหน่วยความจํา
- หากต้องการทราบข้อมูลเบื้องต้นเกี่ยวกับชุดเครื่องมือแก้ไขข้อบกพร่อง C/C++ แบบสมบูรณ์ โปรดดูการแก้ไขข้อบกพร่อง WASM ด้วยเครื่องมือสมัยใหม่และการแก้ไขข้อบกพร่อง WebAssembly เร็วขึ้น
บทนำ
เครื่องมือตรวจสอบหน่วยความจำมีตัวเลือกการแก้ไขข้อบกพร่องที่มีประสิทธิภาพมากขึ้นสำหรับบัฟเฟอร์หน่วยความจำเชิงเส้น ในกรณีของ C/C++ คุณสามารถตรวจสอบออบเจ็กต์หน่วยความจำ C/C++ ในหน่วยความจำ WebAssembly
การจดจำไบต์ของออบเจ็กต์ท่ามกลางหน่วยความจำ WebAssembly รอบๆ เป็นปัญหา คุณต้องทราบขนาดของออบเจ็กต์และนับไบต์จากจุดเริ่มต้นของออบเจ็กต์ ในภาพหน้าจอด้านล่าง มีการกําหนดค่าไบต์แรกของอาร์เรย์ int32 10 องค์ประกอบ แต่ยังไม่ชัดเจนว่าไบต์อื่นๆ ใดเป็นของอาร์เรย์ หากสามารถจดจำไบต์ทั้งหมดที่เป็นของวัตถุได้ทันทีคงจะดีไม่น้อย
การไฮไลต์ออบเจ็กต์ในเครื่องมือตรวจสอบหน่วยความจำ
ตั้งแต่ Chrome 107 เป็นต้นไป เครื่องมือตรวจสอบหน่วยความจำจะไฮไลต์ไบต์ทั้งหมดของออบเจ็กต์หน่วยความจำ C/C++ ซึ่งจะช่วยให้คุณแยกความแตกต่างระหว่างหน่วยความจำดังกล่าวออกจากหน่วยความจำรอบข้างได้
ดูวิดีโอด้านล่างเพื่อดูการทำงานของเครื่องมือตรวจสอบหน่วยความจำ เมื่อคุณแสดงอาร์เรย์ x ในเครื่องมือตรวจสอบหน่วยความจำ หน่วยความจำที่ไฮไลต์จะปรากฏในเครื่องมือดูหน่วยความจำพร้อมกับชิปใหม่ด้านบน ชิปนี้จะแสดงชื่อและประเภทของหน่วยความจำที่ไฮไลต์ คลิกชิปเพื่อข้ามไปยังหน่วยความจำของวัตถุ เมื่อวางเมาส์เหนือชิป ไอคอนกากบาทจะปรากฏขึ้น ให้คลิกไอคอนดังกล่าวเพื่อนำไฮไลต์ออก
เมื่อคุณเลือกไบต์นอกออบเจ็กต์ที่ตรวจสอบอยู่ ระบบจะเบลอไฮไลต์เพื่อไม่ให้รบกวนคุณ หากต้องการโฟกัสอีกครั้ง ให้คลิกไบต์ของวัตถุหรือชิปอีกครั้ง
การรองรับการไฮไลต์ออบเจ็กต์ไม่ได้จํากัดอยู่ที่อาร์เรย์เท่านั้น นอกจากนี้ คุณยังตรวจสอบสตรูคเจอร์ ออบเจ็กต์ และพอยน์เตอร์ได้ด้วย การเปลี่ยนแปลงเหล่านี้ช่วยให้คุณสำรวจหน่วยความจําของแอป C/C++ ได้ง่ายกว่าที่เคย
หากอยากลองใช้ คุณจะต้องดำเนินการต่อไปนี้
- มี Chrome 107 ขึ้นไป
- ติดตั้งส่วนขยาย C/C++ DWARF
- เปิดใช้การแก้ไขข้อบกพร่อง DWARF ใน DevTools >
การตั้งค่า > การทดสอบ > การแก้ไขข้อบกพร่อง WebAssemble: เปิดใช้การรองรับ 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++ โดยเฉพาะอย่างยิ่ง คุณจะได้เรียนรู้ว่า DevTools, 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 และส่วนขยายอีกครั้งสำหรับตัวแปรที่เชื่อมโยงกับการไฮไลต์ก่อนหน้า จากนั้นจะเปรียบเทียบตำแหน่งและประเภทของวัตถุ หากตรงกัน ข้อความไฮไลต์จะยังคงอยู่ ในวิดีโอด้านบน มีวงวน for เขียนลงในอาร์เรย์ x การดำเนินการเหล่านี้จะไม่เปลี่ยนประเภทหรือตำแหน่งของอาร์เรย์ ดังนั้นอาร์เรย์จะยังคงไฮไลต์อยู่
คุณอาจสงสัยว่าเรื่องนี้ส่งผลต่อเคอร์เซอร์อย่างไร หากคุณมีเคอร์เซอร์ที่ไฮไลต์และกำหนดเคอร์เซอร์ใหม่ให้กับวัตถุอื่น ตำแหน่งเก่าและใหม่ของวัตถุที่ไฮไลต์จะแตกต่างกันและไฮไลต์จะหายไป เนื่องจากออบเจ็กต์ที่ชี้ไปใหม่จะอยู่ที่ไหนก็ได้ในหน่วยความจำ WebAssembly และอาจมีความสัมพันธ์เพียงเล็กน้อยกับตำแหน่งหน่วยความจำก่อนหน้า การนําการไฮไลต์ออกจึงชัดเจนกว่าการข้ามไปยังตําแหน่งหน่วยความจําใหม่ คุณสามารถไฮไลต์ตัวชี้อีกครั้งได้โดยคลิกที่ไอคอนหน่วยความจำในแผงขอบเขต
บทสรุป
บทความนี้อธิบายการปรับปรุงเครื่องมือตรวจสอบหน่วยความจำสำหรับการแก้ไขข้อบกพร่อง C/C++ เราหวังว่าฟีเจอร์ใหม่นี้จะช่วยให้การแก้ไขข้อบกพร่องหน่วยความจำของแอป C/C++ ง่ายขึ้น หากคุณมีคำแนะนำให้ปรับปรุงบริการให้ดียิ่งขึ้น โปรดแจ้งให้เราทราบด้วยการรายงานข้อบกพร่อง!
สิ่งที่จะเกิดขึ้นหลังจากนี้
ดูข้อมูลเพิ่มเติมได้ที่