มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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