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

Jecelyn Yeen

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

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

เปิดแผงเครือข่าย คลิกคำขอ 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 ซึ่งมักใช้ไลบรารีการจัดรูปแบบ เช่น ชอล์ก, colors, ansi-colors, kleur เป็นต้น

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

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

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

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

รองรับตัวระบุรูปแบบ %s, %d, %i และ %f อย่างเหมาะสม

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

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

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

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

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

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

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

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

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

แก้ไขข้อบกพร่องของส่วนขยาย Chrome ด้วยไฟล์การแมปแหล่งที่มา

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

แก้ไขข้อบกพร่องของส่วนขยาย Chrome ด้วยไฟล์การแมปแหล่งที่มา

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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