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

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

ตอนนี้ DevTools มีเครื่องมือแก้ไขข้อบกพร่องของ CSS Flexbox โดยเฉพาะแล้ว

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

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

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

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

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

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

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

เปิดเมนูคำสั่ง เรียกใช้คำสั่งแสดงการแสดงผล แล้วเลือกช่องทำเครื่องหมาย Core Web Vitals

การวางซ้อนจะแสดงข้อมูลต่อไปนี้

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

ปัญหาใน Chromium: 1152089

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

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

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

ปัญหาใน Chromium: 1140516

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

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

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

ปัญหาใน Chromium: 1147479

จัดรูปแบบสตริงเป็นสตริงลิเทอรัล JavaScript (ที่ถูกต้อง) ในคอนโซล

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

ปัญหาใน Chromium: 1178530

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

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

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

ปัญหาใน Chromium: 1126824

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

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

เปิดเมนูคำสั่ง เรียกใช้คำสั่งแสดงการแสดงผล แล้วตั้งค่าเมนูแบบเลื่อนลงจำลองฟีเจอร์สื่อ CSS color-gamut

ปัญหาใน Chromium: 1073887

เครื่องมือ Progressive Web App ที่ได้รับการปรับปรุง

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

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

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

ปัญหาใน Chromium: 1146450, 1169689, 965802

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

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

ปัญหาใน Chromium: 1128885

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1158827

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

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

ปัญหาใน Chromium: 1161427

เลิกใช้การรองรับ fn.displayName ที่ไม่ใช่มาตรฐาน

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

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

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

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

ปัญหาใน Chromium: 1177685

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

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

ปัญหาใน Chromium: 1056922

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

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

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

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

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

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

มุมมองแผนผังการช่วยเหลือพิเศษแบบเต็มในแผงองค์ประกอบ

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

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

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

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

ปัญหาใน Chromium: 887173

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

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

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

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

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

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

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