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

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

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

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

การค้นหาข้อความ "cache-control" ในแผงการค้นหาเครือข่ายใหม่

รูปที่ 1 การค้นหาข้อความ cache-control ด้วยแผงการค้นหาเครือข่ายใหม่

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

การค้นหานิพจน์ทั่วไปในแผงการค้นหาเครือข่าย

รูปที่ 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() สำหรับคำขอ

รูปที่ 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. คลิกหยุดชั่วคราว หยุดชั่วคราว ปุ่มจะเปลี่ยนเป็นดำเนินการสคริปต์ต่อ บันทึกต่อ
  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 แผนภูมิเปลวไฟต่อการประมวลผลในการบันทึกประสิทธิภาพ

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

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

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

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

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

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

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

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