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

Kayce Basques
Kayce Basques
X GitHub

ฟีเจอร์ใหม่และการเปลี่ยนแปลงที่สำคัญที่กำลังจะเปิดตัวในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 61 มีดังนี้

ดูข้อมูลเพิ่มเติมได้ในวิดีโอเกี่ยวกับหมายเหตุประจำรุ่นเหล่านี้ที่ด้านล่าง หรืออ่านต่อ

จำลองอุปกรณ์เคลื่อนที่ระดับล่างและระดับกลางในโหมดอุปกรณ์

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

เมนูการควบคุม

รูปที่ 1 เมนูการควบคุม

คำจำกัดความของเมนูการควบคุม

รูปที่ 2 วางเมาส์เหนือเมนูการจำกัดหรือเปิดเมนูการตั้งค่าการจับภาพเพื่อดู คำจำกัดความสำหรับอุปกรณ์เคลื่อนที่ระดับกลางและอุปกรณ์เคลื่อนที่ระดับล่าง

ดูการใช้พื้นที่เก็บข้อมูล

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

ส่วนการใช้งาน

รูปที่ 3 ส่วนการใช้งานแสดงว่า https://airhorner.com ใช้ 66.9 KB จากโควต้าของต้นทางที่ 15214 MB

ดูเวลาที่ Service Worker แคชคำตอบ

คอลัมน์เวลาที่แคชใหม่ในแท็บที่เก็บแคชจะแสดงเวลาที่ Service Worker แคชคำตอบ

คอลัมน์เวลาที่แคช

รูปที่ 4 คอลัมน์เวลาที่แคช

เปิดใช้มิเตอร์ FPS จากเมนูคำสั่ง

ตอนนี้คุณเปิดใช้มิเตอร์ FPS ได้จากเมนูคำสั่ง

การเปิดใช้มิเตอร์ FPS จากเมนูคำสั่ง

รูปที่ 5 การเปิดใช้มิเตอร์ FPS จากเมนูคำสั่ง

ตั้งค่าลักษณะการทำงานของล้อเลื่อนเมาส์ให้ซูมหรือเลื่อนด้วยการบันทึกประสิทธิภาพ

เปิดการตั้งค่าและตั้งค่าการทำงานของล้อเมาส์ใน Flamechart ใหม่เพื่อเปลี่ยนลักษณะการทำงานของล้อเมาส์ในแผงประสิทธิภาพ

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

การตั้งค่า "การทำงานของล้อเลื่อนเมาส์ในแผนภูมิ Flame Chart"

รูปที่ 6 การตั้งค่าการทำงานของล้อเลื่อนเมาส์ในแผนภูมิ Flame Chart

การรองรับการแก้ไขข้อบกพร่องสำหรับโมดูล ES6

โมดูล ES6 พร้อมใช้งานใน Chrome 61 โดยไม่ต้องติดตั้งเพิ่มเติม ไม่มีอะไรมากที่นี่เกี่ยวกับ DevTools นอกเหนือจากการแก้ไขข้อบกพร่องที่ทำงานได้ตามที่คุณคาดหวัง ลองตั้งค่าเบรกพอยต์และ ทำทีละขั้นตอนในการติดตั้งใช้งานโมดูล ES6 ของ Paul Irish ของ TodoMVC เพื่อดูด้วยตัวคุณเอง

ดาวน์โหลดช่องตัวอย่าง

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

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

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

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

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