ค่ากำหนด

Sofia Emelianova
Sofia Emelianova

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

หากต้องการตั้งค่ากำหนด ให้เปิด การตั้งค่า การตั้งค่า > ค่ากำหนด แล้วเลื่อนไปที่ส่วนใดหัวข้อหนึ่งที่อธิบายต่อไป

ส่วน "ลักษณะที่ปรากฏ" ในแท็บ "ค่ากำหนด"

หากต้องการดูว่าการตั้งค่าแต่ละรายการทํางานอย่างไร ให้ค้นหาชื่อการตั้งค่าในหน้านี้ แล้ว ขยายคําอธิบาย

การอ้างอิงนี้ระบุการตั้งค่าที่แตกต่างกันด้วยไอคอนต่อไปนี้:

  • ช่องทำเครื่องหมาย ช่องทำเครื่องหมาย
  • รายการแบบเลื่อนลง เมนูแบบเลื่อนลง
  • เลิกใช้งานแล้ว เลิกใช้งานแล้ว

หากต้องการคืนค่าค่ากำหนดเริ่มต้น ให้เลื่อนลงมาจนสุดแท็บค่ากำหนด แล้วคลิกคืนค่าเริ่มต้นและโหลดซ้ำ

ลักษณะที่ปรากฏ

ส่วนนี้จะแสดงตัวเลือกสำหรับปรับแต่งลักษณะที่ปรากฏของเครื่องมือสำหรับนักพัฒนาเว็บ

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

เลย์เอาต์แผง: เปลี่ยนเลย์เอาต์แผงขององค์ประกอบจากแนวนอนเป็นแนวตั้ง
  • แนวนอน
  • แนวตั้ง
  • อัตโนมัติ

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

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

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

แหล่งที่มา

ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งแผงแหล่งที่มา

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

แผงแหล่งที่มาจะแสดงลิงก์ไปยังไฟล์ที่ลดขนาดลงในแถบสถานะ

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

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

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

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

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

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

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

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

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

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

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

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

โค้ดที่มีการจัดรูปแบบในแผงแหล่งที่มา
แผงแหล่งที่มาจะแสดงไฟล์ .scss ในส่วน "เขียนแล้ว" ของแผนผังการนําทาง แผงรูปแบบในแผงองค์ประกอบจะแสดงลิงก์ไปยังแหล่งที่มาของ .scss ข้างกฎ CSS

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

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

ข้อความในคอนโซลที่แจ้งว่าระบบไม่อนุญาตให้โหลดจากเส้นทางไฟล์ระยะไกลเนื่องจากเหตุผลด้านความปลอดภัย
การเยื้องเริ่มต้น: การปิดใช้ตัวเลือกการลบล้างและเปลี่ยนการเยื้องเริ่มต้นจาก 2 เว้นวรรคเป็น 8 ช่อง ตามด้วยแป้น Tab
  • เว้นวรรค 2 ครั้ง
  • เว้นวรรค 4 ครั้ง
  • เว้นวรรค 8 ครั้ง
  • อักขระแท็บ

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

องค์ประกอบ

ส่วนนี้แสดงรายการตัวเลือกที่ปรับแต่งแผงองค์ประกอบ

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

เครือข่าย

ส่วนนี้จะแสดงตัวเลือกสำหรับปรับแต่งแผงเครือข่าย ตัวเลือกส่วนใหญ่จะเหมือนกับในการตั้งค่าของแผง

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

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

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

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

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

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

บันทึกคําขอเครือข่ายที่มีคําขอที่จัดกลุ่มตามเฟรมในบรรทัด

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

คำขอเครือข่ายที่เกี่ยวข้องกับโฆษณาที่แสดงในแผงเครือข่ายซึ่งเปิดใช้ตัวกรองคำขอที่ถูกบล็อก

ประสิทธิภาพ

ส่วนนี้จะแสดงตัวเลือกสำหรับปรับแต่งแผงประสิทธิภาพ

การทำงานของล้อเมาส์แผนภูมิเปลวไฟ: การเปลี่ยนการทํางานของล้อเลื่อนเมาส์จากเลื่อนเป็นซูมสําหรับแผนภูมิ Flame Chart
  • เลื่อน
  • ซูม

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

คอนโซล

ส่วนนี้จะแสดงตัวเลือกสำหรับปรับแต่ง Console ตัวเลือกส่วนใหญ่จะเหมือนกับในการตั้งค่าคอนโซล

ตัวเลือกที่คล้ายกันในคอนโซลและในการตั้งค่า

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

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

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

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

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

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

ส่วนขยาย

ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งการจัดการลิงก์สำหรับส่วนขยาย Chrome DevTools

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

ความต่อเนื่อง

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

Debugger

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

ปิดใช้ JavaScript

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

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

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

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

การดำเนินการแบบไม่พร้อมกันในสแต็กการเรียกใช้

โปรดดูข้อมูลเพิ่มเติมที่หัวข้อดูสแต็กเทรซที่ไม่พร้อมกัน

ทั่วโลก

ส่วนนี้แสดงรายการตัวเลือกที่มีผลกระทบส่วนกลางในเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

ซิงค์

ส่วนนี้ให้คุณตั้งค่าการซิงค์การตั้งค่าระหว่างอุปกรณ์