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

Jecelyn Yeen

ตัวแก้ไขตารางกริด CSS

ฟีเจอร์ที่เป็นที่ต้องการอย่างมาก ตอนนี้คุณดูตัวอย่างและเขียน CSS Grid ด้วยตัวแก้ไข CSS Grid ใหม่ได้แล้ว

ตัวแก้ไขตารางกริด CSS

เมื่อองค์ประกอบ HTML ในหน้าเว็บมีการใช้ display: grid หรือ display: inline-grid คุณจะเห็นไอคอนปรากฏขึ้นข้างองค์ประกอบนั้นในแผงรูปแบบ คลิกไอคอนเพื่อสลับตัวแก้ไขตารางกริด CSS ดูตัวอย่างการเปลี่ยนแปลงที่เป็นไปได้ด้วยไอคอนบนหน้าจอ (เช่น justify-content: space-around) และเขียนลักษณะของตารางกริดได้ในคลิกเดียว

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

รองรับการประกาศซ้ำ const รายการในคอนโซล

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

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

โปรดดูตัวอย่างด้านล่าง รองรับการประกาศซ้ำ const ในสคริปต์ REPL ที่แยกกัน (อ้างถึงตัวแปร a) โปรดทราบว่าการออกแบบไม่รองรับสถานการณ์ต่อไปนี้

  • const ไม่อนุญาตให้มีการประกาศสคริปต์หน้าเว็บซ้ำในสคริปต์ REPL
  • ไม่อนุญาตให้ประกาศ const ซ้ำภายในสคริปต์ REPL เดียวกัน (ดูตัวแปร b)

การประกาศ Const ซ้ำ

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

ผู้ดูลำดับแหล่งที่มา

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

ผู้ดูลำดับแหล่งที่มา

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

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

ทางลัดใหม่เพื่อดูรายละเอียดเฟรม

ดูรายละเอียด iframe โดยคลิกขวาที่องค์ประกอบ iframe ในแผงองค์ประกอบ แล้วเลือกแสดงรายละเอียดเฟรม

แสดงรายละเอียดเฟรม

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

มุมมองรายละเอียดของเฟรม

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

การสนับสนุนการแก้ไขข้อบกพร่อง CORS ขั้นสูง

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

ปัญหา CORS ในแท็บปัญหา

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

การอัปเดตแผงเครือข่าย

เปลี่ยนชื่อป้ายกำกับ XHR เป็น Fetch/XHR

ป้ายกำกับ XHR ได้เปลี่ยนชื่อเป็น Fetch/XHR การเปลี่ยนแปลงนี้ระบุให้ชัดเจนขึ้นว่าตัวกรองนี้มีทั้งคำขอเครือข่าย XMLHttpRequest และ Fetch API

ป้ายกำกับการดึงข้อมูล/XHR

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

กรองประเภททรัพยากร Wasm ในแผงเครือข่าย

คุณสามารถคลิกปุ่ม Wasm ใหม่เพื่อกรองคำขอเครือข่าย Wasm ได้แล้ว

กรองตาม Wasm

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

คำแนะนำไคลเอ็นต์ของ User Agent สำหรับอุปกรณ์ในแท็บเงื่อนไขเครือข่าย

ตอนนี้คําแนะนําไคลเอ็นต์ของ User Agent มีผลกับอุปกรณ์ในช่อง User Agent ในแท็บเงื่อนไขของเครือข่าย

User-Agent Client Hints คือการขยายตัวใหม่ของ Client Hints API ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์เข้าถึงข้อมูลเกี่ยวกับเบราว์เซอร์ของผู้ใช้ได้ด้วยวิธีการรักษาความเป็นส่วนตัวและหลักสรีรศาสตร์

คำแนะนำไคลเอ็นต์ของ User Agent สำหรับอุปกรณ์ในแท็บเงื่อนไขเครือข่าย

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

รายงานปัญหาของโหมดที่ไม่มาตรฐานในแท็บปัญหา

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

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

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

รายงานปัญหาของโหมดที่ไม่มาตรฐานในแท็บปัญหา

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

รวมจุดตัดของ Compute ในแผงประสิทธิภาพ

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

คำนวณจุดตัดในแผงประสิทธิภาพ

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

Lighthouse 7.5 ในแผง Lighthouse

แผง Lighthouse เรียกใช้ Lighthouse 7.5 อยู่ในขณะนี้ ตอนนี้ระบบได้นำคำเตือน "ไม่มีความกว้างและความสูงที่ชัดเจน" สำหรับรูปภาพที่มีการกำหนด aspect-ratio ใน CSS ออกแล้ว ก่อนหน้านี้ Lighthouse แสดงคำเตือนสำหรับรูปภาพที่ไม่มีการกำหนดความกว้างและความสูง

ดูบันทึกประจำรุ่นเพื่อดูรายการการเปลี่ยนแปลงทั้งหมด

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

เมนูตามบริบท "รีสตาร์ทเฟรม" ในสแต็กการเรียกใช้ที่เลิกใช้งานแล้ว

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

เมนูตามบริบทของเฟรมรีสตาร์ทที่เลิกใช้งานแล้ว

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

[ทดลอง] การตรวจสอบโปรโตคอล

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

เพิ่ม 2 ฟังก์ชันใหม่เพื่อช่วยอำนวยความสะดวกในการทดสอบ CDP ดังนี้

  • ปุ่มบันทึกใหม่ช่วยให้คุณดาวน์โหลดข้อความที่บันทึกเป็นไฟล์ JSON ได้
  • ช่องใหม่ที่ให้คุณส่งคำสั่ง CDP ดิบได้โดยตรง

การตรวจสอบโปรโตคอล

ปัญหาเกี่ยวกับ Chromium: 1204004, 1204466

[ทดลอง] เครื่องอัดเสียงหุ่นเชิด

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

หลังจากบันทึกขั้นตอนแล้ว คุณจะใช้ปุ่มเล่นซ้ำเพื่อเล่นขั้นตอนซ้ำได้ ทำตามวิธีการที่นี่เพื่อดูวิธีเริ่มต้นใช้งานการบันทึก

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

เครื่องอัดเสียงหุ่นเชิด

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

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

ลองใช้ 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