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

Kayce Basques

ฟีเจอร์ใหม่และการเปลี่ยนแปลงที่สำคัญที่จะมาถึงเครื่องมือสำหรับนักพัฒนาเว็บใน 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() สําหรับคําขอ

รูปที่ 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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools