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

Kayce Basques

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

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

อ่านต่อ หรือดูวิดีโอบันทึกประจำรุ่นด้านล่าง

ละเว้นสคริปต์ในแผงเครือข่าย

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

ก่อนหน้านี้ หากคําขอเครือข่ายรวมกรอบไว้ใน Wrapper คอลัมน์ตัวเริ่มต้น ไม่มีประโยชน์ขนาดนั้น คำขอเครือข่ายทั้งหมดชี้ไปที่บรรทัดเดียวกันของโค้ด Wrapper

สิ่งที่คุณต้องการจริงๆ ในสถานการณ์นี้คือการดูโค้ดของแอปพลิเคชันที่ทำให้เกิดคำขอดังกล่าว นั่นคือ ตอนนี้ก็เป็นไปได้

1. วางเมาส์เหนือคอลัมน์ตัวเริ่มต้น สแต็กการเรียกใช้ที่ทำให้เกิดคำขอจะปรากฏในป๊อปอัป
2. คลิกขวาที่การโทรที่ต้องการซ่อนจากผลลัพธ์ของผู้เริ่มต้น
3. เลือกเพิ่มสคริปต์ลงในรายการละเว้น ตอนนี้คอลัมน์ Initiator จะซ่อนการเรียกจากสคริปต์ที่ ที่คุณไม่สนใจ

รูปที่ 1 กำลังละเว้น requests.js

จัดการสคริปต์ที่ละเว้นของคุณจากแท็บรายการละเว้นในการตั้งค่า

โปรดดูละเว้นสคริปต์หรือรูปแบบของสคริปต์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการละเว้นสคริปต์

การจัดรูปแบบในแท็บ "ดูตัวอย่าง" และ "การตอบกลับ"

ตอนนี้แท็บแสดงตัวอย่างในแผงเครือข่ายจะพิมพ์ทรัพยากรโดยค่าเริ่มต้นเมื่อตรวจพบ ว่ามีการลดขนาดทรัพยากรเหล่านั้น

รูปที่ 2 แท็บแสดงตัวอย่างจะพิมพ์เนื้อหาของ analytics.js โดยค่าเริ่มต้น

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

รูปที่ 3 จัดรูปแบบเนื้อหาของ analytics.js ด้วยตนเองโดยใช้ปุ่มรูปแบบ

การดูตัวอย่างเนื้อหา HTML ในแท็บแสดงตัวอย่าง

ก่อนหน้านี้แท็บแสดงตัวอย่างในแผงเครือข่ายแสดงโค้ดของทรัพยากร HTML ใน ในสถานการณ์บางอย่างขณะที่แสดงตัวอย่าง HTML ในที่อื่นๆ แท็บแสดงตัวอย่างจะเป็น จะแสดงผล HTML แบบพื้นฐาน ไม่ใช่เบราว์เซอร์เต็มรูปแบบ จึงอาจไม่แสดงผล HTML ตรงตามที่คุณคาดหวัง หากคุณต้องการดูโค้ด HTML ให้คลิกแท็บการตอบกลับ หรือ คลิกขวาที่แหล่งข้อมูลแล้วเลือกเปิดในแผงแหล่งที่มา

รูปที่ 4 แสดงตัวอย่าง HTML ในแท็บแสดงตัวอย่าง

ปรับการซูมอัตโนมัติในโหมดอุปกรณ์

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

ขณะนี้การลบล้างในเครื่องใช้ได้กับบางรูปแบบที่กำหนดไว้ใน HTML

ย้อนกลับไปตอนที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดตัวการลบล้างในเครื่องใน Chrome 65 ข้อจำกัดอย่างหนึ่งคือ ติดตามการเปลี่ยนแปลงสไตล์ที่กำหนดไว้ภายใน HTML ไม่ได้ ตัวอย่างเช่น ในรูปที่ 7 มีรูปแบบ ใน head ของเอกสารที่ประกาศ font-weight: bold สำหรับองค์ประกอบ h1

รูปที่ 5 ตัวอย่างของรูปแบบที่กำหนดภายใน HTML

ใน Chrome 65 หากคุณเปลี่ยนการประกาศ font-weight ผ่านแผงรูปแบบของเครื่องมือสำหรับนักพัฒนาเว็บ ในเครื่อง การลบล้างจะไม่ติดตามการเปลี่ยนแปลง กล่าวคือ ในการโหลดซ้ำครั้งถัดไป สไตล์จะเปลี่ยนกลับ กลับไปที่ font-weight: bold แต่ใน Chrome 66 การเปลี่ยนแปลงเช่นนี้จะยังคงมีผลในการโหลดหน้าเว็บ

เคล็ดลับพิเศษ: ละเว้นสคริปต์เฟรมเวิร์กเพื่อทำให้เบรกพอยท์ของ Listener เหตุการณ์มีประโยชน์มากขึ้น

ตอนที่ฉันสร้างวิดีโอเริ่มต้นใช้งานการดีบัก JavaScript ผู้ชมบางส่วนแสดงความคิดเห็น เบรกพอยท์ของ Listener เหตุการณ์ไม่มีประโยชน์สำหรับแอปที่สร้างต่อยอดจากเฟรมเวิร์ก เนื่องจากเหตุการณ์ Listener มักจะรวมอยู่ในโค้ดเฟรมเวิร์ก ตัวอย่างเช่น ในรูปที่ 8 ฉันตั้งค่า click แล้ว ในเครื่องมือสำหรับนักพัฒนาเว็บ เมื่อฉันคลิกปุ่มในเดโม เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวโดยอัตโนมัติ บรรทัดแรกของโค้ด Listener เท่านั้น ในกรณีนี้ จะมีการหยุดชั่วคราวในโค้ด Wrapper ของ Vue.js ในบรรทัด 1802 ซึ่ง ไม่มีประโยชน์ขนาดนั้น

รูปที่ 6 เบรกพอยท์ click หยุดชั่วคราวใน Vue.js รหัส Wrapper

เนื่องจากสคริปต์ Vue.js อยู่ในไฟล์แยกต่างหาก ฉันจึงสามารถข้ามสคริปต์นั้นจาก Call Stack ได้ เพื่อทำให้เบรกพอยท์ click นี้มีประโยชน์มากขึ้น

รูปที่ 7 การเพิกเฉยต่อสคริปต์ Vue.js จากแผงสแต็กการเรียกใช้

ครั้งถัดไปที่ฉันคลิกปุ่มและทริกเกอร์เบรกพอยท์ click ปุ่มนี้จะเรียกใช้โค้ด Vue.js โดยไม่หยุดชั่วคราว แล้วหยุดชั่วคราวในบรรทัดแรกของโค้ดใน Listener ของแอป ซึ่ง ที่ผมอยากจะพักสักหน่อย

รูปที่ 8 ตอนนี้เบรกพอยท์ click จะหยุดชั่วคราวในโค้ด Listener ของแอป

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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