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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

ตอนนี้การลบล้างในเครื่องใช้ได้กับรูปแบบบางอย่างที่กำหนดไว้ใน 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 จากแผง Call Stack

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

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

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

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

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

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

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

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

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

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