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

Kayce Basques

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

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

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

รูปที่ 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 มีอยู่ในเครื่องมือสำหรับนักพัฒนาเว็บมาระยะหนึ่งแล้ว ปุ่มที่ค้นพบได้มากขึ้นคือการเปลี่ยนแปลงแบบใหม่

รูปที่ 4 ปุ่ม HAR ใหม่

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

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

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

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

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

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

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

ตอนนี้แผง Service Workers จะมีหมายเลขพอร์ตในชื่อเพื่อให้ติดตามได้ง่ายขึ้น 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 DevTools

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

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

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

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