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

Kayce Basques

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

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

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

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

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

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

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