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

Kayce Basques

ฟีเจอร์ใหม่และการเปลี่ยนแปลงที่สำคัญที่จะมีในเครื่องมือสำหรับนักพัฒนาเว็บใน 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-Module ของ Paul Irish ใน TodoMVC เพื่อดูด้วยตนเอง

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

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

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

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

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

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