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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

รูปที่ 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() สำหรับคำขอนั้นไปยังคลิปบอร์ด

การคัดลอกโค้ดที่เทียบเท่า 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 รายการ ได้แก่

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

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

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

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

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

ดูการติดตาม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รูปที่ 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 ข้อมูลความโปร่งใสของใบรับรองในแผงความปลอดภัย

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

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

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

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

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

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

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

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

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

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