คู่มือนี้มีจุดมุ่งหมายเพื่อช่วยผู้ใช้ที่พึ่งพาเทคโนโลยีความช่วยเหลือพิเศษเป็นหลัก เช่น โปรแกรมอ่านหน้าจอ ให้เข้าถึงและใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือสำหรับนักพัฒนาเว็บที่สร้างขึ้นในเบราว์เซอร์ Google Chrome ดูข้อมูลอ้างอิงเกี่ยวกับการช่วยเหลือพิเศษหากคุณกำลังมองหาฟีเจอร์ของเครื่องมือสำหรับนักพัฒนาเว็บ ที่เกี่ยวข้องกับการปรับปรุงการช่วยเหลือพิเศษของหน้าเว็บ
การช่วยเหลือพิเศษของเครื่องมือสำหรับนักพัฒนาเว็บยังอยู่ระหว่างการพัฒนา แผงและแท็บบางรายการทำงานร่วมกับเทคโนโลยีความช่วยเหลือได้ดีกว่ารายการอื่นๆ คู่มือนี้จะแนะนำแผงที่เข้าถึงได้มากที่สุดและไฮไลต์ปัญหาเฉพาะที่คุณอาจพบระหว่างทาง
ภาพรวม
ก่อนเริ่มต้น คุณควรมีโมเดลในใจเกี่ยวกับโครงสร้าง UI ของ DevTools เครื่องมือสำหรับนักพัฒนาเว็บแบ่งออกเป็นชุดแผงที่จัดระเบียบเป็น ARIA tablist เช่น
- แผงองค์ประกอบช่วยให้คุณดูและเปลี่ยนโหนด DOM หรือ CSS ได้
- แผงคอนโซลช่วยให้คุณอ่านบันทึก JavaScript และแก้ไขออบเจ็กต์แบบเรียลไทม์ได้
ภายในพื้นที่เนื้อหาของแต่ละแผงจะมีเครื่องมือต่างๆ มากมาย ซึ่งมักเรียกว่าแท็บหรือแผงในเอกสารประกอบ เช่น แผงองค์ประกอบมีแท็บเพิ่มเติม เพื่อตรวจสอบเครื่องมือฟังเหตุการณ์ ต้นไม้การช่วยเหลือพิเศษ และอื่นๆ อีกมากมาย ความแตกต่างระหว่างแท็บ กับบานหน้าต่างนั้นค่อนข้างเป็นไปตามอำเภอใจ เหตุผลเดียวที่คุณจะเห็นคำใดคำหนึ่งคือเพื่อรักษาความสอดคล้องกับเอกสารประกอบ DevTools อย่างเป็นทางการที่เหลือ
แป้นพิมพ์ลัด
ข้อมูลอ้างอิงแป้นพิมพ์ลัดของเครื่องมือสำหรับนักพัฒนาเว็บเป็นชีตสรุปที่มีประโยชน์ อย่าลืมบุ๊กมาร์กหน้านี้และ กลับมาดูอีกครั้งขณะที่คุณสำรวจแผงต่างๆ
เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
โปรดอ่านหัวข้อเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อเริ่มต้นใช้งาน คุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บได้หลายวิธี ไม่ว่าจะผ่านแป้นพิมพ์ลัดหรือรายการเมนู
ไปยังแผงต่างๆ
ไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์
- เมื่อเปิด DevTools แล้ว ให้กด Control+] หรือ Command+] (Mac) เพื่อโฟกัสที่แผงถัดไป
- กด Control+[ หรือ Command+[ (Mac) เพื่อโฟกัส แผงก่อนหน้า
- นอกจากนี้ คุณยังใช้ Shift+Tab เพื่อย้ายโฟกัสไปยัง
tablistของแผง และใช้ปุ่มลูกศรเพื่อเปลี่ยนแผงได้ด้วย แม้ว่าการใช้แป้นพิมพ์ลัดที่กล่าวถึงก่อนหน้านี้อาจเร็วกว่าก็ตาม
ปัญหาที่ทราบ
- แผงบางแผง เช่น แผงคอนโซลและประสิทธิภาพ อาจย้ายโฟกัสไปยังพื้นที่เนื้อหาทันทีที่เปิดใช้งาน ซึ่งอาจทำให้การไปยังส่วนต่างๆ ด้วยปุ่มลูกศรเป็นเรื่องยาก
- ระบบจะประกาศชื่อของแผงที่เลือก แต่จะประกาศหลังจากที่อ่านเนื้อหาที่โฟกัสในแผงแล้วเท่านั้น ซึ่งอาจทำให้พลาดได้ง่าย
ไปยังส่วนต่างๆ โดยใช้เมนูคำสั่ง
หากต้องการโฟกัสที่แผงใดแผงหนึ่ง ให้ใช้เมนูคำสั่ง
- เมื่อเปิด DevTools แล้ว ให้กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง เมนูคำสั่งคือช่องคำสั่งแบบเลื่อนลงที่มีการเติมข้อความอัตโนมัติสำหรับการค้นหาแบบคร่าวๆ
- พิมพ์ชื่อแผงที่ต้องการเปิด แล้วใช้แป้นพิมพ์ลูกศรลงเพื่อ ไปยังตัวเลือกที่ถูกต้อง
- กด Enter เพื่อเรียกใช้คำสั่ง
เช่น หากต้องการเปิดแผงองค์ประกอบ ให้ทำดังนี้
- เปิดเมนูคำสั่ง
- พิมพ์ E แล้วตามด้วย L เลือกตัวเลือกแผง > แสดงองค์ประกอบ
- กด Enter เพื่อเรียกใช้คำสั่งที่เปิดแผง
การเปิดแผงด้วยวิธีนี้จะเปลี่ยนโฟกัสไปยังเนื้อหาของแผงนั้นๆ ในกรณีของแผงองค์ประกอบ โฟกัสจะย้ายไปที่แผนผัง DOM
แผงองค์ประกอบ
ตรวจสอบองค์ประกอบในหน้า
- ไปยังองค์ประกอบที่ต้องการตรวจสอบโดยใช้เคอร์เซอร์ของโปรแกรมอ่านหน้าจอ
- จำลองการคลิกขวาของเมาส์ในองค์ประกอบเพื่อเปิดเมนูตามบริบท
- เลือกตัวเลือกตรวจสอบ ซึ่งจะเปิดแผงองค์ประกอบและโฟกัสองค์ประกอบ ในแผนผัง DOM
แผนผัง DOM จะแสดงเป็น ARIA tree ดูตัวอย่างได้ที่ไปยังแผนผัง DOM ด้วย
แป้นพิมพ์
คัดลอกโค้ดสำหรับองค์ประกอบในแผนผัง DOM
- เมื่อโฟกัสที่โหนดในแผนผัง DOM ให้เปิดเมนูตามบริบทของคลิกขวา
- ขยายตัวเลือกคัดลอก
- เลือกคัดลอก outerHTML
ปัญหาที่ทราบ
- คัดลอก outerHTML มักจะไม่เลือกโหนดปัจจุบัน แต่จะเลือกโหนดระดับบนแทน อย่างไรก็ตาม เนื้อหาขององค์ประกอบควรยังคงอยู่ใน outerHTML ที่คัดลอก
แก้ไขแอตทริบิวต์ขององค์ประกอบในแผนผัง DOM
- เมื่อโฟกัสอยู่ที่โหนดในDOM Tree ให้กด Enter เพื่อให้แก้ไขได้
- กด Tab เพื่อย้ายไปมาระหว่างค่าแอตทริบิวต์ เมื่อได้ยินคำว่า "space" แสดงว่าคุณอยู่ในช่องป้อนข้อความที่ว่างเปล่าและสามารถพิมพ์ค่าแอตทริบิวต์ใหม่ได้
- กด Control+Enter หรือ Command+Enter (Mac) เพื่อยอมรับ การเปลี่ยนแปลงและฟังเนื้อหาทั้งหมดขององค์ประกอบ
ปัญหาที่ทราบ
- เมื่อพิมพ์ในช่องป้อนข้อความ คุณจะไม่ได้รับการตอบกลับ หากพิมพ์ผิดและใช้แป้นลูกศร เพื่อสำรวจข้อความที่ป้อน คุณจะไม่ได้รับความคิดเห็นเช่นกัน วิธีที่ง่ายที่สุดในการตรวจสอบงานคือการยอมรับ การเปลี่ยนแปลง จากนั้นฟังการประกาศทั้งองค์ประกอบ
แก้ไข HTML ขององค์ประกอบในแผนผัง DOM
- เมื่อโฟกัสอยู่ที่โหนดในDOM Tree ให้กด Enter เพื่อให้แก้ไขได้
- กด Tab เพื่อย้ายไปมาระหว่างค่าแอตทริบิวต์ เมื่อได้ยินชื่อองค์ประกอบ เช่น "h2" แสดงว่าคุณอยู่ในช่องป้อนข้อความและอาจเปลี่ยนประเภทขององค์ประกอบได้
- กด Control+Enter หรือ Command+Enter (Mac) เพื่อยอมรับ การเปลี่ยนแปลง
เช่น การพิมพ์ h3 แล้วกด Control+Enter หรือ
Command+Enter (Mac) จะเปลี่ยนแท็กเริ่มต้นและแท็กสิ้นสุดขององค์ประกอบเป็น h3
แท็บแผงองค์ประกอบ
แผงองค์ประกอบมีแท็บเพิ่มเติมสำหรับตรวจสอบสิ่งต่างๆ เช่น CSS ที่ใช้กับองค์ประกอบ หรือตำแหน่งขององค์ประกอบในโครงสร้างการช่วยเหลือพิเศษ
- เมื่อโฟกัสอยู่ที่โหนดในแผนผัง DOM ให้กด Tab จนกว่าจะได้ยินว่ามีการเลือกแผงรูปแบบ
- ใช้ลูกศรขวาเพื่อสำรวจแท็บอื่นๆ ที่มี
แผนผัง DOM จะเปลี่ยนองค์ประกอบที่มีแอตทริบิวต์ href ให้เป็นลิงก์ที่โฟกัสได้ ดังนั้นคุณอาจต้องกดแท็บมากกว่า 1 ครั้งเพื่อไปที่แผงรูปแบบ
ปัญหาที่ทราบ
แท็บเบรกพอยท์ DOM และพร็อพเพอร์ตี้ไม่สามารถเข้าถึงได้ด้วยแป้นพิมพ์
บานหน้าต่างรูปแบบ
ในบานหน้าต่างรูปแบบ คุณจะเห็นตัวควบคุมสำหรับการกรองรูปแบบ การสลับสถานะขององค์ประกอบ (เช่น
:active และ :focus) การสลับคลาส และการเพิ่มคลาสใหม่ นอกจากนี้ยังมีเครื่องมือตรวจสอบสไตล์ที่มีประสิทธิภาพเพื่อสำรวจและแก้ไขสไตล์ที่ใช้กับองค์ประกอบที่โฟกัสในแผนผัง DOM ในปัจจุบัน
แนวคิดสำคัญที่ควรทำความเข้าใจเกี่ยวกับแผงรูปแบบคือแผงนี้จะแสดงเฉพาะรูปแบบของโหนดที่เลือกอยู่ในแผนผัง DOM เท่านั้น เช่น สมมติว่าคุณตรวจสอบรูปแบบของโหนด <header> เสร็จแล้ว และตอนนี้ต้องการดูรูปแบบของโหนด <footer> โดยคุณต้องเลือกโหนด <footer> ในแผนผัง DOM ก่อน คุณอาจพบว่าการใช้เวิร์กโฟลว์ตรวจสอบเพื่อตรวจสอบโหนดที่อยู่ใกล้กับโหนด footer (เช่น ลิงก์ภายในส่วนท้าย) จะเร็วกว่า ซึ่งจะโฟกัสแผนผัง DOM จากนั้นใช้แป้นพิมพ์เพื่อไปยังโหนดที่แน่นอนที่คุณสนใจ
ไปยังส่วนต่างๆ ของบานหน้าต่างรูปแบบ
เนื่องจากเครื่องมือจัดรูปแบบทั้งหมดเชื่อมต่อกับแผงรูปแบบไม่ทางใดก็ทางหนึ่ง จึงควรทำความเข้าใจเครื่องมือนี้ให้เชี่ยวชาญก่อน
- เมื่อโฟกัสอยู่ที่บานหน้าต่างสไตล์ ให้กด Tab เพื่อย้ายโฟกัสไปที่ด้านในและสำรวจ เนื้อหา
- กด Tab จนกว่าสไตล์แรกจะใช้งานได้ หากคุณใช้โปรแกรมอ่านหน้าจอ ระบบจะประกาศสไตล์ แรกนี้เป็น "element.style {}"
- กดลูกศรลงเพื่อไปยังรายการรูปแบบตามลำดับความเฉพาะเจาะจง โปรแกรมอ่านหน้าจอจะประกาศแต่ละสไตล์โดยเริ่มจากชื่อไฟล์ CSS หมายเลขบรรทัดที่สไตล์ ปรากฏ และชื่อสไตล์เอง เช่น "main.css:233 .card__img {}"
- กด Enter เพื่อตรวจสอบรูปแบบอย่างละเอียด โฟกัสจะเริ่มที่เวอร์ชันที่แก้ไขได้ของ ชื่อสไตล์
- กด Tab เพื่อย้ายไปมาระหว่างเวอร์ชันที่แก้ไขได้ของพร็อพเพอร์ตี้ CSS แต่ละรายการและค่าที่เกี่ยวข้อง ที่ส่วนท้ายของบล็อกรูปแบบแต่ละบล็อกจะมีช่องข้อความที่แก้ไขได้ซึ่งว่างเปล่า ซึ่งคุณอาจใช้เพื่อเพิ่มพร็อพเพอร์ตี้ CSS เพิ่มเติมได้
- คุณกด Tab ต่อไปเพื่อเลื่อนดูรายการรูปแบบ หรือกด Escape เพื่อออกจากโหมดนี้และกลับไปไปยังส่วนต่างๆ ด้วยปุ่มลูกศรได้
โปรดอ่านข้อมูลอ้างอิงแป้นพิมพ์สำหรับแผงรูปแบบเพื่อดูแป้นพิมพ์ลัดเพิ่มเติม
ปัญหาที่ทราบ
- หากใช้ช่องข้อความที่แก้ไขได้ของตัวกรอง คุณจะไปยังส่วนต่างๆ ของรายการ สไตล์ไม่ได้อีก
เปิด/ปิดสถานะองค์ประกอบ
วิธีสลับสถานะขององค์ประกอบ เช่น :active หรือ :focus
- ไปที่แผงรูปแบบ แล้วกด Tab จนกว่าปุ่มสลับสถานะองค์ประกอบ จะได้รับโฟกัส
- กด Enter เพื่อขยายคอลเล็กชันสถานะขององค์ประกอบ สถานะขององค์ประกอบจะแสดงเป็นกลุ่มช่องทําเครื่องหมาย
- กด Tab จนกว่ารัฐแรก
:activeจะมีโฟกัส - กดแป้นเว้นวรรคเพื่อเปิดใช้ หากองค์ประกอบที่เลือกอยู่ใน DOM Tree มีสไตล์
:activeตอนนี้ระบบจะใช้สไตล์ดังกล่าวแล้ว - กด Tab ต่อไปเพื่อสำรวจสถานะทั้งหมดที่ใช้ได้
เพิ่มชั้นเรียนที่กำลังจะจบ
ปุ่มคลาสขององค์ประกอบจะอยู่ข้างปุ่มสลับสถานะองค์ประกอบ ย้ายโฟกัสไปที่ปุ่มโดยกด Tab แล้วกด Enter โฟกัสจะย้ายไปที่ช่องข้อความแก้ไขที่มีป้ายกำกับว่าเพิ่ม ชั้นเรียนใหม่
ปุ่มคลาสขององค์ประกอบใช้เพื่อเพิ่มคลาสที่มีอยู่ลงในองค์ประกอบเป็นหลัก ตัวอย่างเช่น หากสไตล์ชีตมีคลาสตัวช่วยชื่อ .clearfix คุณสามารถกด . ภายใน
ช่องข้อความแก้ไขเพื่อดูรายการคำแนะนำของคลาส และใช้ลูกศรลงเพื่อค้นหา
คำแนะนำ .clearfix หรือจะพิมพ์ชื่อชั้นเรียนด้วยตนเองแล้วกด Enter เพื่อใช้
ก็ได้
เพิ่มกฎสไตล์ใหม่
ปุ่มกฎรูปแบบใหม่จะอยู่ข้างปุ่มคลาสขององค์ประกอบ ย้ายโฟกัสไปที่ปุ่มโดย กด Tab แล้วกด Enter โฟกัสจะย้ายไปที่ช่องข้อความที่แก้ไขได้ภายใน ของเครื่องมือตรวจสอบสไตล์ เนื้อหาข้อความเริ่มต้นของฟิลด์คือชื่อแท็กขององค์ประกอบที่เลือกในแผนผัง DOM คุณพิมพ์ชื่อคลาสที่ต้องการลงในช่องนี้ แล้วกด Tab เพื่อกำหนดพร็อพเพอร์ตี้ CSS ให้กับคลาสดังกล่าวได้
แท็บคำนวณ
เมื่อโฟกัสอยู่ที่แท็บ Computed ให้กด Tab เพื่อย้ายโฟกัสไปที่ด้านในและสำรวจเนื้อหา ภายในแท็บที่คำนวณจะมีตัวควบคุมสำหรับสำรวจคุณสมบัติ CSS ที่นำไปใช้กับองค์ประกอบตามลำดับความเฉพาะเจาะจง
สำรวจสไตล์ที่คำนวณแล้วทั้งหมด
กด Tab จนกว่าจะถึงคอลเล็กชันของรูปแบบที่คำนวณแล้ว โดยจะแสดงเป็น
ARIA tree การขยายช่องรายการจะแสดงตัวเลือก CSS ที่ใช้สไตล์ที่คำนวณแล้ว ระบบจะจัดระเบียบตัวเลือกเหล่านี้ตามความเฉพาะเจาะจง โปรแกรมอ่านหน้าจอจะประกาศค่าที่คำนวณแล้ว ตัวเลือก CSS
ที่ตรงกันในปัจจุบัน ชื่อไฟล์ของชีตสไตล์ที่มีตัวเลือก และหมายเลขบรรทัดของตัวเลือก
ปัญหาที่ทราบ
- หากใช้ช่องข้อความตัวกรอง คุณจะตรวจสอบรูปแบบไม่ได้อีกต่อไป
แท็บ Listener เหตุการณ์
จากภายในแผงองค์ประกอบ คุณสามารถตรวจสอบ Listener เหตุการณ์ที่ใช้กับองค์ประกอบได้โดยใช้ แท็บ Listener เหตุการณ์ เมื่อโฟกัสที่แผงรูปแบบ ให้กดลูกศรขวาเพื่อ ไปที่แท็บตัวแฮนเดิลเหตุการณ์
สำรวจ Listener เหตุการณ์
ระบบจะแสดง Listener เหตุการณ์เป็น ARIA tree คุณใช้ปุ่มลูกศรเพื่อไปยังส่วนต่างๆ ได้ โปรแกรมอ่านหน้าจอจะประกาศชื่อของออบเจ็กต์ DOM ที่แนบ Listener ของเหตุการณ์ รวมถึงชื่อไฟล์ที่กำหนด Listener ของเหตุการณ์และหมายเลขบรรทัด
แผงการช่วยเหลือพิเศษ
เมื่อโฟกัสอยู่ที่แผงการช่วยเหลือพิเศษ ให้กด Tab เพื่อย้ายโฟกัสไปที่ด้านในและ สำรวจเนื้อหา ภายในแผงการช่วยเหลือพิเศษจะมีตัวควบคุมสำหรับการสำรวจ แผนผังการช่วยเหลือพิเศษ แอตทริบิวต์ ARIA ที่ใช้กับองค์ประกอบ และพร็อพเพอร์ตี้การช่วยเหลือพิเศษที่คำนวณแล้ว
แผนผังการช่วยเหลือพิเศษ
Accessibility Tree จะแสดงเป็น ARIA tree โดยที่ treeitem แต่ละรายการจะสอดคล้องกับองค์ประกอบใน DOM แผนผังจะประกาศบทบาทที่คำนวณแล้วสำหรับโหนดที่เลือก องค์ประกอบทั่วไป
เช่น div และ span จะประกาศเป็น "GenericContainer" ในโครงสร้าง ใช้ปุ่มลูกศรเพื่อ
ไปยังส่วนต่างๆ ของโครงสร้างแบบต้นไม้และสำรวจความสัมพันธ์แบบระดับบน-ย่อย
ปัญหาที่ทราบ
- ประเภทของแผนผัง ARIA ที่ใช้โดยแผงการช่วยเหลือพิเศษอาจไม่แสดงอย่างถูกต้องใน Chrome สำหรับโปรแกรมอ่านหน้าจอ macOS เช่น VoiceOver โปรดติดตามปัญหา #868480 ของ Chromium เพื่อรับทราบ ความคืบหน้าเกี่ยวกับปัญหานี้
- ส่วนแอตทริบิวต์ ARIA และพร็อพเพอร์ตี้ที่คำนวณแล้วจะมาร์กอัปเป็นโครงสร้าง ARIA แต่ในขณะนี้ยังไม่มีการจัดการโฟกัส จึงไม่สามารถใช้แป้นพิมพ์ได้
แผงการตรวจสอบ
แผงการตรวจสอบช่วยให้คุณเรียกใช้ชุดการทดสอบกับเว็บไซต์เพื่อตรวจสอบปัญหาที่พบบ่อย ที่เกี่ยวข้องกับประสิทธิภาพ การช่วยเหลือพิเศษ SEO และหมวดหมู่อื่นๆ อีกมากมาย
กำหนดค่าและเรียกใช้การตรวจสอบ
- เมื่อเปิดแผงการตรวจสอบเป็นครั้งแรก โฟกัสจะอยู่ที่ปุ่มเรียกใช้การตรวจสอบที่ ท้ายแบบฟอร์ม โดยค่าเริ่มต้น ระบบจะกำหนดค่าแบบฟอร์มให้เรียกใช้การตรวจสอบสำหรับทุกหมวดหมู่โดยใช้การจำลองอุปกรณ์เคลื่อนที่ ในการเชื่อมต่อ 3G จำลอง
- ใช้ Shift+Tab หรือกลับไปที่โหมดเรียกดูเพื่อเปลี่ยนการตั้งค่าการตรวจสอบ
- เมื่อพร้อมที่จะเรียกใช้การตรวจสอบแล้ว ให้กลับไปที่ปุ่มเรียกใช้การตรวจสอบ แล้วกด Enter
- โฟกัสจะย้ายไปที่หน้าต่างแบบโมดอลที่มีปุ่มยกเลิก ซึ่งช่วยให้คุณออกจากการตรวจสอบได้ คุณ อาจได้ยินเสียงสั้นๆ หลายครั้งขณะที่การตรวจสอบทำงานและรีเฟรชหน้าเว็บหลายครั้ง
ปัญหาที่ทราบ
- ขณะนี้ส่วนต่างๆ ของแบบฟอร์มการกำหนดค่ายังไม่ได้มาร์กอัปด้วยองค์ประกอบ
fieldsetคุณอาจไปยังส่วนต่างๆ ได้ง่ายขึ้นในโหมดสำรวจเพื่อดูว่าตัวควบคุมใดที่เชื่อมโยงกับแต่ละส่วน - ไม่มีการประกาศด้วยเสียงหรือการประกาศในส่วนที่ใช้งานอยู่เมื่อการตรวจสอบเสร็จสิ้น โดยทั่วไปจะใช้เวลาประมาณ 30 วินาที หลังจากนั้นคุณควรจะไปยังผลการค้นหาได้ การใช้โหมดเรียกดู อาจเป็นวิธีที่ง่ายที่สุดในการเข้าถึงผลลัพธ์
ไปยังส่วนต่างๆ ของรายงานการตรวจสอบ
รายงานการตรวจสอบจะจัดระเบียบเป็นส่วนต่างๆ ที่สอดคล้องกับหมวดหมู่การตรวจสอบแต่ละหมวดหมู่
รายงานจะเปิดขึ้นพร้อมกับรายการคะแนนสำหรับแต่ละหมวดหมู่ คะแนนเหล่านี้ยังเป็นลิงก์ที่ใช้
เพื่อข้ามไปยังส่วนที่เกี่ยวข้องได้ด้วย ภายในแต่ละส่วนจะมีองค์ประกอบ details ที่ขยายได้ ซึ่ง
มีข้อมูลที่เกี่ยวข้องกับการตรวจสอบที่ผ่านหรือไม่ผ่าน โดยค่าเริ่มต้น ระบบจะแสดงเฉพาะการตรวจสอบที่ไม่ผ่าน
แต่ละส่วนจะลงท้ายด้วยองค์ประกอบ details สุดท้ายซึ่งมีการตรวจสอบที่ผ่านทั้งหมด
หากต้องการเรียกใช้การตรวจสอบใหม่ ให้ใช้ Shift+Tab เพื่อออกจากรายงาน แล้วมองหาปุ่ม ทำการตรวจสอบ