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

Kayce Basques
Kayce Basques
X GitHub

ยินดีต้อนรับสู่บันทึกประจำรุ่นของเครื่องมือสำหรับนักพัฒนาเว็บอีกฉบับ ดูวิดีโอด้านล่างหรืออ่านต่อเพื่อดูว่ามีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใน 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 หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

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

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

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

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