กำหนดลักษณะและการทำงานของเครื่องมือสำหรับนักพัฒนาเว็บและแผงโดยใช้ การตั้งค่า > ค่ากำหนด แท็บนี้จะแสดงทั้งตัวเลือกการปรับแต่งทั่วไปและตัวเลือกเฉพาะสำหรับแผง
หากต้องการตั้งค่ากำหนด ให้เปิด การตั้งค่า > ค่ากำหนด และเลื่อนไปยังส่วนต่างๆ ที่อธิบายไว้ถัดไป
หากต้องการดูการทำงานของการตั้งค่าแต่ละรายการ ให้ค้นหาชื่อการตั้งค่าในหน้านี้ แล้วขยายคำอธิบายด้วย add_circle
การอ้างอิงนี้แสดงการตั้งค่าที่แตกต่างกันด้วยไอคอนต่อไปนี้
- ช่องทำเครื่องหมาย
ช่อง
- รายการแบบเลื่อนลง
เลิกใช้งานแล้ว
หากต้องการคืนค่าค่ากำหนดเริ่มต้น ให้เลื่อนลงไปที่จุดสิ้นสุดของแท็บค่ากำหนด แล้วคลิกคืนค่าเริ่มต้นและโหลดซ้ำ
รูปลักษณ์
ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งลักษณะที่ปรากฏของเครื่องมือสำหรับนักพัฒนาเว็บได้
ธีม
จะตั้งค่าธีมสีสำหรับ UI ของเครื่องมือสำหรับนักพัฒนาเว็บ
เลย์เอาต์แผง
จัดเรียงแผงต่างๆ
ส่งผลต่อองค์ประกอบ > รูปแบบและแท็บที่คล้ายกัน และแผงแหล่งที่มา > แผงโปรแกรมแก้ไขข้อบกพร่อง ตัวเลือกอัตโนมัติทำให้เลย์เอาต์ขึ้นอยู่กับความกว้างของเครื่องมือสำหรับนักพัฒนาเว็บ
ภาษา
ตั้งค่าภาษาสำหรับ UI ของเครื่องมือสำหรับนักพัฒนาเว็บ
หากต้องการใช้การตั้งค่านี้ ให้โหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ
เปิดใช้แป้นพิมพ์ลัด Ctrl/Cmd + 0-9 เพื่อเปลี่ยนแผง ซึ่งจะช่วยให้คุณเปิดแผงโดยใช้แป้นพิมพ์ได้
วิดีโอนี้จะแสดงวิธีสลับระหว่างแท็บโดยใช้แป้นพิมพ์ลัดที่สอดคล้องกัน
ปิดใช้การวางซ้อนสถานะหยุดชั่วคราวจะซ่อนการวางซ้อนหยุดชั่วคราวในโปรแกรมแก้ไขข้อบกพร่อง
ในวิวพอร์ตเมื่อหยุดการเรียกใช้โค้ดชั่วคราว
แสดง "มีอะไรใหม่" หลังการอัปเดตแต่ละครั้งจะเปิดแท็บลิ้นชักมีอะไรใหม่โดยอัตโนมัติหลังการอัปเดต Chrome แต่ละครั้ง
![แท็บลิ้นชัก "มีอะไรใหม่"](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-s-drawer-tab-284de1eb4dca3.png?authuser=1&hl=th)
แหล่งที่มา
ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งแผงแหล่งที่มา
การค้นหาในสคริปต์เนื้อหาแบบไม่ระบุชื่อและสคริปต์ช่วยให้คุณค้นหาไฟล์ JavaScript ที่โหลดทั้งหมด รวมถึงไฟล์ที่อยู่ในส่วนขยาย Chrome โดยใช้แท็บค้นหา
วิดีโอนี้จะแสดงวิธีค้นหาข้อความในไฟล์แหล่งที่มาของส่วนขยาย
แสดงไฟล์ในแถบด้านข้างโดยอัตโนมัติจะเลือกไฟล์ในแผงแหล่งที่มา > หน้า เมื่อคุณสลับระหว่างแท็บในตัวแก้ไข
วิดีโอนี้จะแสดงวิธีการเมื่อเปิดใช้ตัวเลือกนี้ แผงแหล่งที่มาจะเลือกไฟล์ในแผนผังการนำทางเมื่อคุณสลับแท็บไปมา
เปิดใช้การแมปแหล่งที่มา JavaScript ช่วยให้เครื่องมือสำหรับนักพัฒนาเว็บค้นหาแหล่งที่มาของไฟล์ JavaScript ที่สร้างขึ้นหรือถูกลดขนาดได้
![แผงแหล่งที่มาจะแสดงลิงก์ไปยังไฟล์ที่ลดขนาดในแถบสถานะ](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-18a5986aebe76.png?authuser=1&hl=th)
เปิดใช้แท็บจะย้ายโฟกัสทำให้คีย์
แท็บย้ายโฟกัสภายในเครื่องมือสำหรับนักพัฒนาเว็บแทนการแทรกอักขระ Tab ในตัวแก้ไข
ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ
วิดีโอนี้แสดงอักขระ Tab ที่แทรกด้วยแป้น Tab เป็นครั้งแรก จากนั้นเมื่อคุณเปิดใช้ตัวเลือกนี้และโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ แป้น Tab จะย้ายโฟกัส
ตรวจหาการเยื้องตั้งค่าการเยื้องไปยังการเยื้องในไฟล์ต้นฉบับที่เปิดในเครื่องมือแก้ไข
ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ
ในตอนแรกวิดีโอนี้แสดงการเยื้องเริ่มต้นของช่องว่าง 8 ช่อง จากนั้นเมื่อคุณเปิดใช้งานตัวเลือกนี้ ตัวเลือกนี้จะลบล้างการเยื้องเริ่มต้นของไฟล์ต้นฉบับ
การเติมข้อความอัตโนมัติจะเปิดใช้คำแนะนำที่เป็นประโยชน์ในโปรแกรมตัดต่อ
วิดีโอนี้ไม่แสดงคำแนะนำใดๆ ก่อน จากนั้นเมื่อเปิดใช้ตัวเลือกนี้ เอดิเตอร์จะแสดงคำแนะนำในการใช้งานคำสั่งที่สมบูรณ์
การปิดวงเล็บอัตโนมัติจะเพิ่มวงเล็บปิดหรือแท็กโดยอัตโนมัติเมื่อคุณพิมพ์วงเล็บเปิด
วิดีโอนี้แสดงการพิมพ์วงเล็บเปิดก่อนและหลังเปิดใช้การปิดวงเล็บเหลี่ยมอัตโนมัติ
การจับคู่วงเล็บจะขีดเส้นใต้และไฮไลต์เป็นสีแดงอ่อนในตัวแก้ไขวงเล็บเหลี่ยม วงเล็บปีกกา หรือวงเล็บที่ไม่มีคู่
![วงเล็บปีกกาที่ไม่มีคู่ที่ขีดเส้นใต้ด้วยสีแดง](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/a-curly-bracket-without-39b53417db5f3.png?authuser=1&hl=th)
การพับโค้ดช่วยให้คุณพับและแสดงโค้ดบล็อกในวงเล็บปีกกาในตัวแก้ไขได้
ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ
วิดีโอนี้แสดงวิธีพับบล็อกโค้ดเมื่อคุณเปิดใช้ตัวเลือกนี้
แสดงอักขระช่องว่าง
แสดงอักขระช่องว่างในตัวแก้ไข
ต้องโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ โดยมีตัวเลือกดังนี้
- ทั้งหมดแสดงอักขระช่องว่างทั้งหมดเป็นจุด (
...
) นอกจากนี้ Editor ยังแสดงอักขระ Tab เป็นบรรทัด (—
) อีกด้วย - ส่วนท้ายจะไฮไลต์อักขระช่องว่างที่ท้ายบรรทัดด้วยสีแดงอ่อน
แสดงค่าตัวแปรในบรรทัดขณะแก้ไขข้อบกพร่องจะแสดงค่าตัวแปรข้างคำสั่งการกำหนดขณะที่การดำเนินการหยุดชั่วคราว
![โปรแกรมแก้ไขข้อบกพร่องหยุดชั่วคราวในระหว่างการดำเนินการของฟังก์ชันจะแสดงค่าตัวแปรข้างคำสั่งการกำหนด](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-debugger-paused-durin-7df9450bef37b.png?authuser=1&hl=th)
แผงซอร์สโฟกัสเมื่อทริกเกอร์เบรกพอยท์จะเปิดแหล่งที่มา > ตัวแก้ไขที่บรรทัดที่มีเบรกพอยท์ที่หยุดการดำเนินการชั่วคราว
วิดีโอนี้แสดงแผงแหล่งที่มาหลุดโฟกัสก่อนเมื่อหยุดชั่วคราวที่เบรกพอยท์ จากนั้นเมื่อเปิดใช้ตัวเลือกนี้ เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดตัวแก้ไขในแผงแหล่งที่มาและแสดงบรรทัดโค้ดที่มีเบรกพอยท์
แหล่งข้อมูลที่ลดขนาดเป็นงานพิมพ์โดยอัตโนมัติทำให้แหล่งข้อมูลเหล่านั้นอ่านได้
เมื่อจัดรูปแบบแล้ว Editor อาจแสดงบรรทัดโค้ดยาว 1 บรรทัดในหลายบรรทัด นำหน้าด้วย -
เพื่อระบุว่าเป็นความต่อเนื่องของบรรทัด
![โค้ดที่พิมพ์แล้วในแผงแหล่งที่มา](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/pretty-print.png?authuser=1&hl=th)
เปิดใช้การแมปแหล่งที่มา CSS ช่วยให้เครื่องมือสำหรับนักพัฒนาเว็บค้นหาแหล่งที่มาของไฟล์ CSS ที่สร้างขึ้น เช่น .scss
และแสดงให้คุณเห็น
![แผงแหล่งที่มาจะแสดงไฟล์ .scss ในส่วน "เขียนแล้ว" ของโครงสร้างการนำทาง แผงรูปแบบในแผงองค์ประกอบจะแสดงลิงก์ไปยังแหล่งที่มาของ .scss ถัดจากกฎ CSS](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-e421484c90f24.png?authuser=1&hl=th)
อนุญาตให้เลื่อนผ่านส่วนท้ายของไฟล์ช่วยให้คุณเลื่อนได้ไกลกว่าบรรทัดสุดท้ายในตัวแก้ไข
วิดีโอนี้จะแสดงวิธีเลื่อนผ่านส่วนท้ายไฟล์ที่เปิดใช้ตัวเลือกนี้
อนุญาตให้เครื่องมือสำหรับนักพัฒนาเว็บโหลดทรัพยากร เช่น การแมปแหล่งที่มา จากเส้นทางไฟล์ระยะไกล ปิดใช้อยู่โดยค่าเริ่มต้นเพื่อความปลอดภัย
หากปิดใช้ไว้ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกข้อความของคอนโซลที่คล้ายกับข้อความต่อไปนี้
![ข้อความในคอนโซลที่แจ้งว่าไม่อนุญาตให้โหลดจากเส้นทางไฟล์ระยะไกลเนื่องจากเหตุผลด้านความปลอดภัย](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/a-message-the-console-in-052f2c13b3dc.png?authuser=1&hl=th)
การเยื้องเริ่มต้น
ช่วยให้คุณสามารถเลือกจำนวนช่องว่างที่คีย์ Tab จะแทรกในตัวแก้ไขได้
ตัวอย่างนี้แสดงวิธีตั้งค่าการเยื้องเริ่มต้นเป็น 8 เว้นวรรคก่อนแล้วตามด้วยอักขระ Tab
องค์ประกอบ
ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งแผงองค์ประกอบ
แสดง User Agent Sshadow DOM แสดงโหนด DOM เงาในแผนผัง DOM
![แผงองค์ประกอบจะแสดงโหนด DOM ของเงา](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-088126d24e216.png?authuser=1&hl=th)
การตัดคำจะแบ่งบรรทัดยาวๆ ในแผนผัง DOM และตัดคำไปยังบรรทัดถัดไป
![แผงองค์ประกอบจะแบ่งบรรทัดยาวๆ ทีละคำและตัดคำลงบนบรรทัดถัดไป](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-elements-panel-breaks-8f610414be113.png?authuser=1&hl=th)
แสดงความคิดเห็น HTML แสดงความคิดเห็น HTML ในแผนผัง DOM
![แผงองค์ประกอบจะแสดงความคิดเห็น HTML](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-69db5e051bcd3.png?authuser=1&hl=th)
แสดงโหนด DOM เมื่อวางเมาส์เหนือจะเลือกโหนดที่เกี่ยวข้องในแผนผัง DOM เมื่อคุณวางเมาส์เหนือองค์ประกอบในวิวพอร์ตในโหมดตรวจสอบ
วิดีโอนี้ปรากฏก่อนว่าไม่ได้เลือกโหนด DOM ในแผนผัง DOM จากนั้นเมื่อคุณเปิดใช้ตัวเลือกนี้ แผงองค์ประกอบจะเลือกโหนดเมื่อวางเมาส์เหนือ
แสดงเคล็ดลับเครื่องมือการตรวจสอบโดยละเอียดจะแสดงเคล็ดลับเครื่องมือในวิวพอร์ตของ
โหมดตรวจสอบเมื่อคุณวางเมาส์เหนือองค์ประกอบ
![เคล็ดลับเครื่องมือโดยละเอียดที่แสดงในโหมดตรวจสอบ](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-detailed-tooltip-show-28d3aa44e33a2.png?authuser=1&hl=th)
แสดงไม้บรรทัดเมื่อวางเมาส์เหนือจะแสดงไม้บรรทัดในวิวพอร์ตเมื่อคุณวางเมาส์เหนือองค์ประกอบในแผนผัง DOM
![ไม้บรรทัดแสดงในวิวพอร์ต](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/rulers-shown-viewport-ae8f481c23e7e.png?authuser=1&hl=th)
แสดงเคล็ดลับเครื่องมือเอกสารประกอบ CSS แสดงเคล็ดลับเครื่องมือพร้อมคำอธิบายสั้นๆ เมื่อคุณวางเมาส์เหนือพร็อพเพอร์ตี้ในแผงรูปแบบ
ลิงก์ดูข้อมูลเพิ่มเติมจะแสดงข้อมูลอ้างอิง MDN CSS ในพร็อพเพอร์ตี้
![เคล็ดลับเครื่องมือพร้อมเอกสารประกอบเกี่ยวกับพร็อพเพอร์ตี้ CSS](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-tooltip-documentatio-7c33fb7ae9d4e.png?authuser=1&hl=th)
เครือข่าย
ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งแผงเครือข่าย ตัวเลือกส่วนใหญ่จะเหมือนกับในการตั้งค่าของแผง
Preserve log จะเหมือนกับ Preserve log ในแผงเครือข่าย บันทึกคำขอในการโหลดหน้าเว็บ
วิดีโอนี้แสดงบันทึกคำขอที่ได้รับการรีเฟรชเมื่อโหลดหน้าเว็บซ้ำก่อน จากนั้นจะยังคงอยู่เมื่อเปิดใช้ตัวเลือกนี้
บันทึกข้อมูลบันทึกเครือข่ายจะเหมือนกับ
บันทึกบันทึกเครือข่ายในแผงเครือข่าย เริ่มหรือหยุดการบันทึกคำขอในบันทึกเครือข่าย
![ปุ่ม "บันทึกเครือข่าย" ในแผงเครือข่าย](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-record-network-log-bu-ae1f7d1e69e3.png?authuser=1&hl=th)
เปิดใช้การบล็อกคำขอเครือข่ายจะบล็อกคำขอที่ตรงกับรูปแบบในลิ้นชักการบล็อกคำขอเครือข่าย
วิดีโอนี้แสดงเป็นอันดับแรกว่าคำขอไม่ได้ถูกบล็อก จากนั้นหลังจากที่คุณเปิดใช้ตัวเลือกนี้ รูปแบบในลิ้นชักการบล็อกคำขอเครือข่ายจะบล็อกการบล็อกดังกล่าว
ปิดใช้แคช (ขณะที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่) จะเหมือนกับส่วนปิดใช้แคชในแผงเครือข่าย ปิดใช้งานแคชของเบราว์เซอร์
![ช่องทำเครื่องหมาย "ปิดใช้งานแคช"](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-disable-cache-checkbo-f09250026a0aa.png?authuser=1&hl=th)
ประเภททรัพยากรของรหัสสีจะไฮไลต์คำขอเป็นสีต่างๆ โดยขึ้นอยู่กับประเภทในคอลัมน์ Waterfall ของบันทึกเครือข่าย
![คอลัมน์ Waterfall บนแท็บ "เครือข่าย" โดยไม่มีและไม่มีการเข้ารหัสสี](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-waterfall-column-the-c3f0d296db17e.png?authuser=1&hl=th)
จัดกลุ่มบันทึกเครือข่ายตามเฟรมเหมือนกับจัดกลุ่มตามเฟรมในแผงเครือข่าย ตัวเลือกนี้จะจัดกลุ่มคําขอที่เริ่มต้นโดยเฟรมแบบในหน้า
![บันทึกคำขอเครือข่ายที่มีคำขอที่จัดกลุ่มตามเฟรมแบบอินไลน์](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-network-request-log-8ecfc9e3f8259.png?authuser=1&hl=th)
บังคับใช้การบล็อกโฆษณาในเว็บไซต์นี้จะบล็อกโฆษณาที่ตรวจพบในหน้าเว็บขณะที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่
![คำขอเครือข่ายที่เกี่ยวข้องกับโฆษณาซึ่งแสดงในแผงเครือข่ายที่เปิดใช้ตัวกรองคำขอที่ถูกบล็อก](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/an-ad-related-network-req-3e1c284d89cd5.png?authuser=1&hl=th)
การแสดง
ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งแผงประสิทธิภาพ
การทำงานของลูกกลิ้งเมาส์ Flamechart
จะกำหนดการทำงานการเลื่อนหรือซูมให้กับลูกกลิ้งเมาส์เมื่อคุณไปยังส่วนต่างๆ ของ Flame Chart
ตัวอย่างนี้แสดงการทำงานของล้อเลื่อนของเมาส์ทั้งแบบเลื่อนและซูมบนแผนภูมิเปลวไฟในแผงประสิทธิภาพ
คอนโซล
ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งคอนโซล ตัวเลือกส่วนใหญ่จะเหมือนกับในการตั้งค่าคอนโซล
ซ่อนข้อความของเครือข่ายจะซ่อนข้อความของเครือข่ายในคอนโซล
วิดีโอนี้แสดงวิธีซ่อนข้อความเครือข่ายด้วยตัวเลือกนี้ ทั้งในการตั้งค่าและการตั้งค่าคอนโซลของ
บริบทที่เลือกเท่านั้นทำให้คอนโซลแสดงข้อความสำหรับบริบทที่เลือกเท่านั้น ซึ่งได้แก่ ด้านบน, iframe, ผู้ปฏิบัติงาน หรือส่วนขยาย
วิดีโอนี้แสดงวิธีเปิดใช้ตัวเลือกนี้ทั้งในการตั้งค่าของ และในคอนโซล > การตั้งค่า และเลือกบริบทในคอนโซล
Log XMLHttpRequests สร้าง XHR สำหรับบันทึก Console และดึงข้อมูลคำขอ
วิดีโอนี้แสดงวิธีเปิดใช้ตัวเลือกนี้ทั้งใน การตั้งค่า และคอนโซล > การตั้งค่า รวมถึงบันทึกข้อความ
XHR finished loading
ไปยังคอนโซล
แสดงการประทับเวลาทำให้คอนโซลแสดงการประทับเวลาข้างข้อความ
![ข้อความที่มีการประทับเวลาแสดงอยู่ในคอนโซล](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/messages-timestamps-list-040be725ea68b.png?authuser=1&hl=th)
การเติมข้อความอัตโนมัติจากประวัติทำให้คำสั่งของ Console แนะนำไว้ใช้เมื่อพิมพ์ก่อนหน้านี้
ตัวเลือกเดียวกันนี้อยู่ในคอนโซล > การตั้งค่า
![เมนูแบบเลื่อนลงที่เติมข้อความอัตโนมัติพร้อมตัวเลือกคําสั่งจากประวัติ Console](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/autocomplete-drop-down-a-6e0a4dc95d8d5.png?authuser=1&hl=th)
ยอมรับคำแนะนำที่เติมข้อความอัตโนมัติด้วย Enter จะทำให้คอนโซลยอมรับคำแนะนำที่เลือกจากเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติเมื่อคุณกด Enter
วิดีโอนี้แสดงสิ่งที่เกิดขึ้นเมื่อคุณกด Enter ก่อนและหลังเปิดใช้ตัวเลือกนี้
จัดกลุ่มข้อความที่คล้ายกันในคอนโซลจะทำให้คอนโซลจัดกลุ่มข้อความที่คล้ายกันไว้ด้วยกัน
ตัวเลือกเดียวกันนี้อยู่ในคอนโซล > การตั้งค่า
![รวมข้อความที่คล้ายกันในคอนโซลไว้ด้วยกัน](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/similar-messages-the-con-2026bc985883e.png?authuser=1&hl=th)
การแสดงข้อผิดพลาด CORS ในคอนโซลจะทำให้คอนโซลแสดงข้อผิดพลาด CORS ที่บันทึกไว้
ตัวเลือกเดียวกันนี้อยู่ในคอนโซล > การตั้งค่า
![คอนโซลแสดงข้อผิดพลาด CORS](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/console-shows-cors-errors-57f9bea2680a4.png?authuser=1&hl=th)
การประเมินอย่างตั้งใจทำให้คอนโซลแสดงตัวอย่างเอาต์พุตขณะที่คุณพิมพ์คำสั่ง
ตัวเลือกเดียวกันนี้อยู่ในคอนโซล > การตั้งค่า
วิดีโอนี้แสดงตัวอย่างเอาต์พุตต่างๆ
ถือว่าการประเมินโค้ดเป็นการดำเนินการของผู้ใช้จะเปลี่ยนคำสั่งใดก็ตามที่คุณเรียกใช้ในคอนโซลเป็นการโต้ตอบของผู้ใช้
กล่าวคือ จะตั้งค่า navigator.userActivation.isActive
เป็น true
เมื่อมีการประเมิน ตัวเลือกเดียวกันนี้อยู่ในคอนโซล > การตั้งค่า
วิดีโอนี้แสดงผลการประเมินของ navigator.userActivation.isActive
ก่อนและหลังเปิดใช้ตัวเลือกนี้
ขยายข้อความconsole.trace()โดยอัตโนมัติ ทำให้คอนโซลแสดงข้อความ console.trace()
ที่ขยายเมื่อบันทึก
![ข้อความconsole.trace() ที่ขยายในคอนโซล](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/an-expanded-consoletrace-a083a714be536.png?authuser=1&hl=th)
เก็บบันทึกเมื่อไปยังส่วนต่างๆ ทำให้คอนโซลบันทึกข้อความ Navigated to
ทุกครั้งที่ไปยังส่วนต่างๆ และบันทึกข้อมูลไว้ในทุกหน้า
ตัวเลือกเดียวกันนี้อยู่ในคอนโซล > การตั้งค่า
![คอนโซลจะแสดงข้อความ "ไปที่ไปยัง" และบันทึกข้อมูลไว้ในหน้าต่างๆ](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-console-shows-naviga-f4bc36001187f.png?authuser=1&hl=th)
ส่วนขยาย
ส่วนนี้จะแสดงตัวเลือกที่ปรับแต่งการจัดการลิงก์สำหรับส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
การจัดการลิงก์
จะกำหนดตัวเลือกในการเปิดไฟล์ด้วยเมื่อคุณคลิกลิงก์ไปยังไฟล์ต้นฉบับ เช่น ในแผงองค์ประกอบ > รูปแบบ
ความต่อเนื่อง
ส่วนนี้จะแสดงตัวเลือกที่ควบคุมวิธีที่เครื่องมือสำหรับนักพัฒนาเว็บบันทึกการเปลี่ยนแปลงที่คุณทำ
เปิดใช้การลบล้างในเครื่องทำให้เครื่องมือสำหรับนักพัฒนาเว็บมีการเปลี่ยนแปลงที่คุณทำกับแหล่งที่มาในการโหลดหน้าเว็บไว้ต่อไป
โปรดดูข้อมูลเพิ่มเติมที่หัวข้อการลบล้างในเครื่อง
Debugger
ส่วนนี้จะแสดงตัวเลือกที่ควบคุมลักษณะการทำงานของโปรแกรมแก้ไขข้อบกพร่อง
ปิดใช้ JavaScript ช่วยให้คุณเห็นลักษณะและการทํางานของหน้าเว็บเมื่อปิดใช้ JavaScript
โหลดหน้าเว็บซ้ำเพื่อดูว่าหน้าเว็บใช้ JavaScript ระหว่างการโหลดหรือไม่และอย่างไร
เมื่อปิดใช้ JavaScript อยู่ Chrome จะแสดงไอคอน ที่เกี่ยวข้องในแถบที่อยู่ และเครื่องมือสําหรับนักพัฒนาเว็บจะแสดงไอคอนคําเตือน
ข้างแหล่งที่มา
![ไอคอนในแถบที่อยู่และไอคอนคำเตือนข้างแหล่งที่มาในเครื่องมือสำหรับนักพัฒนาเว็บ](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/an-icon-the-address-bar-92ceba2ae707c.png?authuser=1&hl=th)
ปิดใช้สแต็กเทรซที่ไม่พร้อมกันจะซ่อน "เรื่องราวทั้งหมด" ของการดำเนินการอะซิงโครนัสในการเรียกใช้สแต็ก
โดยค่าเริ่มต้น โปรแกรมแก้ไขข้อบกพร่องจะพยายามติดตามการดำเนินการที่ไม่พร้อมกัน หากเฟรมเวิร์กที่คุณใช้อยู่รองรับการติดตามดังกล่าว
![การดำเนินการอะซิงโครนัสในสแต็กการเรียกใช้](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-async-operation-the-7d1209cb7afdd.png?authuser=1&hl=th)
ดูข้อมูลเพิ่มเติมได้ที่ดูสแต็กเทรซที่ไม่พร้อมกัน
ประเทศทั่วโลก
ส่วนนี้จะแสดงตัวเลือกที่มีผลกระทบทั่วโลกในเครื่องมือสำหรับนักพัฒนาเว็บ
การเปิดเครื่องมือสำหรับนักพัฒนาเว็บโดยอัตโนมัติสำหรับป๊อปอัปจะเปิดเครื่องมือสำหรับนักพัฒนาเว็บเมื่อคุณคลิกลิงก์ที่เปิดแท็บใหม่ กล่าวคือ ลิงก์ทั้งหมดที่มี target=_blank
วิดีโอนี้จะแสดงวิธีคลิกลิงก์และเปิดแท็บใหม่ *โดยไม่มี* เครื่องมือสำหรับนักพัฒนาเว็บก่อน จากนั้น เมื่อเปิดใช้ตัวเลือกนี้ แท็บใหม่จะเปิดขึ้น *มี* เครื่องมือสำหรับนักพัฒนาเว็บ
ค้นหาขณะพิมพ์ทำให้เครื่องมือสำหรับนักพัฒนาเว็บ "ข้าม" ไปยังผลการค้นหาแรกขณะที่คุณพิมพ์คำค้นหา หากปิดใช้ เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังผลการค้นหาเฉพาะเมื่อคุณกด Enter เท่านั้น
วิดีโอนี้แสดงวิธีที่เครื่องมือสำหรับนักพัฒนาเว็บ "กระโดด" ขณะที่คุณพิมพ์คำค้นหา จากนั้นเมื่อเปิดใช้ตัวเลือกนี้ เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังผลลัพธ์แรกเมื่อกด Enter
ซิงค์
ส่วนนี้จะช่วยให้คุณตั้งค่าการซิงค์การตั้งค่าระหว่างอุปกรณ์ได้
เปิดใช้การซิงค์การตั้งค่าช่วยให้คุณซิงค์การตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บในอุปกรณ์หลายเครื่องได้
หากต้องการใช้การตั้งค่านี้ ให้เปิดใช้การซิงค์ของ Chrome ก่อน โปรดดูข้อมูลเพิ่มเติมที่หัวข้อการตั้งค่าการซิงค์