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

Jecelyn Yeen

การค้นหาคอนเทนเนอร์ CSS ที่แก้ไขได้ในแผงรูปแบบ

ตอนนี้คุณดูและแก้ไขการค้นหาคอนเทนเนอร์ CSS ได้ในบานหน้าต่างรูปแบบ

การค้นหาคอนเทนเนอร์เป็นแนวทางที่ไดนามิกมากขึ้นในการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ @containerกฎ @ ทำงานคล้ายกับ Media Query ที่มี @media อย่างไรก็ตาม @container จะค้นหาคอนเทนเนอร์ระดับบนสุดที่ตรงกับเกณฑ์บางอย่างแทนที่จะค้นหาข้อมูลจากวิวพอร์ตและ User Agent

ในแผงองค์ประกอบ ให้คลิกองค์ประกอบ DOM ที่มีกฎ @ @container ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อมูล @container ในแผงรูปแบบ คลิกเพื่อแก้ไขขนาด แผงรูปแบบจะแสดงข้อมูลคอนเทนเนอร์ที่เกี่ยวข้องด้วย วางเมาส์เหนือองค์ประกอบเพื่อไฮไลต์องค์ประกอบคอนเทนเนอร์ในหน้าเว็บและตรวจสอบขนาดคอนเทนเนอร์ คลิกเพื่อเลือกองค์ประกอบคอนเทนเนอร์

ฟีเจอร์การค้นหาคอนเทนเนอร์ยังอยู่ในขั้นทดลอง โปรดเปิด#enable-container-queries Flag ในส่วนchrome://flagsเพื่อทดสอบ

การค้นหาคอนเทนเนอร์ CSS ที่แก้ไขได้ในแผงรูปแบบ

ปัญหาใน Chromium: 1146422

ตัวอย่าง Web Bundle ในแผงเครือข่าย

Web Bundle เป็นรูปแบบไฟล์สำหรับการห่อหุ้มทรัพยากร HTTP อย่างน้อย 1 รายการไว้ในไฟล์เดียว ตอนนี้คุณสามารถดูตัวอย่างเนื้อหาของ Web Bundle ในแผงเครือข่ายได้แล้ว

ปัจจุบันฟีเจอร์ Web Bundle ยังอยู่ในขั้นทดลอง โปรดเปิดใช้ Flag #enable-experimental-web-platform-features ในส่วน chrome://flags เพื่อทดสอบ

ตัวอย่าง Web Bundle

ปัญหาใน Chromium: 1182537

การแก้ไขข้อบกพร่องของ Attribution Reporting API

ตอนนี้ระบบจะรายงานข้อผิดพลาดของ Attribution Reporting API ในแท็บปัญหา

การรายงานผลการระบุแหล่งที่มาคือ API ใหม่ที่จะช่วยคุณวัดเมื่อการกระทําของผู้ใช้ (เช่น การคลิกหรือดูโฆษณา) นําไปสู่ Conversion โดยไม่ต้องใช้ตัวระบุข้ามเว็บไซต์

ข้อผิดพลาดของ Attribution Reporting API ในแท็บปัญหา

ปัญหาใน Chromium: 1190735

การจัดการสตริงใน Console ที่ดียิ่งขึ้น

เมนูตามบริบทใหม่ในคอนโซลช่วยให้คุณคัดลอกสตริงเป็นเนื้อหา สัญพจน์ JavaScript หรือสัญพจน์ JSON ได้

เมนูตามบริบทใหม่ใน Console

ใน Chrome 90 DevTools ได้อัปเดตคอนโซลให้จัดรูปแบบเอาต์พุตสตริงเป็นอักษร JSON ที่ถูกต้องเสมอ เราได้รับความคิดเห็นจากนักพัฒนาแอปว่าการเปลี่ยนแปลงนี้อาจทำให้เกิดความสับสน บางคนรู้สึกว่าการหลีกเลี่ยงมากเกินไปทำให้เอาต์พุตอ่านไม่ได้

ตอนนี้ Console จะจัดรูปแบบเอาต์พุตสตริงเป็นอักษร JavaScript ที่ถูกต้อง และยังมีตัวเลือกสตริงการคัดลอก 3 รายการให้คุณด้วย ตัวเลือกคัดลอกเป็นสัญพจน์ JavaScript จะกำหนดอักขระพิเศษที่เหมาะสมเป็นอักขระหลีกและห่อสตริงด้วยเครื่องหมายคำพูดเดี่ยว เครื่องหมายคำพูดคู่ หรือเครื่องหมายแบ็กทิก ทั้งนี้ขึ้นอยู่กับเนื้อหาของสตริง ส่วนคัดลอกเนื้อหาสตริงจะคัดลอกเนื้อหาสตริงดิบ (รวมถึงบรรทัดใหม่และอักขระพิเศษอื่นๆ) ไปยังคลิปบอร์ดตามตัวอักษร สุดท้าย Copy as JSON literal จะจัดรูปแบบสตริงเป็นสัญพจน์ JSON ที่ถูกต้องและคัดลอกไปยังคลิปบอร์ด

ปัญหาใน Chromium: 1208389

การแก้ไขข้อบกพร่องของ CORS ที่ปรับปรุงแล้ว

ตอนนี้ข้อผิดพลาด TypeErrors ที่เกี่ยวข้องกับ CORS ในคอนโซลจะลิงก์กับแผงเครือข่ายและแท็บปัญหาแล้ว

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

ไอคอนข้างข้อความแสดงข้อผิดพลาดที่เกี่ยวข้องกับ CORS

ปัญหาใน Chromium: 1213393

Lighthouse 8.1

ตอนนี้แผง Lighthouse กำลังเรียกใช้ Lighthouse 8.1

ประภาคาร

หากเว็บไซต์แสดงแผนที่แหล่งที่มาต่อ Lighthouse ให้มองหาปุ่มดูแผนที่ต้นไม้เพื่อดูรายละเอียดของ JavaScript ที่จัดส่ง ซึ่งกรองตามขนาดและความครอบคลุมเมื่อโหลดได้

รายงานยังมีตัวกรองเมตริกใหม่ด้วย (ดูตัวกรองแสดงการตรวจสอบที่เกี่ยวข้องกับในภาพหน้าจอ) เลือกเมตริกเพื่อมุ่งเน้นโอกาสและการวินิจฉัยที่เกี่ยวข้องกับการปรับปรุงเมตริกนั้นๆ มากที่สุด

หมวดหมู่ประสิทธิภาพมีการเปลี่ยนแปลงการให้คะแนนหลายอย่างเพื่อให้สอดคล้องกับเครื่องมือประสิทธิภาพอื่นๆ และเพื่อแสดงสถานะของเว็บได้ดียิ่งขึ้น

ดูรายการการเปลี่ยนแปลงทั้งหมดได้ในบันทึกประจำรุ่น

ปัญหาใน Chromium: 772558

แสดง URL ของโน้ตใหม่ในบานหน้าต่าง Manifest

ตอนนี้แผง Manifest จะแสดงURL ของโน้ตใหม่

ปัจจุบันใน ChromeOS (CrOS) แอป Chrome และแอป Android ที่ประกาศความสามารถ "new-note" อาจได้รับเลือกเป็นแอปจดบันทึกในการตั้งค่าสไตลัส (จะปรากฏขึ้นหากใช้อุปกรณ์ CrOS กับสไตลัส) เมื่อเลือกเป็นแอปจดบันทึก คุณจะเปิดแอปจากปุ่ม "สร้างโน้ต" ในจานสีของสไตลัสได้ การเพิ่มฟิลด์ new-note-url ในไฟล์ Manifest ของแอปพลิเคชันเป็นส่วนหนึ่งของความพยายามในการเพิ่มฟังก์ชันการทำงานที่เทียบเท่ากับเว็บแอป

URL โน้ตใหม่ในบานหน้าต่าง Manifest

ปัญหาใน Chromium: 1185678

แก้ไขตัวเลือกที่ตรงกันของ CSS

DevTools แก้ไขตัวเลือกที่ตรงกันของ CSS แล้ว ซึ่งใช้ไม่ได้ในการเผยแพร่ครั้งล่าสุด

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

  • ส่วนที่ไม่ตรงกันจะแสดงเป็นสีเทาอ่อน
  • ส่วนตัวเลือกที่ตรงกันจะแสดงเป็นสีดำ

ตัวเลือกที่ตรงกันของ CSS

ปัญหาใน Chromium: 1219153

การจัดรูปแบบการตอบสนองของ JSON ในแผงเครือข่าย

ตอนนี้คุณสามารถจัดรูปแบบการตอบกลับ JSON ในแผงเครือข่ายได้แล้ว

เปิดการตอบกลับ JSON ในแผงเครือข่าย แล้วคลิกไอคอน {} เพื่อจัดรูปแบบให้สวยงาม

การจัดรูปแบบการตอบสนองของ JSON ในแผงเครือข่าย

ข้อบกพร่องของ Chromium: 998674

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

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

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

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

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

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