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

Kayce Basques

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

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

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

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

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

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

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

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

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

รูปที่ 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 Worker มีหมายเลขพอร์ตในชื่อแล้ว เพื่อให้คุณติดตาม Service Worker ที่กำลังแก้ไขข้อบกพร่องได้ง่ายขึ้น

พอร์ต Service Worker

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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