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

Kayce Basques

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

ไฮไลต์

ฟีเจอร์ใหม่

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

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

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

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

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

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

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

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

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

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

ดูวิดีโอด้านล่างนี้เพื่อเรียนรู้วิธีถ่ายภาพหน้าจอจากด้านบนของหน้าเว็บถึงด้านล่าง

บล็อกคำขอ

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

บล็อก URL คำขอ

ข้าม async await

ก่อนหน้านี้ การพยายามทำตามโค้ดทีละขั้นตอนอย่างข้อมูลโค้ดด้านล่างเป็นเรื่องที่น่าปวดหัว คุณกำลังอยู่ใน 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 ได้รวมเข้ากับเมนูเปิดไฟล์ ซึ่งก็คือ Command+O (Mac) หรือ Control+O (Windows, Linux)

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

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

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

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

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

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