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

Kayce Basques
Kayce Basques
X GitHub

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

วิดีโอเวอร์ชันบันทึกประจำรุ่น

เปิดแผงเครือข่าย แล้วกด Command+F (Mac) หรือ Control+F (Windows, Linux, ChromeOS) เพื่อเปิดแผงการค้นหาเครือข่ายใหม่ เครื่องมือสำหรับนักพัฒนาเว็บจะค้นหาส่วนหัว และเนื้อหาของคำขอเครือข่ายทั้งหมดสำหรับคำค้นหาที่คุณระบุ

ค้นหาข้อความ "cache-control" ด้วยแผงการค้นหาเครือข่ายใหม่

รูปที่ 1 ค้นหาข้อความ cache-control ด้วยแผงการค้นหาเครือข่ายใหม่

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

การค้นหานิพจน์ทั่วไปในแผงการค้นหาเครือข่าย

รูปที่ 2 การค้นหานิพจน์ทั่วไปในแผงการค้นหาเครือข่าย

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

UI แบบเดิมและแบบใหม่

รูปที่ 3 UI แบบเดิมทางด้านซ้ายและ UI แบบใหม่ทางด้านขวา

กด Command+Option+F (Mac) หรือ Control+Shift+F (Windows, Linux, ChromeOS) เพื่อเปิดการค้นหา ส่วนกลาง คุณยังเปิดได้ผ่านเมนูคำสั่งด้วย

แสดงตัวอย่างค่าตัวแปร CSS ในแผงรูปแบบ

เมื่อตั้งค่าพร็อพเพอร์ตี้สี CSS เช่น background-color หรือ color เป็นตัวแปร CSS ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงตัวอย่างสีนั้นแล้ว

ตัวอย่างค่าสีของตัวแปร CSS

รูปที่ 4 ใน UI แบบเดิมทางด้านซ้าย จะไม่มีตัวอย่างสีข้าง color: var(--main-color) แต่ใน UI แบบใหม่ทางด้านขวาจะมี

คัดลอกเป็นการดึงข้อมูล

คลิกขวาที่คำขอเครือข่าย แล้วเลือกคัดลอก > คัดลอกเป็น Fetch เพื่อคัดลอกโค้ดที่เทียบเท่ากับ fetch()สำหรับคำขอนั้นไปยังคลิปบอร์ด

การคัดลอกโค้ดที่เทียบเท่า fetch() สำหรับคำขอ

รูปที่ 5 การคัดลอกfetch()โค้ดที่เทียบเท่าสำหรับคำขอ

เครื่องมือสำหรับนักพัฒนาเว็บจะสร้างโค้ดดังต่อไปนี้

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

การอัปเดตแผงการตรวจสอบ

การตรวจสอบใหม่

แผงการตรวจสอบมีการตรวจสอบใหม่ 2 รายการ ได้แก่

ตัวเลือกการกำหนดค่าใหม่

ตอนนี้คุณกำหนดค่าแผงการตรวจสอบเพื่อทำสิ่งต่อไปนี้ได้แล้ว

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

ตัวเลือกการกำหนดค่าการตรวจสอบใหม่

รูปที่ 6 ตัวเลือกการกำหนดค่าการตรวจสอบใหม่

ดูการติดตาม

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

ปุ่มดูการติดตาม

รูปที่ 7 ปุ่มดูการติดตาม

หยุดการวนซ้ำไม่รู้จบ

หากคุณทำงานกับลูป for, ลูป do...while หรือการเรียกซ้ำบ่อยๆ คุณอาจเคยเรียกใช้ลูปที่ไม่มีที่สิ้นสุดโดยไม่ได้ตั้งใจขณะพัฒนาเว็บไซต์ หากต้องการหยุดการวนซ้ำไม่สิ้นสุด คุณสามารถทำสิ่งต่อไปนี้ได้

  1. เปิดแผงแหล่งที่มา
  2. คลิกหยุดชั่วคราว หยุดชั่วคราว ปุ่มจะเปลี่ยนเป็นดำเนินการต่อ การเรียกใช้สคริปต์ ดำเนินการต่อ
  3. กดดำเนินการสคริปต์ต่อ ดำเนินการต่อ แล้วเลือกหยุด การเรียกใช้ JavaScript ปัจจุบัน หยุด

ในวิดีโอด้านบน ระบบจะอัปเดตนาฬิกาผ่านsetInterval()ตัวจับเวลา การคลิกเริ่ม Infinite Loop จะเรียกใช้do...whileลูปที่ไม่มีวันสิ้นสุด ช่วงเวลาจะกลับมาทำงานอีกครั้งเนื่องจากไม่ได้ ทำงานเมื่อมีการเลือกหยุดการเรียกใช้ JavaScript ปัจจุบัน หยุด

ระยะเวลาของผู้ใช้ในแท็บประสิทธิภาพ

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

การดูระยะเวลาที่เจาะจงของผู้ใช้ในแท็บ "จากล่างขึ้นบน"

รูปที่ 8 ดูการวัดระยะเวลาที่เจาะจงของผู้ใช้ในแท็บจากล่างขึ้นบน แถบสีน้ำเงินทางด้านซ้ายของส่วนเวลาของผู้ใช้แสดงว่าส่วนนั้นได้รับการเลือก

โดยทั่วไป ตอนนี้คุณสามารถเลือกส่วนใดก็ได้ (เธรดหลัก เวลาของผู้ใช้ GPU ScriptStreamer และอื่นๆ) และดูกิจกรรมของส่วนนั้นในแท็บได้

เลือกอินสแตนซ์ VM ของ JavaScript ในแผงหน่วยความจำ

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

ภาพหน้าจอก่อนและหลังของแผงหน่วยความจำ

รูปที่ 9 ใน UI แบบเดิมทางด้านซ้าย อินสแตนซ์ VM ของ JavaScript จะซ่อนอยู่หลังเมนูแบบเลื่อนลงของเป้าหมาย ในขณะที่ใน UI ใหม่ทางด้านขวา อินสแตนซ์จะแสดงในตารางเลือก อินสแตนซ์ VM ของ JavaScript

ข้างอินสแตนซ์ developers.google.com มีค่า 2 ค่า ได้แก่ 8.7 MB และ 13.3 MB ค่าทางซ้าย แสดงหน่วยความจำที่จัดสรรเนื่องจาก JavaScript ค่าที่ถูกต้องแสดงถึงหน่วยความจำของระบบปฏิบัติการทั้งหมด ที่ได้รับการจัดสรรเนื่องจากอินสแตนซ์ VM นั้น ค่าทางขวารวมค่าทางซ้ายด้วย ในตัวจัดการงานของ Chrome ค่าทางด้านซ้ายจะสอดคล้องกับ JavaScript Memory และค่าทางด้านขวาจะสอดคล้องกับ Memory Footprint

เปลี่ยนชื่อแท็บเครือข่ายเป็นแท็บหน้าเว็บ

ในแผงแหล่งที่มา ตอนนี้แท็บเครือข่ายเปลี่ยนชื่อเป็นแท็บหน้าเว็บแล้ว

หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ 2 หน้าต่างอยู่ข้างกันเพื่อแสดงการเปลี่ยนชื่อ

รูปที่ 10 ใน UI แบบเดิมทางด้านซ้าย แท็บที่แสดงทรัพยากรของหน้าเว็บเรียกว่าเครือข่าย ส่วนใน UI ใหม่ทางด้านขวาเรียกว่าหน้าเว็บ

การอัปเดตธีมมืด

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

ภาพหน้าจอของไอคอนจุดพักใหม่และรูปแบบสีของบรรทัดการดำเนินการปัจจุบัน

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

ความโปร่งใสของใบรับรองในแผงความปลอดภัย

ตอนนี้แผงความปลอดภัยจะรายงานข้อมูลความโปร่งใสของใบรับรอง

ข้อมูลความโปร่งใสของใบรับรองในแผงความปลอดภัย

รูปที่ 12 ข้อมูลความโปร่งใสของการรับรองในแผงความปลอดภัย

การแยกเว็บไซต์ในแผงประสิทธิภาพ

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

แผนภูมิเปลวไฟต่อกระบวนการในการบันทึกประสิทธิภาพ

รูปที่ 13 แผนภูมิ Flame Chart ต่อกระบวนการในการบันทึกประสิทธิภาพ

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

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

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

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

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

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