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

Rob Dodson

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

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

ภาพรวม

ก่อนเริ่มต้น คุณควรมีภาพโครงสร้าง UI ของ DevTools อยู่ในใจ เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์แบ่งออกเป็นชุดแผงที่จัดระเบียบเป็น ARIA tablist เช่น

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

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

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

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

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

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

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

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

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

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

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

ไปยังส่วนต่างๆ ด้วยเมนูคำสั่ง

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

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

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

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

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

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

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

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

แผนผัง DOM มีการจัดวางเป็น ARIA tree ดูตัวอย่างได้ที่ไปยังส่วนต่างๆ ของแผนผัง DOM ด้วยแป้นพิมพ์

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

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

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

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

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

• เมื่อโฟกัสอยู่ที่โหนดในต้นไม้ DOM ให้กด Enter เพื่อแก้ไขโหนดได้
• กด Tab เพื่อย้ายไปมาระหว่างค่าแอตทริบิวต์ เมื่อได้ยิน "เว้นวรรค" แสดงว่าคุณอยู่ในการป้อนข้อความว่างและสามารถพิมพ์ค่าแอตทริบิวต์ใหม่ได้
• กด 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 ให้กด 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

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

เพิ่มชั้นเรียนที่กำลังจะสิ้นสุด

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

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

เพิ่มกฎสไตล์ใหม่

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

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

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

สำรวจสไตล์ที่คำนวณแล้วทั้งหมด

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

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

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

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

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

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

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

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

เมื่อโฟกัสอยู่ที่แผงการช่วยเหลือพิเศษ ให้กด Tab เพื่อย้ายโฟกัสเข้าไปด้านในและสำรวจเนื้อหา ในแผงการช่วยเหลือพิเศษจะมีตัวควบคุมสําหรับสํารวจลําดับชั้นการช่วยเหลือพิเศษ แอตทริบิวต์ 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. โฟกัสจะย้ายไปยังหน้าต่างโมดัลที่มีปุ่มยกเลิก ซึ่งช่วยให้คุณออกจากการตรวจสอบได้ คุณอาจได้ยินชุดเสียงประกอบขณะที่การตรวจสอบทำงานและรีเฟรชหน้าเว็บหลายครั้ง

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

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

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

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

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