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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

การแมปตำแหน่งเก่ากับตำแหน่งใหม่

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

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

ข้อความ 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 นี้ไปที่ปัญหา #904585 ของ Chromium

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

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

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

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

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

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

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

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

พอร์ตของ Service Worker

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

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

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

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

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

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

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

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

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

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

Puppeteer สำหรับ Firefox

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

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

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

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

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