หากใช้ Chrome 111 ขึ้นไป คุณอาจสังเกตเห็นแล้วว่าเราได้เปลี่ยนดีไซน์ของแถบด้านข้างของเบรกพอยท์ และใน Chrome 113 แถบด้านข้างใหม่จะเข้ามาแทนที่ดีไซน์เก่าทั้งหมด เป้าหมายของเราในการปรับดีไซน์ใหม่นี้คือการปรับปรุงเวิร์กโฟลว์ของเบรกพอยท์ โดยทำดังนี้
แสดงภาพรวมที่ดีขึ้น ของเบรกพอยท์ทั้งหมดที่ตั้งไว้ ทำให้เวิร์กโฟลว์ของผู้ใช้ทั่วไปกับเบรกพอยท์เข้าถึงได้ง่ายขึ้น และใช้งานง่ายขึ้น ทำให้ฟีเจอร์เบรกพอยท์ที่มีอยู่ซึ่งมีประโยชน์ มองเห็นได้
โพสต์นี้จะถือว่าคุณคุ้นเคยกับการแก้ไขข้อบกพร่องโดยใช้เบรกพอยท์อยู่แล้ว หากยังไม่เคยใช้เบรกพอยท์มาก่อน โปรดไปที่ ภาพรวมเกี่ยวกับเบรกพอยท์นี้ และดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เบรกพอยท์เพื่อแก้ไขข้อบกพร่องของโค้ด
ตอนนี้มาดูสิ่งที่การปรับดีไซน์ใหม่นำเสนอและวิธีใช้แถบด้านข้างใหม่กัน โปรดทราบว่าการปรับดีไซน์ใหม่นี้มุ่งเน้นไปที่การทำให้ ฟีเจอร์ที่มีอยู่ใช้งานง่ายขึ้นและเข้าถึงได้ง่ายขึ้น แทนที่จะเพิ่มฟีเจอร์ใหม่
หยุดชั่วคราวเมื่อเกิดข้อยกเว้นเพื่อตรวจสอบสาเหตุที่โค้ดแสดงข้อผิดพลาด
โค้ดของคุณแสดงข้อยกเว้นหรือไม่ ไม่ต้องกังวล เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณหยุดชั่วคราวเมื่อเกิดข้อยกเว้นเพื่อหยุดการดำเนินการ ณ จุดที่เกิดข้อยกเว้น ซึ่งจะช่วยให้คุณตรวจสอบและทำความเข้าใจสถานการณ์ที่โค้ดแสดงข้อผิดพลาดได้ดียิ่งขึ้น คุณสามารถเลือกได้ว่าจะหยุดชั่วคราวเมื่อเกิดข้อยกเว้นที่จัดการได้ ข้อยกเว้นที่จัดการไม่ได้ หรือทั้ง 2 อย่าง โดยเลือกช่องทำเครื่องหมายที่เกี่ยวข้องในแถบด้านข้าง
จัดการเบรกพอยท์: ขยายกลุ่มเบรกพอยท์ที่เกี่ยวข้องและยุบกลุ่มอื่นๆ เพื่อมุ่งเน้นไปที่สิ่งที่เกี่ยวข้อง
เบรกพอยท์อาจกระจายอยู่ตามไฟล์ต่างๆ แถบด้านข้างของเบรกพอยท์จะจัดกลุ่มเบรกพอยท์ตามไฟล์ที่เบรกพอยท์นั้นๆ อยู่ มุ่งเน้นเฉพาะเบรกพอยท์ที่สำคัญสำหรับการแก้ไขข้อบกพร่องในเซสชันปัจจุบันโดยขยายกลุ่มเบรกพอยท์ที่เกี่ยวข้องและยุบกลุ่มที่เหลือ
จัดการเบรกพอยท์: คลิกเพียงครั้งเดียวเพื่อข้ามไปยังโค้ด นำออก หรือเปิด/ปิดใช้เบรกพอยท์
แถบด้านข้างของเบรกพอยท์ช่วยให้คุณทำงานทั่วไปได้ด้วยการคลิกเพียงครั้งเดียว ภาพรวมของสิ่งที่คุณทำได้มีดังนี้
ไปที่ตำแหน่งเบรกพอยท์ในตัวแก้ไขโค้ด นำเบรกพอยท์ 1 รายการหรือเบรกพอยท์ทั้งหมดภายในไฟล์ออก เปิดหรือปิดใช้เบรกพอยท์ 1 รายการหรือเบรกพอยท์ทั้งหมดภายในไฟล์
และทั้งหมดนี้ทำได้ด้วยการคลิกเพียงครั้งเดียว แน่นอนว่าตัวเลือกเหล่านี้ยังมีอยู่ในเมนูตามบริบทด้วย
ข้ามไปยังตำแหน่งเบรกพอยท์โดยคลิกข้อมูลโค้ดของเบรกพอยท์
คุณต้องการตรวจสอบตำแหน่งที่คุณตั้งเบรกพอยท์ไว้ในโค้ดและวิเคราะห์โค้ดโดยรอบหรือไม่ เพียงคลิกข้อมูลโค้ดของเบรกพอยท์ภายในแถบด้านข้าง แล้วระบบจะเปิดตำแหน่งโค้ดในตัวแก้ไขโค้ด
นำเบรกพอยท์รายการเดียวหรือเบรกพอยท์ทั้งหมดภายในไฟล์ออกโดยคลิกปุ่มนำออก
วางเมาส์เหนือเบรกพอยท์หรือกลุ่มเบรกพอยท์เพื่อแสดงปุ่มนำออก ซึ่งจะนำเบรกพอยท์รายการเดียวหรือเบรกพอยท์ทั้งหมดในไฟล์ออกเมื่อคลิก
ปิดใช้เบรกพอยท์รายการเดียวหรือเบรกพอยท์ทั้งหมดภายในไฟล์
เลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายข้างเบรกพอยท์เพื่อเปิดหรือปิดใช้เบรกพอยท์นั้น
หากต้องการเปิดหรือปิดใช้เบรกพอยท์ทั้งหมดในไฟล์ ให้วางเมาส์เหนือกลุ่มเบรกพอยท์ แล้วเลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายที่ปรากฏข้างชื่อไฟล์
ใช้ฟีเจอร์เบรกพอยท์ที่รู้จักกันน้อยกว่า ได้แก่ เบรกพอยท์แบบมีเงื่อนไขและจุดตรวจสอบ
แก้ไขเงื่อนไขเบรกพอยท์หรือเปลี่ยนบันทึกจุดตรวจสอบโดยแก้ไขเบรกพอยท์
แก้ไขเงื่อนไขเบรกพอยท์หรือบันทึกโดยวางเมาส์เหนือเบรกพอยท์แล้วคลิกปุ่ม แก้ไขที่ปรากฏขึ้น ซึ่งจะเปิดกล่องโต้ตอบสำหรับเปลี่ยนประเภทเบรกพอยท์และรายละเอียดของเบรกพอยท์
หรือเลือกบรรทัดของเบรกพอยท์ในตัวแก้ไขโค้ดแล้วพิมพ์ Control+Alt+b ใน Linux และ Command+Alt+b ใน Mac เพื่อเปิดกล่องโต้ตอบการแก้ไขเบรกพอยท์
นอกจากนี้ คุณยังตรวจสอบเงื่อนไขหรือบันทึกจุดตรวจสอบได้อย่างรวดเร็วโดยวางเมาส์เหนือเบรกพอยท์ในแถบด้านข้าง
บทสรุป
เป้าหมายของเราในการปรับดีไซน์ใหม่ของแถบด้านข้างของเบรกพอยท์คือการทำให้การแก้ไขข้อบกพร่องด้วยเบรกพอยท์ง่ายขึ้น ที่สำคัญที่สุดคือเรามุ่งมั่นที่จะทำให้ทุกอย่างเป็นระบบมากขึ้น รวมถึงเข้าถึงและทำความเข้าใจได้ง่ายขึ้น เราหวังว่าการปรับปรุงเหล่านี้จะเป็นประโยชน์ต่อคุณในการแก้ไขข้อบกพร่องในเซสชันถัดไป
หากมีข้อเสนอแนะสำหรับการปรับปรุงเพิ่มเติม โปรดแจ้งให้เราทราบโดยยื่นรายงานข้อบกพร่อง
ดาวน์โหลดช่องทางตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือ Beta เป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ช่องทางตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ ข้อมูลอัปเดต หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งความคิดเห็นและคำขอฟีเจอร์มาที่ crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
- ทวีตที่ @ChromeDevTools
- แสดงความคิดเห็นในวิดีโอ "มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ" หรือวิดีโอ "เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ" ใน YouTube