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

Jecelyn Yeen

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

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

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

ปัญหา 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 ของการจําลองธีมมืดอัตโนมัติเรียบง่ายขึ้นแล้ว ตอนนี้เป็นช่องทําเครื่องหมายแล้ว ก่อนหน้านี้เป็นเมนูแบบเลื่อนลง

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

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

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

ปัญหา Chromium: 1243309

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

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

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

ปัญหา Chromium: 1284245, 1284995

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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