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

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

Jecelyn Yeen

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

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

ตอนนี้แผงรูปแบบรองรับพื้นที่สีใหม่ 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

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

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

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

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

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

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

ปัญหา Chromium: 1339771

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

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

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

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

ตอนนี้คุณจะดูแผง Cache Storage ได้ในส่วนพื้นที่เก็บข้อมูลของแผง Application และย้ายแผง Back/Forward Cache ไปที่ส่วน Background Services แคชในแผงแอปพลิเคชัน

ปัญหา Chromium: 1407166

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

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

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

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

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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