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

Jecelyn Yeen

เครื่องมือแก้ไขข้อบกพร่องของ CSS Flexbox ใหม่

ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บมีเครื่องมือแก้ไขข้อบกพร่องของ Flexbox สำหรับ CSS โดยเฉพาะ

เครื่องมือแก้ไขข้อบกพร่องของ CSS Flexbox

เมื่อองค์ประกอบ HTML ในหน้าเว็บมีการใช้ display: flex หรือ display: inline-flex คุณจะ คุณจะเห็นป้าย flex ด้านข้างในแผงองค์ประกอบ คลิกป้ายเพื่อสลับการแสดงผลของ วางซ้อนแบบยืดหยุ่นบนหน้าเว็บ

ในแผงรูปแบบ คุณสามารถคลิกไอคอนใหม่ถัดจาก display: flex หรือ display: inline-flex เพื่อเปิดเครื่องมือแก้ไข Flexbox ตัวแก้ไข Flexbox มอบวิธีที่รวดเร็วในการแก้ไข คุณสมบัติของ Flexbox ทดลองด้วยตัวคุณเอง

นอกจากนี้ แผงเลย์เอาต์ยังมีส่วน Flexbox ที่แสดงองค์ประกอบ Flexbox ทั้งหมดบน คุณสามารถสลับการวางซ้อนขององค์ประกอบแต่ละรายการได้

ส่วน Flexbox ในแผงเลย์เอาต์

ปัญหาเกี่ยวกับ Chromium: 1166710, 1175699

การวางซ้อน Core Web Vitals ใหม่

แสดงภาพและวัดประสิทธิภาพของหน้าเว็บได้ดีขึ้นด้วยการวางซ้อน Core Web Vitals ใหม่

Core Web Vitals เป็นโครงการริเริ่มของ Google ที่ให้คำแนะนำแบบองค์รวมเกี่ยวกับสัญญาณคุณภาพที่ จำเป็นต่อการมอบประสบการณ์อันยอดเยี่ยมให้แก่ผู้ใช้บนเว็บ

เปิด Command Menu แล้วเรียกใช้คำสั่ง Show Rendering จากนั้นเปิดใช้ Core Web Vitals

การวางซ้อนจะแสดง:

  • การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP): วัดประสิทธิภาพในการโหลด เพื่อมอบผู้ใช้ที่ดี LCP ควรเกิดขึ้นภายใน 2.5 วินาทีนับจากที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก
  • First Input Delay (FID): วัดการโต้ตอบ เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี หน้าเว็บ ควรมี FID น้อยกว่า 100 มิลลิวินาที
  • Cumulative Layout Shift (CLS): วัดความเสถียรของภาพ เพื่อมอบผู้ใช้ที่ดี ประสบการณ์การใช้งาน หน้าเว็บควรมี CLS เป็นน้อยกว่า 0.1

การวางซ้อน Core Web Vitals

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

การอัปเดตแท็บปัญหา

ย้ายจำนวนปัญหาไปยังแถบสถานะของคอนโซลแล้ว

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

จำนวนปัญหาในแถบสถานะของคอนโซล

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

รายงานปัญหากิจกรรมในเว็บที่เชื่อถือได้

ตอนนี้แท็บปัญหาจะรายงานปัญหากิจกรรมในเว็บที่เชื่อถือได้ กระบวนการนี้มีไว้เพื่อช่วยให้นักพัฒนาแอป เข้าใจและแก้ไขปัญหากิจกรรมในเว็บที่เชื่อถือได้ของเว็บไซต์ของตน แอปพลิเคชัน

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

ปัญหาเกี่ยวกับกิจกรรมบนเว็บที่เชื่อถือได้ในแท็บปัญหา

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

จัดรูปแบบสตริงเป็นสัญพจน์ของสตริง JavaScript (ถูกต้อง) ในคอนโซล

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

จัดรูปแบบสตริงเป็นสัญพจน์ของสตริง JavaScript (ถูกต้อง)

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

แผง Trust Token ใหม่ในแผงแอปพลิเคชัน

เครื่องมือสำหรับนักพัฒนาเว็บแสดง Trust Token ที่มีอยู่ทั้งหมดในบริบทการท่องเว็บปัจจุบันในความน่าเชื่อถือใหม่ โทเค็นในแผงแอปพลิเคชัน

Trust Token เป็น API ใหม่ที่จะช่วยต่อสู้กับการประพฤติมิชอบและแยกบ็อตออกจากมนุษย์ที่มีตัวตนจริง โดยไม่ต้องติดตัว เครื่องมือวัด Conversion ดูวิธีเริ่มต้นใช้งาน Trust Token

แผงโทเค็นโทเค็นใหม่

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

จำลองฟีเจอร์สื่อ color-gamut ของ CSS

จำลองฟีเจอร์สื่อ color-gamut ของ CSS

คิวรี่สื่อ color-gamut ให้คุณทดสอบช่วงสีโดยประมาณที่รองรับ ตามเบราว์เซอร์และอุปกรณ์เอาต์พุต ตัวอย่างเช่น ถ้าคิวรี่สื่อ color-gamut: p3 ตรงกัน หมายความว่าอุปกรณ์ของผู้ใช้รองรับพื้นที่สี Display-P3

เปิดเมนูคำสั่ง เรียกใช้คำสั่ง Show Rendering จากนั้นตั้งค่า Emulate CSS เมนูแบบเลื่อนลงของขอบเขตสีฟีเจอร์สื่อ

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

เครื่องมือ Progressive Web App ที่ปรับปรุงใหม่

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บแสดงข้อความเตือนเกี่ยวกับความสามารถในการติดตั้งของ Progressive Web App (PWA) ที่ละเอียดมากขึ้น ในคอนโซล โดยมีลิงก์ไปยังเอกสารประกอบ

คําเตือนความสามารถในการติดตั้ง PWA

ตอนนี้แผงไฟล์ Manifest จะแสดงข้อความเตือนหากคำอธิบายไฟล์ Manifest เกิน 324 อักขระ

คําเตือนการตัดคําอธิบาย PWA

นอกจากนี้ ตอนนี้แผงไฟล์ Manifest จะแสดงข้อความเตือนหากภาพหน้าจอของ PWA ไม่แสดง ตรงกับข้อกำหนด ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ภาพหน้าจอของ PWA และข้อกำหนดของพร็อพเพอร์ตี้ ที่นี่

คำเตือนเกี่ยวกับภาพหน้าจอของ PWA

ปัญหาเกี่ยวกับ Chromium: 1146450, 1169689, 965802

คอลัมน์ Remote Address Space ใหม่ในแผงเครือข่าย

ใช้คอลัมน์ Remote Address Space ใหม่ในแผงเครือข่ายเพื่อดูพื้นที่ของที่อยู่ IP ของเครือข่าย ของทรัพยากรเครือข่ายแต่ละรายการ

"พื้นที่ที่อยู่ระยะไกล" ใหม่ คอลัมน์

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

ปรับปรุงประสิทธิภาพ

ตอนนี้ประสิทธิภาพการโหลดหน้าเว็บที่เปิดเครื่องมือสำหรับนักพัฒนาเว็บได้รับการปรับปรุงแล้ว ในบางกรณีที่ร้ายแรง เราพบว่ามีถึง 10 เท่า เพื่อปรับปรุงประสิทธิภาพ

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

ติดตามบล็อกโพสต์เกี่ยวกับวิศวกรรมอย่างละเอียดซึ่งอธิบายการติดตั้งใช้งานนี้ได้

ปัญหาเกี่ยวกับ Chromium: 1069425, 1077657

แสดงฟีเจอร์ที่อนุญาต/ไม่อนุญาตในมุมมองรายละเอียดเฟรม

ตอนนี้มุมมองรายละเอียดเฟรมจะแสดงรายการฟีเจอร์เบราว์เซอร์ที่อนุญาตและไม่อนุญาตซึ่งควบคุมโดย นโยบายสิทธิ์

นโยบายสิทธิ์ คือ API แพลตฟอร์มเว็บที่ทำให้เว็บไซต์สามารถอนุญาตหรือบล็อกได้ การใช้ฟีเจอร์ของเบราว์เซอร์ในเฟรมของตัวเองหรือใน iframe ที่ฝังไว้

ฟีเจอร์ที่อนุญาต/ไม่อนุญาตตามนโยบายสิทธิ์

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

คอลัมน์ SameParty ใหม่ในแผงคุกกี้

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

คอลัมน์ SameParty

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

การสนับสนุน fn.displayName ที่ไม่เป็นไปตามมาตรฐานที่เลิกใช้งานแล้ว

การรองรับ fn.displayName ที่ไม่เป็นไปตามมาตรฐานเลิกใช้งานแล้ว โปรดใช้ fn.name แทน

ตัวอย่างการใช้ displayName

เดิมที Chrome รองรับพร็อพเพอร์ตี้ fn.displayName ที่ไม่เป็นมาตรฐาน นักพัฒนาซอฟต์แวร์เพื่อควบคุมชื่อการแก้ไขข้อบกพร่องของฟังก์ชันที่แสดงใน error.stack และในสแต็กเครื่องมือสำหรับนักพัฒนาเว็บ การติดตาม ในตัวอย่างข้างต้น สแต็กการโทรจะแสดง noLongerSupport ก่อนหน้านี้

แทนที่ fn.displayName ด้วย fn.name มาตรฐานซึ่งกำหนดค่าได้ (ผ่าน Object.defineProperty) ใน ECMAScript 2015 เพื่อแทนที่พร็อพเพอร์ตี้ fn.displayName ที่ไม่เป็นมาตรฐาน

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

ตัวอย่างการใช้ชื่อ

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

การเลิกใช้งาน Don't show Chrome Data Saver warning ในเมนูการตั้งค่า

การตั้งค่า Don't show Chrome Data Saver warning ถูกนำออกเนื่องจากมีการใช้โปรแกรมประหยัดอินเทอร์เน็ตของ Chrome แล้ว เลิกใช้งานแล้ว

เลิกใช้งาน "ไม่แสดงคำเตือนโปรแกรมประหยัดอินเทอร์เน็ตของ Chrome" การตั้งค่า

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

ฟีเจอร์ทดลอง

การรายงานปัญหาเกี่ยวกับคอนทราสต์ต่ำโดยอัตโนมัติในแท็บปัญหา

เครื่องมือสำหรับนักพัฒนาเว็บเพิ่มการรองรับเวอร์ชันทดลองสำหรับการรายงานปัญหาคอนทราสต์ในแท็บปัญหาโดยอัตโนมัติ

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

เปิดหน้าที่มีปัญหาคอนทราสต์ต่ำ (เช่น การสาธิตนี้) จากนั้นเปิดแท็บปัญหาโดย คลิกปุ่มจำนวนปัญหาในแถบสถานะคอนโซลเพื่อดูปัญหา

การรายงานปัญหาเกี่ยวกับคอนทราสต์ต่ำโดยอัตโนมัติ

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

มุมมองแบบต้นไม้ของการช่วยเหลือพิเศษแบบสมบูรณ์ในแผงองค์ประกอบ

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

แผงการช่วยเหลือพิเศษปัจจุบันจะแสดงโหนดของโหนดอย่างจำกัด โดยแสดงเฉพาะ เชนระดับบนโดยตรงจากโหนดรากไปยังโหนดที่ตรวจสอบ มุมมองโครงสร้างการช่วยเหลือพิเศษใหม่มีเป้าหมาย เพื่อปรับปรุงสิ่งนั้น และทำให้โครงสร้างการช่วยเหลือพิเศษมีการสำรวจ มีประโยชน์ และง่ายขึ้นสำหรับนักพัฒนาซอฟต์แวร์ ในการใช้กัน

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

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

มุมมองแบบต้นไม้ของการช่วยเหลือพิเศษแบบเต็ม

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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