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

Jecelyn Yeen

การควบคุมคำขอ WebSocket

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

เปิดแผงเครือข่าย คลิกคำขอ WebSocket แล้วเปิดแท็บข้อความเพื่อดูการโอนข้อความ เลือก3G ช้าเพื่อควบคุมความเร็ว

การควบคุมคำขอ WebSocket

ปัญหาใน Chromium: 423246

บานหน้าต่าง Reporting API ใหม่ในแผงแอปพลิเคชัน

ใช้แผงReporting API ใหม่เพื่อตรวจสอบรายงานที่สร้างในหน้าเว็บและสถานะของรายงาน

Reporting API ออกแบบมาเพื่อช่วยคุณตรวจสอบการละเมิดความปลอดภัยของหน้าเว็บ การเรียก API ที่เลิกใช้งานแล้ว และอื่นๆ

เปิดหน้าที่ใช้ Reporting API (เช่น หน้าเดโม) ในแผงแอปพลิเคชัน ให้เลื่อนลงไปที่ส่วนบริการในเบื้องหลัง แล้วเลือกแผงReporting API

ส่วนรายงานจะแสดงรายการรายงานที่สร้างขึ้นในหน้าเว็บและสถานะของรายงาน คลิกเพื่อดูรายละเอียดรายงาน

ส่วนปลายทางจะแสดงภาพรวมของปลายทางทั้งหมดที่กำหนดค่าไว้ในส่วนหัว Reporting-Endpoints

แผง Reporting API

ปัญหาใน Chromium: 1205856

รอจนกว่าองค์ประกอบจะมองเห็น/คลิกได้ในแผงเครื่องบันทึก

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

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

ปัญหาใน Chromium: 1257499

การจัดรูปแบบ การจัดรูปแบบ และการกรองคอนโซลที่ดีขึ้น

จัดรูปแบบข้อความบันทึกอย่างถูกต้องด้วยรหัสหลีก ANSI

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

นักพัฒนาซอฟต์แวร์ Node.js มักจะใช้ลำดับการหลีก ANSI เพื่อใส่สีข้อความบันทึก โดยมักจะใช้ไลบรารีการจัดรูปแบบบางอย่าง เช่น chalk, colors, ansi-colors, kleur เป็นต้น

การเปลี่ยนแปลงเหล่านี้ช่วยให้คุณแก้ไขข้อบกพร่องของแอปพลิเคชัน Node.js ได้อย่างราบรื่นโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome พร้อมข้อความคอนโซลที่มีการใส่สีอย่างเหมาะสม เปิดการสาธิตนี้เพื่อดูด้วยตัวคุณเอง

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

การจัดรูปแบบคอนโซล

ปัญหาเกี่ยวกับ Chromium: 1282837, 1282076

รองรับตัวระบุรูปแบบ %s, %d, %i และ %f อย่างถูกต้อง

ตอนนี้ Console จะทำการแปลงประเภท %s, %d, %i และ %f อย่างถูกต้องตามที่ระบุไว้ในมาตรฐานของ Console ก่อนหน้านี้ ผลลัพธ์ของการสนทนาไม่สอดคล้องกัน

รองรับตัวระบุรูปแบบในข้อความคอนโซล

ปัญหาใน Chromium: 1277944, 1282076

ตัวกรองกลุ่มคอนโซลที่ใช้งานง่ายขึ้น

เมื่อกรองข้อความคอนโซล ตอนนี้ระบบจะแสดงข้อความคอนโซลหากเนื้อหาข้อความตรงกับตัวกรอง หรือชื่อของกลุ่ม (หรือกลุ่มระดับบน) ตรงกับตัวกรอง ก่อนหน้านี้ ชื่อกลุ่มคอนโซลจะแสดงแม้ว่าจะมีการกรองก็ตาม

นอกจากนี้ หากข้อความคอนโซลแสดงขึ้น กลุ่ม (หรือกลุ่มระดับบน) ที่ข้อความนั้นสังกัดอยู่จะแสดงด้วย

ตัวกรองกลุ่มคอนโซล

ปัญหาใน Chromium: 1068788

การปรับปรุง Source Map

แก้ไขข้อบกพร่องของส่วนขยาย Chrome ด้วยไฟล์ Source Map

ตอนนี้คุณแก้ไขข้อบกพร่องของส่วนขยาย Chrome ด้วยไฟล์ Source Map ได้แล้ว ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บรองรับเฉพาะ Sourcemap แบบอินไลน์สำหรับการแก้ไขข้อบกพร่องของส่วนขยาย Chrome

แก้ไขข้อบกพร่องของส่วนขยาย Chrome ด้วยไฟล์ Source Map

ปัญหาใน Chromium: 212374

ปรับปรุงโครงสร้างโฟลเดอร์ต้นทางในแผงแหล่งที่มา

ตอนนี้เราได้ปรับปรุงโครงสร้างโฟลเดอร์ต้นทางในแผงแหล่งที่มาให้มีความเป็นระเบียบมากขึ้นในโครงสร้างโฟลเดอร์และการตั้งชื่อ (เช่น "../" "./" ฯลฯ) เบื้องหลังแล้ว นี่คือผลลัพธ์ของการทำให้ URL แหล่งที่มาแบบสัมบูรณ์ในแผนที่แหล่งที่มาเป็นปกติ

ปรับปรุงโครงสร้างโฟลเดอร์ต้นทางในแผงแหล่งที่มา

ปัญหาใน Chromium: 1284737

แสดงไฟล์ต้นฉบับของ Worker ในแผงแหล่งที่มา

ตอนนี้ไฟล์ต้นฉบับของ Worker (เช่น Web Worker, Service Worker) ที่มี SourceURL แบบสัมพัทธ์จะแสดงในแผงแหล่งที่มา ก่อนหน้านี้ ระบบจัดการไฟล์ต้นฉบับของ Worker ไม่ถูกต้อง

ALT_TEXT_HERE

ปัญหาใน Chromium: 1277002

การอัปเดตธีมมืดอัตโนมัติของ Chrome

ตอนนี้ UI ของการจำลองธีมมืดอัตโนมัติได้รับการปรับให้ใช้งานง่ายขึ้นแล้ว ตอนนี้เป็นช่องทำเครื่องหมายแล้ว แต่ก่อนหน้านี้เป็นเมนูแบบเลื่อนลง

นอกจากนี้ เมื่อเปิดใช้ธีมมืดอัตโนมัติ ระบบจะปิดใช้เมนูแบบเลื่อนลงจำลอง prefers-color-scheme และตั้งค่าเป็น prefers-color-scheme: dark โดยอัตโนมัติ

Chrome 96 เปิดตัวช่วงทดลองใช้จากต้นทางสำหรับธีมมืดอัตโนมัติใน Android ฟีเจอร์นี้จะทำให้เบราว์เซอร์ใช้ธีมมืดที่สร้างขึ้นโดยอัตโนมัติกับเว็บไซต์ที่ใช้ธีมสว่าง เมื่อผู้ใช้เลือกใช้ธีมมืดในระบบปฏิบัติการ

การจำลองธีมมืดอัตโนมัติ

ปัญหาใน Chromium: 1243309

ตัวเลือกสีและแผงแยกที่เหมาะกับการสัมผัส

ตอนนี้คุณเลือกสีและปรับขนาดลิ้นชักใน DevTools ได้โดยใช้นิ้วหรือสไตลัสในอุปกรณ์หน้าจอสัมผัส

นี่คือตัวอย่างที่ถ่ายด้วยหน้าจอสัมผัสของอุปกรณ์ Google Pixelbook

ปัญหาใน Chromium: 1284245, 1284995

ไฮไลต์อื่นๆ

การแก้ไขที่สำคัญในรุ่นนี้มีดังนี้

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

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

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

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

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

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