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

Jecelyn Yeen

การแก้ไขข้อบกพร่องสี HD ด้วยแผงสไตล์

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

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

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

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

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

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

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

นอกจากนี้ คุณยังเลือกสีจากหน้าจอได้ด้วยแป้นพิมพ์ลัดใหม่ กด "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

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

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

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

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

ปัญหา Chromium: 1407166

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools