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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools