ไดเจสต์ของ DevTools - การจัดลำดับแท็บ, คอนโซลใน Listener เหตุการณ์แบบที่ 2 และเฟรมเวิร์ก

พอล บากาอุส
พอล บากาอุส

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

การนำทางในแผงที่ดีขึ้น: คอนโซลใน #2, การจัดเรียงแท็บใหม่ และการขีดเส้นใต้ที่น่าสนใจ

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

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

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

การรองรับ Listener เหตุการณ์ของเฟรมเวิร์ก

บางครั้งเหตุการณ์ที่สร้างโดยเฟรมเวิร์ก JS เช่น jQuery มีความยุ่งยากเมื่อทำงานกับเครื่องมือสำหรับนักพัฒนาเว็บ นั่นเป็นเพราะเฟรมเวิร์กส่วนใหญ่รวมเหตุการณ์ DOM แบบดั้งเดิมไว้ใน API เหตุการณ์ที่กำหนดเอง ดังนั้น การดู Listener เหตุการณ์จะไม่ได้เปิดเผยสิ่งที่เกิดขึ้นมากนัก

ปิด Listener เฟรมเวิร์ก

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

Listener เฟรมเวิร์กเปิดอยู่

ดีที่สุด

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

    คำแนะนำไทม์ไลน์
  • ในทำนองเดียวกัน แผงเครือข่ายจะแสดงคำแนะนำที่เป็นประโยชน์เมื่อไม่มีข้อมูลดังนี้

    คำแนะนำเครือข่าย
  • ตอนนี้คุณกรองเนื้อหาผสมในแผงเครือข่ายได้โดยใช้อินพุตตัวกรองและตั้งค่าเป็น mixed-content:displayed


และเช่นเคย โปรดบอกให้เราทราบว่าคุณคิดอย่างไรผ่าน Twitter หรือแสดงความคิดเห็นด้านล่าง และส่งข้อบกพร่องไปที่ crbug.com/new

แล้วพบกันอีกเดือนหน้า! Paul Bakaus และทีมเครื่องมือสำหรับนักพัฒนาเว็บ