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

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

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