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