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

Jecelyn Yeen

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

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

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

เมื่อองค์ประกอบ 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 มีความสำคัญต่อการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือค้นหาและการช่วยเหลือพิเศษ ฟีเจอร์ CSS รุ่นใหม่ช่วยให้นักพัฒนาซอฟต์แวร์สร้างเนื้อหาที่มีลําดับบนหน้าจอแตกต่างไปจากในเอกสาร HTML อย่างมาก นี่เป็นปัญหาด้านการช่วยเหลือพิเศษที่สำคัญเนื่องจากผู้ใช้โปรแกรมอ่านหน้าจอจะได้รับประสบการณ์การใช้งานที่แตกต่างออกไปและอาจทำให้เกิดความสับสนมากกว่าผู้ใช้ที่มองเห็นได้

ปัญหา Chromium: 1094406

ทางลัดใหม่สำหรับดูรายละเอียดเฟรม

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

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

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

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

ปัญหา Chromium: 1192084

การรองรับการแก้ไขข้อบกพร่อง CORS ที่ปรับปรุงแล้ว

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

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

ปัญหา Chromium: 1141824

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

เปลี่ยนชื่อป้ายกำกับ XHR เป็น "การดึงข้อมูล/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

รายงานปัญหาเกี่ยวกับโหมดการทำงานเฉพาะในแท็บปัญหา

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

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

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

รายงานปัญหาเกี่ยวกับโหมดการทำงานเฉพาะในแท็บปัญหา

ปัญหา Chromium: 622660

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

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

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

ปัญหา Chromium: 1199137

Lighthouse 7.5 ในแผง Lighthouse

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

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

ปัญหา Chromium: 772558

เลิกใช้งานเมนูตามบริบท "เริ่มเฟรมใหม่" ในกองคิวการเรียก

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

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

ปัญหา Chromium: 1203606

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

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

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

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

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

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

[ทดลอง] โปรแกรมบันทึก Puppeteer

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

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

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

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

ปัญหา Chromium: 1199787

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools