ไปยังส่วนต่างๆ ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยเทคโนโลยีความช่วยเหลือพิเศษ

ร็อบ ดอดสัน
ร็อบ ดอดสัน

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

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

ภาพรวม

ก่อนเริ่มต้น การมีโมเดลทางความคิดเกี่ยวกับโครงสร้าง UI ของเครื่องมือสำหรับนักพัฒนาเว็บน่าจะช่วยได้ เครื่องมือสำหรับนักพัฒนาเว็บจะแบ่งออกเป็นชุดแผงต่างๆ ซึ่งจัดระเบียบไว้ใน ARIA tablist เช่น

  • แผงองค์ประกอบช่วยให้คุณดูและเปลี่ยนโหนด DOM หรือ CSS ได้
  • แผงคอนโซลช่วยให้คุณอ่านบันทึก JavaScript และออบเจ็กต์การแก้ไขแบบเรียลไทม์ได้

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

แป้นพิมพ์ลัด

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

เปิดเครื่องมือสำหรับนักพัฒนาเว็บ

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

ไปยังแผงต่างๆ

ไปยังส่วนต่างๆ ด้วยแป้นพิมพ์

  • เมื่อเปิด DevTools ให้กด Control+] หรือ Command+] (Mac) เพื่อโฟกัสที่แผงถัดไป
  • กด Control+[ หรือ Command+[ (Mac) เพื่อโฟกัสแผงก่อนหน้า
  • นอกจากนี้คุณยังสามารถใช้ Shift+Tab เพื่อย้ายโฟกัสไปยัง tablist ของแผงและใช้ปุ่มลูกศรเพื่อเปลี่ยนแผง แต่การใช้ทางลัดที่กล่าวถึงก่อนหน้านี้อาจเร็วกว่า

ปัญหาที่ทราบ

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

นำทางด้วยเมนูคำสั่ง

หากต้องการโฟกัสแผงเฉพาะ ให้ใช้เมนูคำสั่ง ดังนี้

  1. เมื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ ให้กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง Command Menu คือช่องตัวเลือกรวมสำหรับเติมข้อความอัตโนมัติในการค้นหา Fuzzy
  2. พิมพ์ชื่อแผงที่ต้องการเปิด แล้วใช้แป้นพิมพ์ลูกศรลงเพื่อไปยังตัวเลือกที่ถูกต้อง
  3. กด Enter เพื่อเรียกใช้คำสั่ง

ตัวอย่างเช่น หากต้องการเปิดแผงองค์ประกอบ ให้ทำดังนี้

  1. เปิดเมนูคำสั่ง
  2. พิมพ์ E ตามด้วย L เลือกตัวเลือก แผง > แสดงองค์ประกอบ ไว้
  3. กด Enter เพื่อเรียกใช้คำสั่งที่เปิดแผง

การเปิดแผงด้วยวิธีนี้จะนำโฟกัสไปยังเนื้อหาของตัวแผงเอง ในกรณีของแผงองค์ประกอบ โฟกัสจะย้ายไปที่แผนผัง DOM

แผงองค์ประกอบ

ตรวจสอบองค์ประกอบในหน้าเว็บ

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

ต้นไม้ DOM จะจัดวางเป็น ARIA tree โปรดดูตัวอย่างในหัวข้อไปยังส่วนต่างๆ DOM Tree ด้วยแป้นพิมพ์

คัดลอกโค้ดขององค์ประกอบในแผนผัง DOM

  1. เมื่อโฟกัสอยู่ที่โหนดในแผนผัง DOM ให้เปิดเมนูตามบริบทคลิกขวา
  2. ขยายตัวเลือกคัดลอก
  3. เลือกคัดลอก outerHTML

ปัญหาที่ทราบ

  • คัดลอก outerHTML มักจะไม่เลือกโหนดปัจจุบัน แต่จะเลือกโหนดหลักแทน แต่เนื้อหาขององค์ประกอบควรจะยังอยู่ใน outerHTML ที่คัดลอกมา

แก้ไขแอตทริบิวต์ขององค์ประกอบในแผนผัง DOM

  • เมื่อโฟกัสอยู่ที่โหนดในแผนผัง DOM ให้กด Enter เพื่อทำให้แก้ไขได้
  • กด Tab เพื่อเลื่อนไปมาระหว่างค่าแอตทริบิวต์ เมื่อได้ยินคำว่า "space" แสดงว่าคุณอยู่ในการป้อนข้อความที่ว่างอยู่ และสามารถพิมพ์ค่าแอตทริบิวต์ใหม่
  • กด Control+Enter หรือ Command+Enter (Mac) เพื่อยอมรับการเปลี่ยนแปลงและฟังเนื้อหาทั้งหมดขององค์ประกอบ

ปัญหาที่ทราบ

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

แก้ไข HTML ขององค์ประกอบในแผนผัง DOM

  • เมื่อโฟกัสอยู่ที่โหนดในแผนผัง DOM ให้กด Enter เพื่อทำให้แก้ไขได้
  • กด Tab เพื่อเลื่อนไปมาระหว่างค่าแอตทริบิวต์ เมื่อได้ยินชื่อองค์ประกอบ เช่น "h2" แสดงว่าคุณอยู่ในอินพุตข้อความและอาจเปลี่ยนประเภทขององค์ประกอบนั้น
  • กด Control+Enter หรือ Command+Enter (Mac) เพื่อยอมรับการเปลี่ยนแปลง

เช่น การพิมพ์ h3 แล้วกด Control+Enter หรือ Command+Enter (Mac) จะเปลี่ยนแท็กเริ่มต้นและแท็กปิดท้ายขององค์ประกอบเป็น h3

แท็บแผงองค์ประกอบ

แผงองค์ประกอบมีแท็บเพิ่มเติมสำหรับตรวจสอบสิ่งต่างๆ เช่น CSS ที่ใช้กับองค์ประกอบหรือตำแหน่งขององค์ประกอบในแผนผังการช่วยเหลือพิเศษ

  • เมื่อโฟกัสอยู่ที่โหนดในแผนผัง DOM ให้กดแท็บจนกว่าจะได้ยินว่ามีการเลือกแผงรูปแบบไว้
  • ใช้ลูกศรขวาเพื่อสำรวจแท็บอื่นๆ ที่มี

ต้นไม้ DOM จะเปลี่ยนองค์ประกอบที่มีแอตทริบิวต์ href เป็นลิงก์ที่โฟกัสได้ ดังนั้นคุณจึงอาจต้องกด Tab มากกว่า 1 ครั้งเพื่อไปยังแผงรูปแบบ

ปัญหาที่ทราบ

เข้าถึงแท็บเบรกพอยท์ DOM และคุณสมบัติด้วยแป้นพิมพ์ไม่ได้

แผงรูปแบบ

ในแผงรูปแบบ คุณจะเห็นการควบคุมรูปแบบการกรอง การสลับสถานะขององค์ประกอบ (เช่น :active และ :focus) การสลับคลาส และการเพิ่มคลาสใหม่ นอกจากนี้ยังมีเครื่องมือตรวจสอบสไตล์ที่มีประสิทธิภาพเพื่อสำรวจและแก้ไขสไตล์ที่ใช้กับองค์ประกอบที่กำลังโฟกัสในแผนผัง DOM

แนวคิดหลักที่ควรทำความเข้าใจเกี่ยวกับแผงรูปแบบคือ จะแสดงเฉพาะสไตล์สำหรับโหนดที่เลือกในปัจจุบันในแผนผัง DOM เช่น สมมติว่าคุณตรวจสอบรูปแบบของโหนด <header> เสร็จแล้ว และตอนนี้ต้องการดูสไตล์ของโหนด <footer> โดยคุณจะต้องเลือกโหนด <footer> ในแผนผัง DOM ก่อน คุณอาจพบว่าการใช้เวิร์กโฟลว์การตรวจสอบเพื่อตรวจสอบโหนดที่อยู่ในบริเวณใกล้เคียงกับโหนด footer จะเร็วกว่า (เช่น ลิงก์ภายในส่วนท้าย) ซึ่งจะโฟกัสแผนผัง DOM แล้วใช้แป้นพิมพ์เพื่อไปยังโหนดที่คุณสนใจ

ไปยังส่วนต่างๆ ของแผงรูปแบบ

เนื่องจากเครื่องมือสไตล์ทั้งหมดเชื่อมต่อในทางหนึ่งหรืออีกทางหนึ่งกลับเข้าสู่แผงรูปแบบ คุณจึงควรเป็นผู้เชี่ยวชาญเครื่องมือนี้ก่อน

  • เมื่อโฟกัสอยู่ที่แผงรูปแบบ ให้กดแท็บเพื่อย้ายโฟกัสเข้าไปด้านในและสำรวจเนื้อหา
  • กด Tab จนกว่ารูปแบบแรกจะใช้งานได้ หากคุณใช้โปรแกรมอ่านหน้าจอ สไตล์แรกนี้จะมีการประกาศเป็น "element.style {}"
  • กดลูกศรลงเพื่อไปยังรายการรูปแบบตามลําดับความเฉพาะเจาะจง โปรแกรมอ่านหน้าจอจะอ่านรูปแบบแต่ละรายการโดยเริ่มจากชื่อไฟล์ CSS, หมายเลขบรรทัดที่รูปแบบปรากฏอยู่ และชื่อสไตล์ ตัวอย่างเช่น "main.css:233 .card__img {}"
  • กด Enter เพื่อตรวจสอบรูปแบบโดยละเอียดยิ่งขึ้น โฟกัสจะเริ่มต้นที่ ชื่อสไตล์เวอร์ชันที่แก้ไขได้
  • กด Tab เพื่อสลับไปมาระหว่างเวอร์ชันที่แก้ไขได้ของพร็อพเพอร์ตี้ CSS แต่ละรายการและค่าที่เกี่ยวข้อง ที่ส่วนท้ายของแต่ละบล็อกสไตล์จะมีช่องข้อความว่างที่แก้ไขได้ ซึ่งคุณอาจใช้เพื่อเพิ่มคุณสมบัติ CSS เพิ่มเติมได้
  • คุณยังสามารถกด Tab เพื่อเลื่อนดูรายการรูปแบบ หรือกด Escape เพื่อออกจากโหมดนี้และกลับไปที่การนำทางโดยใช้แป้นลูกศร

อย่าลืมอ่านข้อมูลอ้างอิงแป้นพิมพ์ในแผงรูปแบบเพื่อดูแป้นพิมพ์ลัดเพิ่มเติม

ปัญหาที่ทราบ
  • หากใช้ช่องข้อความที่แก้ไขได้ของตัวกรอง คุณจะไม่สามารถไปยังรายการรูปแบบได้อีกต่อไป

สลับสถานะองค์ประกอบ

วิธีสลับสถานะขององค์ประกอบ เช่น :active หรือ :focus

  1. ไปที่แผงรูปแบบ แล้วกดแท็บจนกว่าปุ่มสลับสถานะองค์ประกอบจะมีโฟกัส
  2. กด Enter เพื่อขยายคอลเล็กชันสถานะองค์ประกอบ สถานะองค์ประกอบจะแสดงเป็นกลุ่มช่องทำเครื่องหมาย
  3. กด Tab จนกว่าสถานะแรกคือ :active จะมีโฟกัส
  4. กดแป้นเว้นวรรค เพื่อเปิดใช้ หากองค์ประกอบที่เลือกในปัจจุบันในแผนผัง DOM มีรูปแบบ :active ระบบจะใช้องค์ประกอบนั้น
  5. กดแท็บต่อไปเพื่อสำรวจสถานะที่มีทั้งหมด

เพิ่มชั้นเรียนที่กำลังออก

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

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

เพิ่มกฎของรูปแบบใหม่

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

แท็บที่คำนวณแล้ว

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

สำรวจรูปแบบที่คำนวณแล้วทั้งหมด

กด Tab จนกว่าจะถึงคอลเล็กชันของรูปแบบที่คำนวณแล้ว ซึ่งจะแสดงเป็น ARIA tree การขยายช่องรายการจะแสดงตัวเลือก CSS ที่กำลังใช้รูปแบบที่คำนวณแล้ว ตัวเลือกเหล่านี้จะจัดเรียงตามความจำเพาะ โปรแกรมอ่านหน้าจอจะอ่านค่าที่คำนวณซึ่งมีตัวเลือก CSS ที่ตรงกัน ชื่อไฟล์ของสไตล์ชีตที่มีตัวเลือก และหมายเลขบรรทัดสำหรับตัวเลือก

ปัญหาที่ทราบ

  • หากใช้ช่องข้อความตัวกรอง คุณจะไม่สามารถตรวจสอบรูปแบบได้อีก

แท็บ Listener เหตุการณ์

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

สำรวจ Listener เหตุการณ์

Listener เหตุการณ์จะแสดงเป็น ARIA tree หรือใช้ปุ่มลูกศรเพื่อไปยังส่วนต่างๆ โปรแกรมอ่านหน้าจอจะอ่านชื่อของออบเจ็กต์ DOM ที่ Listener เหตุการณ์แนบอยู่ รวมถึงชื่อไฟล์ที่กำหนด Listener เหตุการณ์ไว้และหมายเลขบรรทัด

แผงการช่วยเหลือพิเศษ

เมื่อโฟกัสอยู่ที่แผงการช่วยเหลือพิเศษ ให้กดแท็บเพื่อย้ายโฟกัสไปด้านในและสำรวจเนื้อหา ภายในแผงการช่วยเหลือพิเศษจะมีการควบคุมสำหรับการสำรวจแผนผังการช่วยเหลือพิเศษ, แอตทริบิวต์ ARIA ที่ใช้กับองค์ประกอบ และคุณสมบัติการช่วยเหลือพิเศษที่คำนวณไว้

แผนผังการช่วยเหลือพิเศษ

แผนผังการช่วยเหลือพิเศษจะแสดงเป็น ARIA tree ที่ treeitem แต่ละรายการจะสอดคล้องกับองค์ประกอบใน DOM ต้นไม้จะประกาศบทบาทที่คำนวณสำหรับโหนดที่เลือก องค์ประกอบทั่วไป เช่น div และ span จะประกาศเป็น "GenericContainer" ในแผนผัง ใช้แป้นลูกศรเพื่อข้ามผ่านต้นไม้และสำรวจความสัมพันธ์แบบพ่อแม่และลูก

ปัญหาที่ทราบ

  • ประเภทของทรี ARIA ที่ใช้โดยแผงการช่วยเหลือพิเศษอาจไม่แสดงอย่างถูกต้องใน Chrome สำหรับโปรแกรมอ่านหน้าจอ macOS เช่น VoiceOver สมัครรับปัญหา Chromium #868480 เพื่อให้ทราบความคืบหน้าเกี่ยวกับปัญหานี้
  • ส่วนแอตทริบิวต์ ARIA และคุณสมบัติที่คำนวณจะมีเครื่องหมายกำกับว่าเป็นต้นไม้ ARIA แต่ปัจจุบันไม่มีการจัดการโฟกัส จึงไม่สามารถเปิดใช้งานแป้นพิมพ์ได้

แผงการตรวจสอบ

แผงการตรวจสอบช่วยให้คุณใช้ชุดการทดสอบกับเว็บไซต์เพื่อตรวจสอบปัญหาที่พบได้ทั่วไปเกี่ยวกับประสิทธิภาพ, การช่วยเหลือพิเศษ, SEO และหมวดหมู่อื่นๆ อีกมากมาย

กำหนดค่าและเรียกใช้การตรวจสอบ

  1. เมื่อเปิดแผงการตรวจสอบเป็นครั้งแรก ระบบจะโฟกัสอยู่ที่ปุ่มดำเนินการตรวจสอบที่ท้ายแบบฟอร์ม โดยค่าเริ่มต้น แบบฟอร์มจะถูกกำหนดค่าให้ดำเนินการตรวจสอบสำหรับทุกหมวดหมู่โดยใช้การจำลองอุปกรณ์เคลื่อนที่ในการเชื่อมต่อ 3G ที่จำลอง
  2. ใช้ Shift+Tab หรือย้อนกลับในโหมดเรียกดูเพื่อเปลี่ยนการตั้งค่าการตรวจสอบ
  3. เมื่อพร้อมที่จะดำเนินการตรวจสอบแล้ว ให้กลับไปที่ปุ่มดำเนินการตรวจสอบ แล้วกด Enter
  4. โฟกัสจะย้ายไปในหน้าต่างโมดัลที่มีปุ่มยกเลิกซึ่งจะช่วยให้คุณออกจากการตรวจสอบได้ คุณอาจได้ยิน Earcon หลายชุดขณะที่การตรวจสอบทํางานและรีเฟรชหน้าหลายครั้ง

ปัญหาที่ทราบ

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

ไปยังส่วนต่างๆ ของรายงานการตรวจสอบ

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

หากต้องการดำเนินการตรวจสอบใหม่ ให้ใช้ Shift+Tab เพื่อออกจากรายงานและมองหาปุ่มดำเนินการตรวจสอบ