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

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

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

เมื่อองค์ประกอบ 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 Devitas

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

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

ปัญหา Chromium: 1152089

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

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

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

ปัญหา Chromium: 1140516

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

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

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

ปัญหา Chromium: 1147479

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

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

ปัญหา Chromium: 1178530

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

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

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

ปัญหา Chromium: 1126824

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

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

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

ปัญหา Chromium: 1073887

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

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

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

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

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

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

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

ปัญหา Chromium: 1128885

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

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

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

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

ปัญหา Chromium: 1069425, 1077657

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

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

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

ปัญหา Chromium: 1158827

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

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

ปัญหา Chromium: 1161427

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

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

เดิมที Chrome รองรับพร็อพเพอร์ตี้ fn.displayName ที่ไม่เป็นไปตามมาตรฐานเพื่อให้นักพัฒนาซอฟต์แวร์ควบคุมชื่อการแก้ไขข้อบกพร่องสำหรับฟังก์ชันที่แสดงใน error.stack และในสแต็กเทรซของเครื่องมือสำหรับนักพัฒนาเว็บ ในตัวอย่างด้านบน Call 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 เลิกใช้งานแล้ว

ปัญหา Chromium: 1056922

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

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

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

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

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

ปัญหา Chromium: 1155460

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

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

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

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

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

ปัญหา Chromium: 887173

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

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

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

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

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

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

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