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

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

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

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

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

หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ 2 หน้าต่างวางอยู่ข้างกัน ซึ่งแสดงให้เห็นว่าชื่อมีการเปลี่ยนแปลง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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