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

Jecelyn Yeen

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

คุณจะดูและแก้ไขคำค้นหาคอนเทนเนอร์ CSS ในแผงรูปแบบได้แล้ว

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1146422

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

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

ฟีเจอร์ Web Bundle ยังอยู่ระหว่างการทดสอบ โปรดเปิดใช้การตั้งค่าสถานะ#enable-experimental-web-platform-featuresใน chrome://flags เพื่อทดสอบ

ตัวอย่าง Web Bundle

ปัญหาเกี่ยวกับ Chromium: 1182537

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1190735

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1208389

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

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

URL ของโน้ตใหม่ในแผงไฟล์ Manifest

ปัญหาเกี่ยวกับ Chromium: 1185678

ตัวเลือกการจับคู่ CSS ที่แก้ไขแล้ว

เครื่องมือสำหรับนักพัฒนาเว็บแก้ไขตัวเลือกการจับคู่ CSS แต่ไม่ทำงานในรุ่นล่าสุด

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

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

ตัวเลือกการจับคู่ CSS

ปัญหาเกี่ยวกับ Chromium: 1219153

การตอบสนอง JSON ที่กำลังพิมพ์อยู่ในแผงเครือข่าย

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

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

การตอบสนอง JSON ที่กำลังพิมพ์อยู่ในแผงเครือข่าย

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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