ค่ากำหนด

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

เลย์เอาต์แผง

• แนวนอน
• แนวตั้ง
• อัตโนมัติ

หากต้องการใช้การตั้งค่านี้ ให้โหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ

ภาษา:

• ภาษาของ UI เบราว์เซอร์
• ตัวเลือกภาษาใดภาษาหนึ่ง เช่น ภาษาจีนในตัวอย่างนี้

วิดีโอนี้แสดงวิธีสลับระหว่างแท็บต่างๆ โดยใช้แป้นพิมพ์ลัดที่เกี่ยวข้อง

วิดีโอนี้แสดงวิธีค้นหาข้อความในไฟล์แหล่งที่มาของชิ้นงาน

วิดีโอนี้แสดงวิธีที่แผงแหล่งที่มาเลือกไฟล์ในลําดับชั้นการนําทางเมื่อคุณสลับระหว่างแท็บต่างๆ เมื่อเปิดใช้ตัวเลือกนี้

ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ

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

ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ

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

วิดีโอนี้ไม่แสดงคำแนะนำใดๆ ในตอนแรก จากนั้นเมื่อคุณเปิดใช้ตัวเลือกนี้ เครื่องมือแก้ไขจะแสดงคําแนะนําสําหรับการเติมคําสั่ง

วิดีโอนี้แสดงการพิมพ์วงเล็บเปิดก่อนและหลังเปิดใช้วงเล็บปิดอัตโนมัติ

ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ

วิดีโอนี้แสดงวิธีพับบล็อกโค้ดเมื่อคุณเปิดใช้ตัวเลือกนี้

ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ ตัวเลือกจะทําสิ่งต่อไปนี้

• ทั้งหมดจะแสดงอักขระที่เป็นการเว้นวรรคทั้งหมดเป็นจุด (...) นอกจากนี้ เครื่องมือแก้ไขจะแสดงอักขระ Tab เป็นเส้น (—)
• ต่อท้ายจะไฮไลต์อักขระช่องว่างที่ท้ายบรรทัดเป็นสีแดงอ่อน

แสดงอักขระช่องว่าง:

• ไม่มี
• ทั้งหมด (...)
• ตามหลัง

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

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

วิดีโอนี้แสดงวิธีเลื่อนผ่านท้ายไฟล์เมื่อคุณเปิดใช้ตัวเลือกนี้

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

การเยื้องเริ่มต้น:

• เว้นวรรค 2 ครั้ง
• เว้นวรรค 4 ครั้ง
• เว้นวรรค 8 ครั้ง
• อักขระ Tab

ตัวอย่างนี้แสดงวิธีตั้งค่าการเยื้องเริ่มต้นเป็น 8 เว้นวรรคก่อน แล้วจึงตั้งค่าเป็นอักขระ Tab

วิดีโอนี้แสดงก่อนว่าไม่มีการเลือกโหนด DOM ในต้นไม้ DOM จากนั้นเมื่อคุณเปิดใช้ตัวเลือกนี้ แผงองค์ประกอบจะเลือกโหนดเมื่อวางเมาส์เหนือ

ลิงก์ดูข้อมูลเพิ่มเติมจะนำคุณไปยังข้อมูลอ้างอิง CSS ของ MDN ในพร็อพเพอร์ตี้

เก็บบันทึกเหมือนกับเก็บบันทึกในแผงเครือข่าย บันทึกคําขอในการโหลดหน้าเว็บ

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

บันทึกบันทึกเครือข่ายเหมือนกับ บันทึกบันทึกเครือข่าย ในแผงเครือข่าย เริ่มหรือหยุดบันทึกคำขอในบันทึกเครือข่าย

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

ปิดใช้แคช (ขณะที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่) เหมือนกับปิดใช้แคชในแผงเครือข่าย ปิดใช้แคชของเบราว์เซอร์

ข้อมูลที่ละเอียดอ่อนคือข้อมูลในส่วนหัว Cookie, Set-Cookie และ Authorization

จัดกลุ่มบันทึกเครือข่ายตามเฟรมเหมือนกับจัดกลุ่มตามเฟรมในแผงเครือข่าย ตัวเลือกนี้จะจัดกลุ่มคำขอที่เริ่มต้นโดยเฟรมในบรรทัด

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

การทำงานของล้อเลื่อนเมาส์ในแผนภูมิ Flame Chart

• เลื่อน
• ซูม

ตัวอย่างนี้แสดงทั้งการเลื่อนและการซูมด้วยปุ่มลูกล้อเมาส์ในแผนภูมิเปลวไฟในแผงประสิทธิภาพ

วิดีโอนี้แสดงวิธีซ่อนข้อความเครือข่ายด้วยตัวเลือกนี้ทั้งใน การตั้งค่าและในการตั้งค่าคอนโซล

วิดีโอนี้แสดงวิธีเปิดใช้ตัวเลือกนี้ทั้งใน การตั้งค่าและในคอนโซล > การตั้งค่า แล้วเลือกบริบทในคอนโซล

วิดีโอนี้แสดงวิธีเปิดใช้ตัวเลือกนี้ทั้งใน การตั้งค่าและคอนโซล > การตั้งค่า และบันทึกข้อความ XHR finished loading ลงในคอนโซล

คุณจะเห็นตัวเลือกเดียวกันนี้ในคอนโซล > การตั้งค่า

วิดีโอนี้แสดงสิ่งที่จะเกิดขึ้นเมื่อคุณกด Enter ก่อนและหลังเปิดใช้ตัวเลือกนี้

คุณจะเห็นตัวเลือกเดียวกันนี้ในคอนโซล > การตั้งค่า

แสดงข้อผิดพลาด CORS ในคอนโซล ทําให้คอนโซลแสดงข้อผิดพลาด CORS ที่บันทึกไว้

คุณจะเห็นตัวเลือกเดียวกันนี้ในคอนโซล > การตั้งค่า

คุณจะเห็นตัวเลือกเดียวกันนี้ในคอนโซล > การตั้งค่า

วิดีโอนี้แสดงตัวอย่างเอาต์พุตต่างๆ

กล่าวคือ การตั้งค่า navigator.userActivation.isActive เป็น true เมื่อประเมิน คุณจะเห็นตัวเลือกเดียวกันนี้ในคอนโซล > การตั้งค่า

วิดีโอนี้แสดงผลการประเมินของ navigator.userActivation.isActive ก่อนและหลังเปิดใช้ตัวเลือกนี้

คุณจะเห็นตัวเลือกเดียวกันนี้ในคอนโซล > การตั้งค่า

ดูข้อมูลเพิ่มเติมได้ที่การลบล้างในเครื่อง

ปิดใช้ JavaScript ช่วยให้คุณเห็นว่าหน้าเว็บมีลักษณะและทํางานอย่างไรเมื่อปิดใช้ JavaScript

โหลดหน้าเว็บซ้ำเพื่อดูว่าหน้าเว็บใช้ JavaScript ขณะโหลดหรือไม่ และอย่างไร

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

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

ดูข้อมูลเพิ่มเติมได้ที่ดูสแต็กเทรซแบบแอซิงค์

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

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

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

หากต้องการใช้การตั้งค่านี้ ให้เปิดใช้การซิงค์ของ Chrome ก่อน โปรดดูข้อมูลเพิ่มเติมที่หัวข้อการตั้งค่าการซิงค์