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

Jecelyn Yeen

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

ตอนนี้แผงเครือข่ายรองรับการจำกัดคำขอ Web Socket แล้ว ก่อนหน้านี้การควบคุมปริมาณเครือข่ายใช้ไม่ได้กับคำขอเว็บซ็อกเก็ต

เปิดแผงเครือข่าย คลิกคําขอเว็บโซケット แล้วเปิดแท็บข้อความเพื่อดูการโอนข้อความ เลือก 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 ได้อย่างราบรื่นโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บ พร้อมข้อความคอนโซลที่มีสีที่เหมาะสม เปิดการสาธิตนี้เพื่อดูด้วยตนเอง

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

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

ปัญหา Chromium: 1282837, 1282076

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1068788

การปรับปรุงแผนที่แหล่งที่มา

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

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

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

ปัญหา Chromium: 212374

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

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

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

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

แสดงไฟล์ต้นทางของผู้ปฏิบัติงานในแผงแหล่งที่มา

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

ALT_TEXT_HERE

ปัญหา Chromium: 1277002

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

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

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

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

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

ปัญหา Chromium: 1243309

เครื่องมือเลือกสีและแผงแยกที่ใช้งานง่าย

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

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

ปัญหาเกี่ยวกับ Chromium: 1284245, 1284995

ไฮไลต์อื่นๆ

การแก้ไขที่น่าสังเกตบางส่วนในรุ่นนี้ ได้แก่

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

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

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

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

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

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