วิธีที่แถบด้านข้างของเบรกพอยท์ใหม่ช่วยให้คุณแก้ไขข้อบกพร่องได้เร็วขึ้น

Kim-Anh Tran
Kim-Anh Tran
X GitHub
Vaatika Dabra Groth
Vaatika Dabra Groth
X

แผงแถบด้านข้างของจุดหยุดแสดงผลแบบเก่าและแบบใหม่แสดงอยู่เคียงข้างกัน

หากคุณใช้ Chrome 111 ขึ้นไป คุณอาจสังเกตเห็นแล้วว่าเราได้เปลี่ยนการออกแบบแถบด้านข้างของจุดพัก ใน Chrome 113 แถบด้านข้างใหม่จะแทนที่การออกแบบเดิมทั้งหมด เป้าหมายของเราในการรีดีไซน์คือปรับปรุงเวิร์กโฟลว์จุดพักด้วยวิธีต่อไปนี้

ให้ภาพรวมที่ดีขึ้นเกี่ยวกับจุดหยุดทั้งหมดที่ตั้งไว้ ทำให้เวิร์กโฟลว์ทั่วไปของผู้ใช้ที่มีจุดหยุดพักเข้าถึงได้ง่ายขึ้นและใช้งานง่ายขึ้น แสดงฟีเจอร์เบรกพอยต์ที่มีอยู่ซึ่งเจ๋งสุดๆ

โพสต์นี้ถือว่าคุณคุ้นเคยกับการแก้ไขข้อบกพร่องโดยใช้จุดหยุดชั่วคราวอยู่แล้ว หากไม่เคยใช้จุดหยุดชั่วคราวมาก่อน โปรดไปที่ภาพรวมนี้เกี่ยวกับจุดหยุดชั่วคราวและดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้จุดหยุดชั่วคราวเพื่อแก้ไขข้อบกพร่องของโค้ด

มาดูกันว่าการรีดีไซน์นี้มีอะไรให้บ้างและคุณใช้ประโยชน์จากแถบด้านข้างใหม่ได้อย่างไร โปรดทราบว่าการออกแบบใหม่นี้มุ่งเน้นที่การทําให้ฟีเจอร์ที่มีอยู่ใช้งานได้ง่ายขึ้นและเข้าถึงได้ง่ายขึ้น แทนที่จะเพิ่มฟีเจอร์ใหม่

หยุดชั่วคราวเนื่องจากข้อยกเว้นเพื่อตรวจสอบสาเหตุที่โค้ดแสดงข้อผิดพลาด

หยุดชั่วคราวเมื่อพบและไม่ได้พบข้อยกเว้น

โค้ดของคุณแสดงข้อยกเว้นไหม ไม่ต้องกังวล เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ให้คุณหยุดข้อยกเว้นชั่วคราวเพื่อหยุดการดําเนินการ ณ จุดที่มีการยกข้อยกเว้น ซึ่งจะช่วยให้คุณตรวจสอบและเข้าใจสถานการณ์ที่โค้ดแสดงข้อผิดพลาดได้ดียิ่งขึ้น คุณเลือกได้ว่าต้องการหยุดชั่วคราวเมื่อพบข้อยกเว้นที่จับได้ ข้อยกเว้นที่จับไม่ได้ หรือทั้ง 2 อย่างโดยเลือกช่องทําเครื่องหมายที่เกี่ยวข้องในแถบด้านข้าง

จัดการเบรกพอยต์: ขยายกลุ่มเบรกพอยต์ที่เกี่ยวข้องและยุบกลุ่มอื่นๆ เพื่อมุ่งเน้นที่ข้อมูลที่เกี่ยวข้อง

ยุบและขยายกลุ่มจุดหยุดพัก

จุดหยุดพักอาจกระจายอยู่ในหลายไฟล์ แถบด้านข้างของเบรกพอยต์จะจัดกลุ่มเบรกพอยต์ตามไฟล์ที่เบรกพอยต์นั้นอยู่ มุ่งเน้นเฉพาะจุดที่มีความสำคัญต่อเซสชันการแก้ไขข้อบกพร่องปัจจุบันโดยการขยายกลุ่มจุดหยุดพักที่เกี่ยวข้อง และยุบกลุ่มที่เหลือ

จัดการเบรกพอยต์: คลิกเดียวเพื่อข้ามไปยังโค้ด นำออก หรือเปิด/ปิดใช้เบรกพอยต์

แถบด้านข้างของจุดหยุดพักช่วยให้คุณทํางานทั่วไปได้ด้วยการคลิกเพียงครั้งเดียว ภาพรวมของวิธีดำเนินการมีดังนี้

ไปที่ตำแหน่งจุดหยุดพักในตัวแก้ไขโค้ด นำเบรกพอยต์ 1 รายการหรือทั้งหมดในไฟล์ออก เปิดหรือปิดใช้เบรกพอยต์ 1 รายการหรือทั้งหมดภายในไฟล์

และทั้งหมดนี้ทำได้ด้วยการคลิกเพียงครั้งเดียว แน่นอนว่าตัวเลือกเหล่านี้ยังมีอยู่ในเมนูตามบริบทด้วย

ข้ามไปยังตำแหน่งเบรกพอยต์โดยคลิกข้อมูลโค้ดเบรกพอยต์

ข้ามไปยังตำแหน่งซอร์สโค้ดในตัวแก้ไขโค้ด

คุณต้องการตรวจสอบตําแหน่งในโค้ดที่คุณตั้งจุดหยุดพัก และวิเคราะห์โค้ดรอบๆ ไหม เพียงคลิกข้อมูลโค้ดของจุดหยุดพักภายในแถบด้านข้าง แล้วระบบจะเปิดตำแหน่งโค้ดในตัวแก้ไขโค้ด

นำเบรกพอยต์รายการเดียวหรือทั้งหมดในไฟล์ออกโดยคลิกปุ่มนำออก

นำเบรกพอยต์รายการเดียวหรือทั้งหมดในไฟล์ออก

วางเมาส์เหนือเบรกพอยต์หรือกลุ่มเบรกพอยต์เพื่อแสดงปุ่มนำออกที่จะนำเบรกพอยต์รายการเดียวหรือทั้งหมดในไฟล์ออกเมื่อคลิก

ปิดใช้เบรกพอยต์รายการเดียวหรือทั้งหมดภายในไฟล์

เปิดหรือปิดใช้เบรกพอยต์รายการเดียวหรือทั้งหมดภายในไฟล์

เลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายข้างจุดหยุดพักเพื่อเปิดหรือปิดใช้

หากต้องการเปิดหรือปิดใช้เบรกพอยต์ทั้งหมดในไฟล์ ให้วางเมาส์เหนือกลุ่มเบรกพอยต์ แล้วเลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายที่ปรากฏข้างชื่อไฟล์

ใช้ฟีเจอร์เบรกพอยท์ที่ไม่ค่อยมีคนรู้จัก เช่น เบรกพอยต์แบบมีเงื่อนไขและจุดตรวจสอบ

แก้ไขเงื่อนไขเบรกพอยต์หรือเปลี่ยนบันทึกจุดตรวจสอบโดยการแก้ไขเบรกพอยต์

แก้ไขเงื่อนไขเบรกพอยต์หรือเปลี่ยนบันทึกจุดตรวจสอบ

แก้ไขเงื่อนไขหรือบันทึกจุดหยุดพักโดยวางเมาส์เหนือจุดหยุดพัก แล้วคลิกปุ่มแก้ไขที่ปรากฏขึ้น ซึ่งจะเปิดกล่องโต้ตอบสําหรับเปลี่ยนประเภทและรายละเอียดของจุดหยุด

หรือเลือกบรรทัดของจุดหยุดพักในเครื่องมือแก้ไขโค้ด แล้วพิมพ์ Control+Alt+b ใน Linux และ Command+Alt+b ใน Mac เพื่อเปิดกล่องโต้ตอบแก้ไขจุดหยุดพัก

นอกจากนี้ คุณยังตรวจสอบเงื่อนไขหรือบันทึกจุดเข้าสู่ระบบอีกครั้งได้อย่างรวดเร็วโดยวางเมาส์เหนือจุดหยุดพักในแถบด้านข้าง

ดูบันทึกเงื่อนไขหรือบันทึกจุดบันทึก

บทสรุป

เป้าหมายของเราในการปรับโฉมแถบด้านข้างของจุดหยุดพักคือทำให้การแก้ไขข้อบกพร่องด้วยจุดหยุดพักง่ายขึ้น ที่สำคัญที่สุดคือเรามุ่งมั่นที่จะทำให้ทุกอย่างมีโครงสร้างมากขึ้น รวมถึงเข้าถึงและทำความเข้าใจได้ง่ายขึ้น เราหวังว่าการปรับปรุงเหล่านี้จะช่วยคุณในเซสชันการแก้ไขข้อบกพร่องครั้งถัดไป

หากมีคำแนะนำสำหรับการปรับปรุงเพิ่มเติม โปรดแจ้งให้เราทราบโดยรายงานข้อบกพร่อง

ดาวน์โหลดแชแนลตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การอัปเดต หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ