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

Kayce Basques
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) เพื่อเปิด Global Search หรือคุณจะเปิดผ่านเมนูคำสั่งก็ได้เช่นกัน

แสดงตัวอย่างค่าตัวแปร CSS ในแผงรูปแบบ

เมื่อค่าของพร็อพเพอร์ตี้สี CSS เช่น background-color หรือ color ตั้งค่าเป็นตัวแปร CSS เครื่องมือสำหรับนักพัฒนาเว็บก็จะแสดงตัวอย่างของสีดังกล่าว

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

  1. เปิดแผงแหล่งที่มา
  2. คลิกหยุดชั่วคราว หยุดชั่วคราว ปุ่มจะเปลี่ยนเป็น Resume Script Execution บันทึกต่อ
  3. กด Resume Script Execution ค�������ไว้ บันทึกต่อ แล้วเลือก Stop Current JavaScript Call หยุด

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

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

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

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

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

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

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

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

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

รูปที่ 9 ใน UI เก่าทางด้านซ้าย อินสแตนซ์ JavaScript VM จะซ่อนอยู่หลังเมนูแบบเลื่อนลงเป้าหมาย ขณะที่ใน 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 แผนภูมิเปลวไฟแบบต่อกระบวนการในการบันทึกประสิทธิภาพ

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

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

ติดต่อทีม Chrome DevTools

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

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม   > ความช��วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวี��ที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59