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

เครื่องมือแก้ไขข้อบกพร่องของ 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 ใหม่ในแผงแอปพลิเคชัน

ตอนนี้ DevTools จะแสดง Trust Token ที่มีอยู่ทั้งหมดในบริบทการท่องเว็บปัจจุบันในแผง Trust Token ใหม่ในแผง Application

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59