มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 111)

Jecelyn Yeen

การแก้ไขข้อบกพร่องสี HD ด้วยแผงรูปแบบ

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

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

ต่อไปนี้คือตัวอย่างการกำหนดสี CSS ที่มี color(), lch(), oklab() และ color-mix() ตัวอย่างคําจํากัดความสี CSS

เมื่อใช้ฟังก์ชัน color-mix() คุณจะดูเอาต์พุตสีสุดท้ายได้ในแผงที่คำนวณ ผลลัพธ์การผสมสีในแผงที่คำนวณแล้ว

ตัวเลือกสีรองรับพื้นที่สีใหม่ทั้งหมดที่มีฟีเจอร์มากขึ้น เช่น คลิกตัวอย่างสี color(display-p3 1 0 1) นอกจากนี้ยังมีการเพิ่มเส้นแบ่งขอบเขตเพื่อแยกระหว่าง sRGB และ display-p3 เพื่อให้เข้าใจขอบเขตของสีที่คุณเลือกได้ชัดเจนยิ่งขึ้น เส้นแบ่งขอบเขต

เครื่องมือสำหรับนักพัฒนาเว็บรองรับการแปลงสีในรูปแบบสี ใช้ไอคอนเปลี่ยนรูปแบบสีเพื่อเข้าถึงป๊อปอัป Conversion หรือเพียงใช้ Shift + คลิกตัวอย่างสีในแผงรูปแบบ กำลังแปลงสีในรูปแบบสี

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

นอกจากนี้ คุณสามารถเลือกสีจากหน้าจอโดยใช้แป้นพิมพ์ลัดใหม่ กด "c" เพื่อเปิดใช้งานหลอดดูดสี แล้วกด Escape เพื่อปิดใช้งาน เครื่องมือดูดสีจะสุ่มตัวอย่างเฉพาะสีในพื้นที่สี sRGB เท่านั้น เช่น หากคุณพยายามสุ่มตัวอย่างสี color(display-p3 1 0 1) ซึ่งอยู่นอกพื้นที่สี sRGB เครื่องมือดูดสีจะตัดสีเป็นสีที่ใกล้ที่สุดในพื้นที่ sRGB ซึ่งคือสีม่วงแดง color(display-p3 0.92 0.2 0.97)

เปิดใช้งานหลอดดูดสี

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

ปัญหาเกี่ยวกับ Chromium: 1073895, 1395782 1408777, 1395782, 1392717, 1382409, 1392054

UX เบรกพอยท์ที่ปรับปรุงใหม่

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

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

  • เบรกพอยท์จะจัดกลุ่มตามไฟล์ โดยเรียงลำดับตามหมายเลขบรรทัดหรือคอลัมน์ และยุบได้ จัดกลุ่มเบรกพอยท์ตามไฟล์

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1407586, 1402891, 1402893

ทางลัดโปรแกรมอัดเสียงที่ปรับแต่งได้

ใช้แป้นพิมพ์ลัดเพื่อบันทึกและเล่นการไหลเวียนของผู้ใช้ซ้ำได้เร็วขึ้น

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

หากจำแป้นพิมพ์ลัดไม่ได้ ไม่มีปัญหา ให้คลิกปุ่ม ? เพื่อดูทางลัดทั้งหมดได้ทุกเมื่อ วันที่ แป้นพิมพ์ลัดของโปรแกรมอัดเสียง

นอกจากนี้ยังกำหนดค่าทางลัดเหล่านี้ผ่านเมนูการตั้งค่าได้อีกด้วย ปรับแต่งทางลัดโปรแกรมอัดเสียง

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

ปัญหาเกี่ยวกับ Chromium: 1339771

ไฮไลต์ไวยากรณ์ที่ดียิ่งขึ้นสำหรับ Angular

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

ปัญหาเกี่ยวกับ Chromium: 1385374, 1385678

จัดระเบียบแคชใหม่ในแผงแอปพลิเคชัน

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

ปัญหาเกี่ยวกับ Chromium: 1407166

ไฮไลต์เบ็ดเตล็ด

การแก้ไขที่สำคัญในรุ่นนี้มีดังนี้

  • เครื่องมือสำหรับนักพัฒนาเว็บได้รับการอัปเดตให้เป็นไปตามการตั้งค่าปิดใช้แคชเมื่อโหลดการแมปแหล่งที่มา (1407084)
  • ตอนนี้แผงองค์ประกอบจะโฟกัสที่องค์ประกอบแรกที่ตรงกันในผลการค้นหาโดยอัตโนมัติ (1381853)
  • การแก้ไขต่างๆ เพื่อปรับปรุงความเสถียรของแผนที่ต้นทางและเบรกพอยท์ (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับการประเมินนิพจน์กับสมาชิกชั้นเรียนแบบส่วนตัวเพื่อให้แก้ไขข้อบกพร่องได้ง่ายขึ้น (1381806) กำลังประเมินนิพจน์กับสมาชิกในชั้นเรียนส่วนตัว

ดาวน์โหลดเวอร์ชันตัวอย่าง

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

ติดต่อทีม Chrome DevTools

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

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

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