มีอะไรใหม่ใน DevTools

ในเดือนกันยายนปีที่แล้ว ฉันได้เขียนเกี่ยวกับการอัปเดตล่าสุดบางส่วนใน DevTools อันเป็นที่รักของเรา ทั้งใน Firefox, Chrome, Safari และ Edge สี่เดือนผ่านไปตั้งแต่นั้นมา และทีมต่างๆ ที่ทำงานเกี่ยวกับ DevTools ก็ยุ่งมาก! ในช่วงสี่เดือนนี้ พวกเขาสร้างสิ่งใหม่ๆ ให้เราใช้มากมาย ตั้งแต่ การปรับปรุง ประสิทธิภาพการทำงานที่มีประสิทธิภาพไปจนถึงแผงใหม่ทั้งหมด พวกเขาได้ปิดช่องว่างพาริตีอย่างต่อเนื่องและสร้างสรรค์สิ่งใหม่ๆ ด้วยวิธีการใหม่ในการดีบักและปรับปรุงประสบการณ์การใช้เว็บของเรา

นั่นหมายความว่าถึงเวลาแล้วสำหรับการอัปเดต DevTools อีกครั้ง มาเริ่มกันเลย!

• โครเมียม
• ขอบ
• ซาฟารี
• Firefox

โครเมียม

ทีมงาน Chrome เพิ่งเปิดตัวแผงใหม่ที่ทำให้ง่ายต่อการบันทึกและเล่นขั้นตอนผู้ใช้ซ้ำ นั่นคือแผงโปรแกรมบันทึก

บันทึก เล่นซ้ำ และวัดกระแสผู้ใช้

หากคุณเคยพบว่าตัวเองต้องทำขั้นตอนการนำทางเดิมซ้ำแล้วซ้ำเล่าในเว็บแอปเพื่อตรวจสอบจุดบกพร่อง การทำเช่นนี้อาจเปลี่ยนชีวิตคุณ!

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

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

นำทางต้นไม้การช่วยสำหรับการเข้าถึง

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

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

Chrome DevTools มีแผงการช่วยเหลือพิเศษในแถบด้านข้างของแผงองค์ประกอบซึ่งมีแผนผังการช่วยสำหรับการเข้าถึงมาระยะหนึ่งแล้ว เมื่อเร็ว ๆ นี้ ทีมงานได้ทดลองแสดงทั้งการช่วยการเข้าถึงและแผนผัง DOM ในที่เดียวกัน ทำให้นักพัฒนาซอฟต์แวร์สามารถสลับไปมาระหว่างทั้งสองได้

หากต้องการเปิดใช้งานการทดสอบนี้ ให้ไปที่แผงแถบด้านข้างการช่วยสำหรับการเข้าถึง และเลือก "เปิดใช้งานโครงสร้างการเข้าถึงแบบเต็มหน้า" จากนั้นคุณจะมีปุ่มใหม่ปรากฏขึ้นที่มุมบนขวาของแผนผัง DOM ที่ให้คุณสลับไปมาระหว่าง DOM และแผนผังการเข้าถึงได้

ดูข้อมูลเพิ่มเติมที่นี่ และแจ้งให้ทีมทราบความคิดเห็นของคุณ

ภาพรวม CSS เปิดอยู่โดยค่าเริ่มต้น

แผงภาพรวม CSS ไม่ใช่เรื่องใหม่ แต่มีแผงให้เลือกมากมาย คุณอาจไม่เคยใช้เลย เป็นการทดลองมาเป็นเวลานานมาก ซึ่งหมายความว่าคุณต้องเข้าสู่การตั้งค่า DevTools เพื่อเปิดใช้งานก่อนที่จะสามารถใช้งานได้

นี้ไม่จำเป็นอีกต่อไป แผงภาพรวม CSS เป็นเพียงคุณลักษณะปกติในขณะนี้ และคุณสามารถเปิดได้โดยไปที่ … > More tools > CSS Overview

หากคุณไม่เคยใช้มาก่อน ลองดูเพราะมันเป็นเครื่องมือที่มีประโยชน์มากในการระบุการปรับปรุง CSS ที่อาจเกิดขึ้น เช่น ปัญหาด้านคอนทราสต์หรือการประกาศ CSS ที่ไม่ได้ใช้

ขณะที่คุณอยู่ในเมนู More tools ให้มองไปรอบๆ Chrome DevTools มีแผงมากกว่า 30 แผง! นั่นเป็นจำนวนมาก แต่โปรดจำไว้ว่าพวกเขาทั้งหมดอยู่ที่นี่ด้วยเหตุผลเฉพาะ อาจมีบางแง่มุมของเว็บแอปของคุณที่แผงบางอย่างสามารถช่วยคุณได้ อยากรู้อยากเห็น และถ้าคุณไม่รู้ว่าสิ่งนั้นทำอะไร จำไว้ว่ามีเอกสารที่คุณสามารถอ่านได้

ขอบ

ในขณะที่ทีมเบราว์เซอร์ของ Microsoft ยังคงเป็นผู้สนับสนุนโครงการ Chromium อย่างต่อเนื่อง พวกเขายังใช้เวลามากขึ้นกับคุณสมบัติใหม่ไม่ซ้ำใครที่มีเพียง Edge เท่านั้น ลองทบทวนทั้งสองที่นี่

ดีบักหน่วยความจำ DOM รั่วไหลด้วยแผงองค์ประกอบที่แยกออก

Edge เพิ่งเปิดตัวเครื่องมือตรวจสอบการรั่วไหลของหน่วยความจำ ซึ่งเป็นเครื่องมือ Detached Elements ซึ่งมีประโยชน์มากในการตรวจสอบการรั่วไหลในแอปที่ใช้เวลานาน

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

หากคุณพบว่าแอปของคุณยังคงต้องการหน่วยความจำเพิ่มมากขึ้นเรื่อยๆ เมื่อเวลาผ่านไป ให้ลองใช้ Detached Elements มันสามารถชี้คุณไปในทิศทางที่ถูกต้องได้อย่างรวดเร็ว

เรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ในบล็อกโพสต์ประกาศและเอกสาร

ส่วนต่อประสานผู้ใช้ใหม่ล่าสุดสำหรับ DevTools พร้อมโหมดโฟกัส

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

ทีม Edge ได้ทำการทดลองและการศึกษาผู้ใช้ซึ่งบ่งชี้ว่า DevTools สามารถทำได้อย่างล้นหลาม (ฉันพูดไปหรือเปล่าว่า DevTools มีแผงมากกว่า 30 แผงแล้ว?) แม้ว่านักพัฒนาเว็บรายใหม่จะไม่มีแนวคิดที่ชัดเจนว่าจะเริ่มต้นจากที่ใดและจะสำรวจและใช้เครื่องมืออย่างไร แต่นักพัฒนาที่มีประสบการณ์มากกว่ามักจะพบว่าตนเองอยู่ในเวิร์กโฟลว์ที่คุ้นเคยเพียงหนึ่งหรือสองขั้นตอน

จากสิ่งนี้ ทีม Edge ได้เปิดตัวคุณลักษณะทดลองใหม่ที่ทำให้เรียนรู้และใช้งาน DevTools: Focus Mode ได้ง่ายขึ้น

Focus Mode มีแถบกิจกรรมใหม่ วิธีง่ายๆ ในการเพิ่มและลบเครื่องมือ ลิ้นชักมุมมองด่วน และเมนูที่ออกแบบใหม่

หากต้องการลองใช้ Focus Mode ให้เปิดใช้งานก่อนโดยไปที่ Settings > Experiments > Focus Mode

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Focus Mode ได้ในเอกสารอธิบาย Edge นี้

ซาฟารี

แม้ว่า Safari จะอัปเดตตัวเองประมาณปีละสองครั้ง (โดยจะมีเวอร์ชันหลักในช่วงฤดูใบไม้ร่วงพร้อมฟีเจอร์ใหม่และอีกเวอร์ชันหนึ่งในฤดูใบไม้ผลิ) คุณก็สามารถรับการอัปเดตและเข้าถึงฟีเจอร์ในช่วงต้นได้บ่อยขึ้นโดยใช้ช่อง Safari Technology Preview เบราว์เซอร์เวอร์ชันนี้จะอัปเดตตัวเองทุกๆ 2 ถึง 3 สัปดาห์โดยประมาณ

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

ต่อไปนี้คือการอัปเดตล่าสุดของ Safari Web Inspector ที่มีอยู่ในช่อง Technology Preview ที่ทำให้การทำงานกับ CSS ดีขึ้นมาก

Fuzzy Auto-Completion สำหรับ CSS ในแผงสไตล์

การเปลี่ยน CSS เป็นหนึ่งในสิ่งที่เราทำมากที่สุดใน DevTools และ Safari ทำให้มันเร็วขึ้นมากสำหรับพวกเราทุกคน

ตอนนี้การเติมข้อความอัตโนมัติสำหรับ CSS รองรับการจับคู่แบบคลุมเครือ ซึ่งหมายความว่าคุณสามารถพิมพ์สิ่งต่าง ๆ เช่น "pat" เพื่อจับคู่ padding-top หรือ "bob" เพื่อจับคู่ border-bottom

หากคุณใช้ VS Code หรือโปรแกรมแก้ไขข้อความอื่นที่สนับสนุนการเติมข้อความอัตโนมัติแบบคลุมเครือ คุณจะรู้สึกเหมือนอยู่บ้าน

การจัดกลุ่มตัวแปร CSS ตามประเภทในแผงคอมพิวเตอร์

ตัวแปร CSS (หรือที่รู้จักในชื่อ คุณสมบัติที่กำหนดเอง) ได้รับการสนับสนุนบนเบราว์เซอร์หลักทั้งหมดมาหลายปีแล้ว และเจ้าของไซต์ ระบบการออกแบบ และไลบรารีเริ่มใช้งานอย่างครอบคลุม ด้วยเหตุผลที่ดี มันเยี่ยมมาก!

แต่ด้วยการใช้งานที่เพิ่มขึ้นนี้ แผง Styles และ Computed ของ DevTools ของเราจึงเริ่มรู้สึกแออัดเล็กน้อย

Safari ได้ออกฟีเจอร์ที่ช่วยในเรื่องนี้ได้เล็กน้อย บานหน้าต่างที่ Computed แล้วตอนนี้แสดงรายการตัวแปร CSS ทั้งหมดที่ซ่อนไว้อย่างเรียบร้อยในส่วนที่ยุบได้ และจัดกลุ่มตามประเภทค่าด้วย ตัวอย่างเช่น ตัวแปรสีทั้งหมดจะถูกจัดกลุ่มเข้าด้วยกัน

จัดแนวและจัดแนวเส้นแบบยืดหยุ่นและเส้นตารางด้วยสายตา

ไม่นานมานี้ Chrome และ Edge มีตัวแก้ไขการจัดตำแหน่งที่ดีมากสำหรับเลย์เอาต์ flexbox และกริดในแผง Styles ทำให้การทำงานกับคุณสมบัติการจัดตำแหน่งที่ซับซ้อน เช่น justify-content หรือ align-items เป็นภาพที่ชัดเจนขึ้น ดังนั้นจึงเข้าใจได้ง่ายขึ้นมาก

ตอนนี้ Safari มีโปรแกรมแก้ไขภาพที่คล้ายกันสำหรับคุณสมบัติ align-content/items/self และ justify-content/items/self CSS ใช้งานง่ายมาก เพียงคลิกที่ไอคอนถัดจากค่าการจัดตำแหน่งในแผงลักษณะเพื่อเปิดตัวแก้ไข จากนั้น คุณสามารถเลือกประเภทของการจัดตำแหน่งสำหรับเส้นแบบยืดหยุ่นและเส้นตารางของคุณได้

Firefox

ทีมงาน Firefox DevTools ได้เดินทางเพื่อปรับโครงสร้างฐานโค้ด DevTools ใหม่มาระยะหนึ่งแล้ว และถึงแม้ว่าสิ่งนี้จะส่งผลให้มีฟีเจอร์ที่น้อยลงในช่วงเวลานั้น แต่โปรเจ็กต์นั้นก็เสร็จสมบูรณ์แล้ว นั่นหมายความว่าทีมกลับมาพร้อมกับการปรับปรุงที่ยอดเยี่ยมมากมาย

เลือกบริบทการดำเนินการของคุณ

บางครั้ง คุณจำเป็นต้องจัดการกับหลายบริบทในไซต์ของคุณ ไม่ว่าจะมาจากหลาย iframes หรือผู้ปฏิบัติงานเว็บ เนื่องจากเบราว์เซอร์เรียกใช้สิ่งเหล่านี้ในกระบวนการต่างๆ ที่หลากหลาย จึงไม่สามารถเข้าถึงได้ง่ายจาก DevTools เสมอไป

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

รองรับ hwb() ในตัวตรวจสอบ

ฟังก์ชันสี CSS hwb() เป็นส่วนหนึ่งของข้อกำหนดโมดูลสี CSS 4 และเป็นวิธีการที่ง่ายมากสำหรับการระบุสี สี HWB ใช้ 3 ค่า: ค่าแรกคือเฉดสี ซึ่งเป็นจุดเริ่มต้นของสี ค่าที่สองและสามคือปริมาณสีขาวและปริมาณสีดำที่ควรผสมเพื่อสร้างสีสุดท้าย

ขณะนี้ฟังก์ชัน hwb รองรับบน Safari และ Firefox และทีม Firefox DevTools เพิ่งเปิดตัวการสนับสนุนใน Inspector ขณะนี้ ฟังก์ชัน hwb ได้รับการจดจำอย่างถูกต้อง และในฐานะโบนัสเพิ่มเติมที่เพิ่มและลดค่า W และ B ด้วยแป้นพิมพ์จะรักษาไว้ระหว่าง 0% ถึง 100% โดยอัตโนมัติ

เลือกองค์ประกอบที่ไม่สามารถเลือกได้

ที่น่าสนใจคือ การเลือกองค์ประกอบจาก DevTools นั้นขึ้นอยู่กับคุณสมบัติ CSS ของ pointer-events นั่นคือ หากมีการระบุองค์ประกอบไม่ให้รับเหตุการณ์ตัวชี้ใดๆ (ด้วย pointer-events:none ) คุณจะไม่สามารถเลือกองค์ประกอบโดยใช้ตัวเลือกองค์ประกอบใน DevTools เนื่องจากต้องใช้การโต้ตอบกับเมาส์

ใน Chrome และ Edge มีเคล็ดลับพิเศษที่คุณทำได้ซึ่งน้อยคนนักจะรู้ หากคุณ Shift ไว้ขณะใช้ตัวเลือกองค์ประกอบ แม้แต่ pointer-events:none องค์ประกอบก็ยังสามารถเลือกได้

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

ในขณะที่เราอยู่ในหัวข้อของความเท่าเทียมกัน มันก็คุ้มค่าที่จะกล่าวถึงว่า Firefox เพิ่งส่งวิธีการปิดการใช้งานผู้ฟังเหตุการณ์แต่ละรายการด้วย

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

ละเว้นโค้ดบรรทัดเดียวในดีบักเกอร์

หากคุณใช้เวลาในการดีบัก JavaScript ใน DevTools บนฐานโค้ดขนาดใหญ่ที่ใช้เฟรมเวิร์กและไลบรารี คุณอาจคุ้นเคยกับวิธีละเว้นซอร์สไฟล์อยู่แล้ว คุณลักษณะนี้ช่วยให้คุณสามารถทำเครื่องหมายไฟล์ทั้งหมดว่าถูกละเว้น ดังนั้นโปรแกรมดีบั๊กจะหยุดชั่วคราวภายในไฟล์เหล่านั้น

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

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

คุณลักษณะนี้ยังอยู่ในระหว่างการทดลองในขณะที่เขียน คุณจะต้องตั้งค่าบูลีน devtools.debugger.features.blackbox-lines เป็น true ในหน้า about:config ก่อน

เมื่อเปิดใช้งานแล้ว คุณสามารถคลิกขวาที่บรรทัดใดๆ ของซอร์สโค้ดและเลือก Ignore line

แค่นี้แหละ!

ฉันหวังว่าคุณจะสนุกกับการอัปเดตเหล่านี้ และมันจะมีประโยชน์เมื่อทำการพัฒนาเว็บ เช่นเคย หากคุณมีข้อเสนอแนะ ข้อบกพร่องที่ต้องรายงาน หรือแนวคิดเกี่ยวกับคุณลักษณะใหม่ๆ สำหรับ DevTools โปรดรับฟังความคิดเห็นของคุณ! เป็นเรื่องน่าประทับใจที่ได้เห็นว่าความสามารถในการแก้ไขจุดบกพร่องของแพลตฟอร์มเว็บมาไกลแค่ไหน และเราทุกคนสามารถช่วยทำให้มันดียิ่งขึ้นไปอีกได้!