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