หน้านี้ได้รับการแปลโดย Cloud Translation API

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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 เบรกพอยท์ที่ปรับปรุงใหม่

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

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

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

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

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

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

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

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

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

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

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

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

ไฮไลต์ไวยากรณ์ที่ดียิ่งขึ้นสำหรับ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ