หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

เติมข้อความอัตโนมัติด้วยค่า CSS

เมื่อเพิ่มการประกาศรูปแบบในโหนด DOM บางครั้งค่าการประกาศจะจำได้ง่ายกว่าชื่อการประกาศ เช่น เมื่อทำให้โหนด <p> เป็นตัวหนา ค่า bold อาจจำได้ง่ายกว่าชื่อ font-weight UI การเติมข้อความอัตโนมัติของแผงรูปแบบรองรับค่า CSS แล้ว หากคุณจำค่าคีย์เวิร์ดที่ต้องการได้ แต่จำชื่อพร็อพเพอร์ตี้ไม่ได้ ให้ลองพิมพ์ค่าดังกล่าว แล้วการเติมข้อความอัตโนมัติอาจช่วยให้คุณพบชื่อที่ต้องการ

หลังจากพิมพ์ "ตัวหนา" ช่องรูปแบบจะเติมข้อความอัตโนมัติเป็น "font-weight: bold"

รูปที่ 1 หลังจากพิมพ์ bold บานหน้าต่างรูปแบบจะเติมข้อความอัตโนมัติเป็น font-weight: bold

ส่งความคิดเห็นเกี่ยวกับฟีเจอร์ใหม่ไปที่ปัญหาเกี่ยวกับ Chromium #931145

UI ใหม่สำหรับการตั้งค่าเครือข่าย

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

การตั้งค่าเครือข่าย

รูปที่ 2 การตั้งค่าเครือข่าย

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

การจับคู่ตำแหน่งเดิมกับตำแหน่งใหม่

รูปที่ 3 การจับคู่ตำแหน่งเดิมกับตำแหน่งใหม่

ส่งความคิดเห็นเกี่ยวกับการเปลี่ยนแปลง UI นี้ไปที่ปัญหาเกี่ยวกับ Chromium #892969

ข้อความ WebSocket ในการส่งออก HAR

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

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

ส่งความคิดเห็นเกี่ยวกับฟีเจอร์ใหม่ไปที่ปัญหาเกี่ยวกับ Chromium #496006

ปุ่มนำเข้าและส่งออก HAR

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

ปุ่ม HAR ใหม่

รูปที่ 4 ปุ่ม HAR ใหม่

ส่งความคิดเห็นเกี่ยวกับการเปลี่ยนแปลง UI นี้ไปที่ปัญหาเกี่ยวกับ Chromium #904585

การใช้งานหน่วยความจำทั้งหมดแบบเรียลไทม์

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

การใช้งานหน่วยความจำทั้งหมดแบบเรียลไทม์

รูปที่ 5 ด้านล่างของแผงหน่วยความจำแสดงให้เห็นว่าหน้าดังกล่าวใช้หน่วยความจำทั้งหมด 43.4 MB 209 KB/วินาที แสดงว่าการใช้หน่วยความจำรวมเพิ่มขึ้น 209 KB ต่อวินาที

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

ส่งความคิดเห็นเกี่ยวกับฟีเจอร์ใหม่ไปที่ปัญหาเกี่ยวกับ Chromium #958177

หมายเลขพอร์ตการลงทะเบียนของ Service Worker

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

พอร์ตของ Service Worker

รูปที่ 6 พอร์ตของ Service Worker

ส่งความคิดเห็นเกี่ยวกับการเปลี่ยนแปลง UI นี้ไปที่ปัญหาเกี่ยวกับ Chromium #601286

ตรวจสอบเหตุการณ์การดึงข้อมูลในเบื้องหลังและการซิงค์ในเบื้องหลัง

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

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

แผงการดึงข้อมูลในเบื้องหลัง

รูปที่ 7 แผงการดึงข้อมูลในเบื้องหลัง การสาธิต โดย Maxim Salnikov

แผงการซิงค์ในเบื้องหลัง

รูปที่ 8 แผงการซิงค์ในเบื้องหลัง

ส่งความคิดเห็นเกี่ยวกับฟีเจอร์ใหม่ๆ เหล่านี้ไปที่ปัญหาเกี่ยวกับ Chromium #927726

Puppeteer สำหรับ Firefox

หมายเหตุ: Puppeteer คือ API ของโหนดระดับสูงสำหรับการทำให้ Chromium เป็นแบบอัตโนมัติ เราพูดถึง Puppeteer ในบันทึกประจำรุ่นของเครื่องมือสำหรับนักพัฒนาเว็บเนื่องจาก Puppeteer เริ่มโดยทีมเครื่องมือสำหรับนักพัฒนาเว็บ และเนื่องจากคุณอาจสามารถใช้ Puppeteer เพื่อทำให้งานที่เคยทำได้เฉพาะในเครื่องมือสำหรับนักพัฒนาเว็บเป็นแบบอัตโนมัติได้

Puppeteer สำหรับ Firefox เป็นโครงการทดลองใหม่ที่ช่วยให้คุณกำหนดให้ Firefox ทำงานโดยอัตโนมัติด้วย Puppeteer API กล่าวคือ คุณสามารถทำให้ Firefox และ Chromium ทำงานแบบอัตโนมัติได้โดยใช้ Node API เดียวกันดังที่แสดงในวิดีโอด้านล่าง

หลังจากเรียกใช้ node example.js แล้ว Firefox จะเปิดขึ้นและแทรกข้อความ page ลงในช่องค้นหาในเว็บไซต์เอกสารประกอบของ Puppeteer จากนั้นระบบจะทำงานเดียวกันนี้ซ้ำใน Chromium

ดูการบรรยายของ Puppeteer โดย Joel และ Andrey จากงาน Google I/O 2019 เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ Puppeteer และ Puppeteer สำหรับ Firefox ประกาศของ Firefox ประมาณ 4:05 น.

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

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

ติดต่อทีม Chrome DevTools

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

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