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

Jecelyn Yeen

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

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

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

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

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

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

DevTools รองรับการแปลงสีระหว่างรูปแบบสี ใช้ไอคอนเปลี่ยนรูปแบบสีเพื่อเข้าถึงป๊อปอัป Conversion หรือเพียงแค่ใช้ 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 รายการย้ายไปที่แผงจุดพักและติดป้ายกำกับด้วยข้อความเพื่อให้เข้าใจได้ง่ายขึ้น ตัวเลือกข้อยกเว้นการหยุดชั่วคราว

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

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

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

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

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

แป้นพิมพ์ลัดของเครื่องบันทึกที่ปรับแต่งได้

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

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

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

คุณยังปรับแต่งแป้นพิมพ์ลัดเหล่านี้ผ่านเมนูการตั้งค่าได้ด้วย ปรับแต่งแป้นพิมพ์ลัดของเครื่องบันทึก

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

ปัญหาใน Chromium: 1339771

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

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

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

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

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

ปัญหาใน Chromium: 1407166

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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