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

Kayce Basques

ยินดีต้อนรับสู่บันทึกประจำรุ่นอื่นสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ ดูวิดีโอ ด้านล่างหรืออ่านต่อเพื่อดูว่ามีอะไรใหม่ใน Chrome DevTools ใน Chrome 59!

ไฮไลต์

ฟีเจอร์ใหม่

ความครอบคลุมของโค้ด CSS และ JS

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

แท็บความครอบคลุม

การคลิก URL จะแสดงไฟล์นั้นในแผงแหล่งที่มาพร้อมรายละเอียดบรรทัดโค้ดที่ดำเนินการ

รายละเอียดการครอบคลุมของโค้ดในแผงแหล่งที่มา

โค้ดแต่ละบรรทัดจะมีรหัสสีดังนี้

  • สีเขียวค้างหมายความว่ามีการเรียกใช้บรรทัดโค้ด
  • สีแดงทึบหมายความว่าไม่ได้ดำเนินการ
  • บรรทัดโค้ดที่มีทั้งสีแดงและสีเขียว เช่น บรรทัดที่ 3 ในภาพหน้าจอด้านบน หมายความว่ามีเพียงโค้ดบางส่วนในบรรทัดนั้นที่ทำงาน เช่น นิพจน์ไตรภาค เช่น var b = (a > 0) ? a : 0 จะมีทั้งสีแดงและสีเขียว

วิธีเปิดแท็บความครอบคลุม

  1. เปิดเมนูคำสั่ง
  2. เริ่มพิมพ์ Coverage แล้วเลือกแสดงการครอบคลุม

ภาพหน้าจอแบบเต็มหน้า

ดูวิธีจับภาพหน้าจอจากด้านบนในวิดีโอด้านล่าง ของหน้าเว็บโดยเลื่อนลงไปด้านล่างสุด

บล็อกคำขอ

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

บล็อก URL คำขอ

ข้ามขั้นตอนการรอการซิงค์

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

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

ป.ล. หากต้องการพัฒนาทักษะการแก้ไขข้อบกพร่อง โปรดดูเอกสารใหม่ๆ เหล่านี้

การเปลี่ยนแปลง

เมนูคำสั่งแบบรวม

เมื่อคุณเปิดเมนูคำสั่งเลย ให้สังเกตว่าคำสั่งของคุณ ที่มีอักขระมากกว่า (>) นำหน้า เนื่องจากคำสั่ง เมนูได้รวมอยู่ในเมนู เปิดไฟล์ ที่ Command+O (Mac) หรือ Control+O (Windows, Linux)

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

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

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

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

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

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