มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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

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

พอร์ต Service Worker

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

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

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

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

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

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

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

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