หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

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

หมายเหตุ: โปรดตรวจสอบเวอร์ชัน Chrome ที่คุณใช้อยู่ที่ chrome://version หากคุณใช้เวอร์ชันก่อนหน้า ฟีเจอร์เหล่านี้จะไม่มีอยู่ หากคุณใช้เวอร์ชันที่ใหม่กว่า ฟีเจอร์เหล่านี้อาจมีการเปลี่ยนแปลง Chrome จะอัปเดตเป็นเวอร์ชันหลักใหม่โดยอัตโนมัติทุก 6 สัปดาห์โดยประมาณ

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

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

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

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

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

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

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

เบรกพอยท์การคลิกหยุดชั่วคราวในโค้ด Wrapper ของ Vue.js

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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