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

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

เมื่อแปลง สิ่งสำคัญคือต้องทราบว่ามีการตัดวิดีโอให้พอดีกับพื้นที่หรือไม่ 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 ซึ่งจะช่วยให้คุณอ่านโค้ดและจดจำโครงสร้างได้ง่ายขึ้น การไฮไลต์ไวยากรณ์สำหรับเทมเพลต HTML ของ Angular

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

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

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

ปัญหา Chromium: 1407166

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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