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

Kayce Basques

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

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

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

ค้นหาในคำตอบและส่วนหัวของเครือข่ายทั้งหมด

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

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

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

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

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

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

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

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

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

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

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

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

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

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