มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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() เลย 1 เส้น จากนั้น คุณจะถูกขัดจังหวะเพราะรหัส 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

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

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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