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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

หน้านี้จะแสดงวิธีปรับแต่งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

การตั้งค่า

settings Settings > Preferences มีตัวเลือกมากมายสำหรับการปรับแต่ง DevTools

ดูเปิดการตั้งค่าและค่ากําหนด

ธีมมืด

คุณเปิดใช้ธีมมืดได้ในการตั้งค่าหรือเมนูคำสั่ง

1. เปิดเมนูคำสั่ง

2. เริ่มพิมพ์ dark เลือกคําสั่งเปลี่ยนเป็นธีมมืด แล้วกด Enter เพื่อเรียกใช้คำสั่ง

   

3. หรือจะตั้งค่าธีมในการตั้งค่า การตั้งค่า > ค่ากำหนด > ลักษณะที่ปรากฏ > ธีม

ธีมแบบไดนามิก

เครื่องมือสำหรับนักพัฒนาเว็บจะจับคู่ธีมสีของ Chrome โดยอัตโนมัติ

วิธีตั้งค่าธีม

1. เปิดแท็บใหม่ แล้วคลิกแก้ไข ปรับแต่ง Chrome ที่มุมขวาล่าง
2. ในลักษณะที่ปรากฏ ให้เลือกธีมจากวอลเปเปอร์ เปลี่ยนธีม หรือเลือกชุดสี

หากต้องการปิดธีมแบบไดนามิก ให้ล้างการตั้งค่า การตั้งค่า > ค่ากําหนด > ลักษณะที่ปรากฏ > check_box_outline_blank ใช้ชุดสีของ Chrome แล้วโหลด DevTools ซ้ำ

ลิ้นชัก

ลิ้นชักมีฟีเจอร์ที่ซ่อนอยู่มากมาย

กด Escape เพื่อเปิดหรือปิดลิ้นชัก

คลิก more_vert เครื่องมือเพิ่มเติมเพื่อเปิดแท็บอื่นๆ ในลิ้นชัก

เปลี่ยนตำแหน่งเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

• เมนูหลัก: เปิด more_vert ปรับแต่งและควบคุมเครื่องมือสำหรับนักพัฒนาเว็บ แล้วคลิกตัวเลือกต่อไปนี้
  • ad_group เลิกยึดเป็นหน้าต่างแยก
  • dock_to_right Dock to left
  • dock_to_bottom ไปที่ด้านล่าง
  • dock_to_left ย้ายไปทางขวา

• เมนูคำสั่ง

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

หากต้องการสลับคืนค่าตำแหน่งแท่นชาร์จล่าสุดด้วยแป้นพิมพ์ลัด ให้กดดังนี้

• ใน Linux หรือ Windows: Control+Shift+D
• ใน MacOS: Command+Shift+D

เรียงลําดับแผง แท็บ และแผงใหม่

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

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

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

ลำดับแท็บที่กำหนดเองจะยังคงอยู่ตลอดเซสชันของเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

เปลี่ยนภาษาของ UI เครื่องมือสำหรับนักพัฒนาเว็บ

ดูการตั้งค่า การตั้งค่า > ค่ากําหนด > ลักษณะที่ปรากฏ > ภาษา

การตั้งค่าการซิงค์

คุณซิงค์การตั้งค่า DevTools ในอุปกรณ์หลายเครื่องได้

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

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

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

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

อย่างไรก็ตาม ระบบจะไม่ซิงค์การตั้งค่าแท่นชาร์จ เนื่องจากนักพัฒนาแอปมีค่ากำหนดแท่นชาร์จที่แตกต่างกันเมื่อแก้ไขข้อบกพร่องในเว็บไซต์ต่างๆ

ปรับแต่งแป้นพิมพ์ลัด

ดูการตั้งค่า > ทางลัด

เปิดใช้การทดสอบ

ดูการตั้งค่า > การทดสอบ