การแก้ไขข้อบกพร่องเว็บสมัยใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Bramus
Victor Porof
Victor Porof
X GitHub

เกริ่นนำ

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

ตัวอย่างเช่น คอมโพเนนต์ที่สร้างบนเฟรมเวิร์ก Angular จะเขียนใน TypeScript ด้วยเทมเพลต HTML ในส่วนเบื้องหลัง Angular CLI และ Webpack จะคอมไพล์ทุกอย่างเป็น JavaScript และรวมเป็นแพ็กเกจที่เรียกกันว่าส่งมาที่เบราว์เซอร์

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

  • คุณไม่ต้องการแก้ปัญหาโค้ด JavaScript ที่มีการลดขนาด แต่ต้องการที่จะดีบักโค้ด JavaScript เดิมของคุณ
  • เมื่อใช้ TypeScript คุณไม่ต้องการแก้ปัญหา JavaScript แต่คุณต้องการดีบักโค้ด TypeScript เดิมของคุณ
  • เมื่อใช้เทมเพลต เช่น Angular, Lit หรือ JSX คุณอาจไม่ต้องการแก้ไขข้อบกพร่องของ DOM ที่เป็นผลลัพธ์เสมอไป คุณอาจต้องแก้ไขข้อบกพร่องของคอมโพเนนต์เอง

โดยรวมแล้ว คุณอาจต้องการดีบักโค้ดด้วยตนเองตามที่เขียนไว้

แม้ว่าแผนที่แหล่งที่มาจะช่วยปิดช่องว่างนี้ไปได้ระดับหนึ่งแล้ว แต่เครื่องมือสําหรับนักพัฒนาเว็บใน Chrome และระบบนิเวศยังสามารถทำอะไรได้ในพื้นที่นี้อีกมากมาย

เรามาดูรายละเอียดกัน

โค้ดที่เขียนขึ้นกับโค้ดที่ทำให้ใช้งานได้แล้ว

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

ภาพหน้าจอของโครงสร้างไฟล์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งแสดงโค้ดที่ทำให้ใช้งานได้แล้ว

ซึ่งไม่ค่อยมีประโยชน์และมักจะเข้าใจยาก ในฐานะผู้เขียน คุณต้องการดูและแก้ไขข้อบกพร่องของโค้ดที่คุณเขียน ไม่ใช่โค้ดที่ทำให้ใช้งานได้แล้ว

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

ภาพหน้าจอของโครงสร้างไฟล์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งแสดงโค้ดที่เขียน

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

ภาพหน้าจอการตั้งค่าของเครื่องมือสำหรับนักพัฒนาเว็บ

"รหัสของฉันเท่านั้น"

เมื่อใช้ทรัพยากร Dependency หรือการต่อยอดจากเฟรมเวิร์ก ไฟล์ของบุคคลที่สามอาจขัดขวางการใช้งานได้ ส่วนใหญ่แล้วคุณต้องการเห็นเพียงโค้ดเท่านั้น ไม่ใช่โค้ดของไลบรารีของบุคคลที่สามที่ซ่อนอยู่ในโฟลเดอร์ node_modules

เพื่อชดเชยเครื่องมือนี้ เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดใช้การตั้งค่าพิเศษโดยค่าเริ่มต้น ซึ่งก็คือเพิ่มสคริปต์ของบุคคลที่สามที่รู้จักโดยอัตโนมัติลงในรายการละเว้นโดยอัตโนมัติ โดยคุณสามารถดูได้ในDevTools > DevTools > DevTools

ภาพหน้าจอการตั้งค่าของเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

ในฐานะผู้เขียน คุณไม่จำเป็นต้องดำเนินการใดๆ เพื่อเปิดใช้ลักษณะการทำงานใหม่นี้ การเปลี่ยนแปลงนี้ขึ้นอยู่กับกรอบการทำงาน

ละเว้นโค้ดที่อยู่ในรายการในสแต็กเทรซ

ที่หนึ่งที่ไฟล์ซึ่งอยู่ในรายการที่ละเว้นเหล่านี้จะไม่ปรากฏอีกต่อไปคือในสแต็กเทรซ ในฐานะผู้เขียน ตอนนี้คุณจะเห็นสแต็กเทรซที่เกี่ยวข้องมากขึ้น

ภาพหน้าจอของสแต็กเทรซในเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการดูเฟรมการเรียกใช้ทั้งหมดของสแต็กเทรซ ให้คลิกลิงก์แสดงเฟรมเพิ่มเติมได้ทุกเมื่อ

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

ภาพหน้าจอของโปรแกรมแก้ไขข้อบกพร่องแหล่งที่มาของเครื่องมือสำหรับนักพัฒนาเว็บขณะแก้ไขข้อบกพร่อง

โค้ดที่อยู่ในรายการละเว้นในแผนผังไฟล์

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

ภาพหน้าจอการตั้งค่าของเครื่องมือสำหรับนักพัฒนาเว็บ

ในโปรเจ็กต์ Angular ตัวอย่าง ระบบจะซ่อนโฟลเดอร์ node_modules และ webpack

ภาพหน้าจอของโครงสร้างไฟล์ใน Chrome DevTools ที่แสดงโค้ดที่เขียนขึ้น แต่ไม่แสดง Node_modules

โค้ดที่ละเว้นในเมนู "เปิดด่วน"

โค้ดรายการที่ละเว้นจะไม่เพียงซ่อนจากโครงสร้างไฟล์เท่านั้น แต่ยังซ่อนจากเมนู "Quick Open" (Control+P (Linux/Windows) หรือ Command+P (Mac)) ด้วย

ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาเว็บที่มีเมนู "เปิดด่วน"

การปรับปรุงเพิ่มเติมเกี่ยวกับสแต็กเทรซ

หลังจากครอบคลุมสแต็กเทรซที่เกี่ยวข้องแล้ว Chrome DevTools ก็แนะนําการปรับปรุงสแต็กเทรซให้ดียิ่งขึ้น

สแต็กเทรซที่ลิงก์

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

ลองดูตัวอย่างตัวจัดตารางเวลาที่ใช้ง่ายมากในไฟล์ framework.js สมมติต่อไปนี้

function makeScheduler() {
  const tasks = [];

  return {
    schedule(f) {
      tasks.push({ f });
    },

    work() {
      while (tasks.length) {
        const { f } = tasks.shift();
        f();
      }
    },
  };
}

const scheduler = makeScheduler();

function loop() {
  scheduler.work();
  requestAnimationFrame(loop);
};

loop();

... และวิธีที่นักพัฒนาซอฟต์แวร์อาจนำไปใช้ในโค้ดของตนเองในไฟล์ example.js

function someTask() {
  console.trace("done!");
}

function businessLogic() {
  scheduler.schedule(someTask);
}

businessLogic();

เมื่อเพิ่มเบรกพอยท์ภายในเมธอด someTask หรือเมื่อตรวจสอบการติดตามที่พิมพ์ในคอนโซล คุณจะไม่เห็นการกล่าวถึงการเรียกใช้ businessLogic() ที่เป็น "สาเหตุหลัก" ของการดำเนินการนี้

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

สแต็กเทรซของโค้ดที่เรียกใช้แบบไม่พร้อมกันบางส่วนที่ไม่มีข้อมูลเกี่ยวกับเวลาที่กำหนดเวลา

ด้วยฟีเจอร์ใหม่ชื่อ "การติดแท็กสแต็กอะซิงโครนัส" คุณจึงบอกเล่าเรื่องราวทั้งหมดได้โดยลิงก์โค้ดอะซิงโครนัสทั้ง 2 ส่วนเข้าด้วยกัน

Async Stack Tagging API ขอแนะนำเมธอด console ใหม่ที่ชื่อว่า console.createTask() ลายเซ็นของ API มีดังนี้

interface Console {
  createTask(name: string): Task;
}

interface Task {
  run<T>(f: () => T): T;
}

การเรียก console.createTask() จะส่งคืนอินสแตนซ์ Task ซึ่งคุณสามารถใช้เพื่อเรียกใช้เนื้อหาของงาน f ในภายหลังได้

// Task Creation
const task = console.createTask(name);

// Task Execution
task.run(f);

งานจะเชื่อมโยงระหว่างบริบทที่สร้างกับบริบทของฟังก์ชันอะซิงโครนัสที่จะดำเนินการ

เมื่อนำไปใช้กับฟังก์ชัน makeScheduler จากด้านบน โค้ดจะเป็นดังนี้

function makeScheduler() {
  const tasks = [];

  return {
    schedule(f) {
      const task = console.createTask(f.name);
      tasks.push({ task, f });
    },

    work() {
      while (tasks.length) {
        const { task, f } = tasks.shift();
        task.run(f); // instead of f();
      }
    },
  };
}

ด้วยเหตุนี้ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จึงแสดงสแต็กเทรซที่ดีขึ้นได้แล้ว

สแต็กเทรซของโค้ดที่เรียกใช้แบบไม่พร้อมกันบางส่วนที่มีข้อมูลเกี่ยวกับเวลาในกำหนดการ

โปรดสังเกตวิธีที่ businessLogic() รวมอยู่ในสแต็กเทรซแล้ว ไม่เพียงเท่านั้น งานนี้ยังมีชื่อที่คุ้นเคยกันชื่อ someTask แทนที่จะเป็น requestAnimationFrame ทั่วไปเหมือนก่อนหน้านี้

เฟรมการโทรที่เป็นมิตร

เฟรมเวิร์กมักจะสร้างโค้ดจากภาษาเทมเพลตทุกประเภทเมื่อสร้างโครงการ เช่น เทมเพลต Angular หรือ JSX ที่เปลี่ยนโค้ด HTML ให้เป็น JavaScript ธรรมดาที่ทำงานในเบราว์เซอร์ในที่สุด ในบางครั้ง ฟังก์ชันที่สร้างขึ้นเหล่านี้อาจเป็นชื่อที่ดูไม่ค่อยเป็นมิตร ซึ่งอาจเป็นชื่อตัวอักษรเดียวหลังจากถูกย่อให้สั้นลง หรือชื่อที่คลุมเครือหรือไม่คุ้นเคยแม้จะชื่อไม่ชัดก็ตาม

ในโปรเจ็กต์ตัวอย่าง ตัวอย่างนี้คือ AppComponent_Template_app_button_handleClick_1_listener ที่คุณเห็นในสแต็กเทรซ

ภาพหน้าจอของสแต็กเทรซที่มีชื่อฟังก์ชันที่สร้างขึ้นโดยอัตโนมัติ

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

ในฐานะผู้เขียน คุณไม่จำเป็นต้องดำเนินการใดๆ เพื่อเปิดใช้ลักษณะการทำงานใหม่นี้ การเปลี่ยนแปลงนี้ขึ้นอยู่กับกรอบการทำงาน

มองไปข้างหน้า

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

ทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สนับสนุนให้ผู้เขียนเฟรมเวิร์กนำความสามารถใหม่เหล่านี้ไปใช้ กรณีศึกษา: การแก้ไขข้อบกพร่องของมุมที่ดีกว่าด้วยเครื่องมือสำหรับนักพัฒนาเว็บให้คําแนะนําเกี่ยวกับวิธีติดตั้งใช้งาน