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

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บมีเครื่องมือแก้ไขข้อบกพร่องสำหรับ CSS Flexbox แล้ว

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

เมื่อองค์ประกอบ HTML ในหน้าเว็บมีการใช้ display: flex หรือ display: inline-flex แล้ว คุณจะเห็นป้าย 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 ในการให้คำแนะนำแบบครบวงจรเกี่ยวกับสัญญาณด้านคุณภาพที่จำเป็นต่อการมอบประสบการณ์การใช้งานที่ยอดเยี่ยมของผู้ใช้บนเว็บ

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

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

  • Largest Contentful Paint (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 (ถูกต้อง) ใน Console

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

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

ปัญหา Chromium: 1178530

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

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

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

แผงโทเค็นความน่าเชื่อถือใหม่

ปัญหา Chromium: 1126824

จำลองฟีเจอร์สื่อขอบเขตของสี CSS

จำลองฟีเจอร์สื่อขอบเขตของสี CSS

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

เปิดเมนูคำสั่ง เรียกใช้คำสั่งแสดงการแสดงผล จากนั้นตั้งค่าเมนูแบบเลื่อนลงจำลององค์ประกอบสื่อ CSS 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

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

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

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

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

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