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

Jecelyn Yeen

เครื่องมือแก้ไขตารางกริด CSS

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

เครื่องมือแก้ไข CSS Grid

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

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

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

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

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

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

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

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

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

โปรแกรมดูลำดับแหล่งที่มา

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

โปรแกรมดูลำดับแหล่งที่มา

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

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

แป้นพิมพ์ลัดใหม่เพื่อดูรายละเอียดเฟรม

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

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

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

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

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

การรองรับการแก้ไขข้อบกพร่อง CORS ที่มีประสิทธิภาพมากขึ้น

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

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

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

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

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

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

ป้ายกำกับ Fetch/XHR

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

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

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

กรองตาม Wasm

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lighthouse 7.5 ในแผง Lighthouse

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

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

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

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

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

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

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

[เวอร์ชันทดลอง] เครื่องมือตรวจสอบโปรโตคอล

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

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

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

เครื่องมือตรวจสอบโปรโตคอล

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

[ทดลอง] เครื่องมือบันทึก Puppeteer

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

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

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

โปรแกรมบันทึก Puppeteer

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

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

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

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

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

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

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