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

Kayce Basques

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

• การจำลองการควบคุมอุปกรณ์เคลื่อนที่ ตั้งค่าการควบคุม CPU และเครือข่ายพร้อมกันเพื่อ จำลองอุปกรณ์เคลื่อนที่ระดับกลางหรือระดับโลว์เอนด์
• การใช้พื้นที่เก็บข้อมูล ดูปริมาณพื้นที่เก็บข้อมูลที่ต้นทางใช้ โดยแยกตามเทคโนโลยี (IndexedDB, แคช, ในเครื่อง, เซสชัน ฯลฯ)
• แคชการประทับเวลา ดูเวลาที่โปรแกรมทำงานของบริการแคชการตอบกลับ
• เปิดใช้ตัววัด FPS จากเมนูคำสั่ง
• เปลี่ยนการทำงานของลูกกลิ้งเมาส์และแทร็กแพดในแผงประสิทธิภาพ
• แก้ไขข้อบกพร่องของโมดูล ES6 ตั้งแต่ต้น

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

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

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

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

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

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

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

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

ดูเวลาที่โปรแกรมทำงานของบริการแคชการตอบกลับ

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

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

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

ขณะนี้คุณสามารถเปิดใช้ FPS Meter จาก เมนูคำสั่ง

รูปที่ 5 การเปิดใช้ FPS Meter จาก Command Menu

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

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

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

รูปที่ 6 การตั้งค่าการทำงานของล้อเลื่อนของเมาส์ Flamechart

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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