หน้านี้ได้รับการแปลโดย 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+O (Mac) หรือ Control+O (Windows, Linux)

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

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

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

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

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