หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

ไฮไลต์

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

ฟีเจอร์ใหม่

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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