หน้านี้ได้รับการแปลโดย 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/s บ่งบอกว่าการใช้งานหน่วยความจำทั้งหมดเพิ่มขึ้น 209 KB ต่อวินาที

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

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

หมายเลขพอร์ตการลงทะเบียนโปรแกรมทำงานของบริการ

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

พอร์ต Service Worker

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

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

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

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

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

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

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

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

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

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

Puppeteer สำหรับ Firefox

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

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

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

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

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

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

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

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