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

Kayce Basques

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

อ่านต่อหรือดูหมายเหตุประจำรุ่นเวอร์ชันวิดีโอได้ที่ด้านล่าง

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

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

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

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

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

ไม่สนใจ "requests.js"

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

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

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

การแสดงผลที่อ่านง่ายในแท็บแสดงตัวอย่างและแท็บคำตอบ

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

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

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

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

แสดงผลเนื้อหาของ analytics.js ให้เป็นรูปแบบที่อ่านง่ายด้วยตนเองผ่านปุ่ม "จัดรูปแบบ"

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

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

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

การแสดงตัวอย่าง HTML ในแท็บแสดงตัวอย่าง

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

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

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

ตอนนี้การลบล้างเฉพาะที่ใช้งานได้กับรูปแบบบางอย่างที่กําหนดไว้ใน HTML

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

ตัวอย่างสไตล์ที่กําหนดภายใน HTML

รูปที่ 5 ตัวอย่างสไตล์ที่กําหนดภายใน HTML

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

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

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

จุดหยุดชั่วคราวของคลิกจะหยุดชั่วคราวในโค้ด Wrapper ของ Vue.js

รูปที่ 6 จุดหยุดพัก click จะหยุดชั่วคราวในโค้ด Wrapper ของ Vue.js

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

ละเว้นสคริปต์ Vue.js จากแผงสแต็กการเรียกใช้

รูปที่ 7 การละเว้นสคริปต์ Vue.js จากแผง Call Stack

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

ตอนนี้จุดหยุดชั่วคราวของคลิกจะหยุดชั่วคราวในโค้ด Listener ของแอป

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools