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

Jecelyn Yeen

การค้นหาคอนเทนเนอร์ CSS ที่แก้ไขได้ในแผงสไตล์

ตอนนี้คุณสามารถดูและแก้ไขการค้นหาคอนเทนเนอร์ CSS ในแผงสไตล์ได้แล้ว

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

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

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

การค้นหาคอนเทนเนอร์ CSS ที่แก้ไขได้ในแผงสไตล์

ปัญหา Chromium: 1146422

ตัวอย่างแพ็กเกจเว็บในแผงเครือข่าย

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

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

ตัวอย่างแพ็กเกจเว็บ

ปัญหา Chromium: 1182537

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

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

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

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

ปัญหา Chromium: 1190735

การจัดการสตริงที่ดีขึ้นในคอนโซล

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

เมนูตามบริบทใหม่ในคอนโซล

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

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

ปัญหา Chromium: 1208389

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

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

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

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

ปัญหา Chromium: 1213393

Lighthouse 8.1

ตอนนี้แผง Lighthouse ใช้งาน Lighthouse 8.1

ประภาคาร

หากเว็บไซต์แสดงแผนที่แหล่งที่มาต่อ Lighthouse ให้มองหาปุ่มดู Treemap เพื่อดูรายละเอียดของ 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 หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ

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

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

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

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