หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

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

ตัวแก้ไขตารางกริด 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)

การประกาศค่าซ้ำ

ปัญหา 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 ในแผงประสิทธิภาพ

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

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

ปัญหา 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

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

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

โปรแกรมบันทึกหุ่นเชิด

ปัญหา Chromium: 1199787

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

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

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

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

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