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

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

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

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

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

ปัญหา Chromium: 423246

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

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

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

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

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

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

แผง API การรายงาน

ปัญหา Chromium: 1205856

รองรับการรอจนกว่าองค์ประกอบจะปรากฏ/คลิกได้ในแผงโปรแกรมอัดเสียง

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

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

ปัญหา Chromium: 1257499

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1243309

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

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

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

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59