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

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

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

ข้างอินสแตนซ์ developers.google.com จะมี 2 ค่า ได้แก่ 8.7 MB และ 13.3 MB ทางซ้าย แสดงหน่วยความจำที่จัดสรรเนื่องจาก JavaScript ค่าที่ถูกต้องแสดงถึงหน่วยความจำของระบบปฏิบัติการทั้งหมด ที่มีการจัดสรรเนื่องจากอินสแตนซ์ VM นั้น ค่าที่ถูกต้องจะรวมค่าด้านซ้ายด้วย ในตัวจัดการงานของ Chrome ค่าทางซ้ายจะสอดคล้องกับ JavaScript Memory และค่าที่ถูกต้อง สอดคล้องกับ Memory Footprint

แท็บเครือข่ายเปลี่ยนชื่อเป็นแท็บหน้าเว็บแล้ว

ในแผงแหล่งที่มา ตอนนี้แท็บเครือข่ายเปลี่ยนชื่อเป็นแท็บหน้า

รูปที่ 10 ใน UI เก่าทางด้านซ้าย แท็บที่แสดงทรัพยากรของหน้าเว็บจะเรียกว่า เครือข่าย ส่วนใน UI ใหม่ทางด้านขวาจะเรียกว่าหน้า

การอัปเดตธีมมืด

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

รูปที่ 11 ภาพหน้าจอของไอคอนเบรกพอยท์ใหม่และชุดรูปแบบสีของการดำเนินการปัจจุบัน

ความโปร่งใสของใบรับรองในแผงความปลอดภัย

ตอนนี้แผงความปลอดภัยจะรายงานข้อมูลความโปร่งใสของใบรับรอง

รูปที่ 12 ข้อมูลความโปร่งใสของการรับรองในแผงความปลอดภัย

การแยกเว็บไซต์ในแผงประสิทธิภาพ

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

รูปที่ 13 แผนภูมิเปลวไฟแบบต่อกระบวนการในการบันทึกประสิทธิภาพ

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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