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

Bramus

Victor Porof

บทนำ

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

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

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

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

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

แม้ว่าการแมปแหล่งที่มาปิดช่องว่างนี้ไปแล้วบ้าง แต่ Chrome DevTools และระบบนิเวศจะทำประโยชน์ในส่วนนี้ได้มากขึ้น

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

โค้ดที่เขียนเทียบกับโค้ดที่ทําให้ใช้งานได้

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

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

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

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

"เฉพาะรหัสของฉัน"

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

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

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

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

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

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

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

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

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

โค้ดที่อยู่ในรายการละเว้นในลําดับชั้นไฟล์

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

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

รหัสในรายการที่ละเว้นในเมนู "การเปิดด่วน"

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

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

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

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

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

ตัวอย่างเช่น ต่อไปนี้คือตัวตั้งเวลาแบบง่ายมากในไฟล์ 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 Method ใหม่ชื่อ 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 ขอแนะนำให้ผู้เขียนเฟรมเวิร์กใช้ความสามารถใหม่ๆ เหล่านี้ กรณีศึกษา: การแก้ไขข้อบกพร่อง Angular ที่ดีขึ้นด้วยเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์มีคําแนะนําเกี่ยวกับวิธีใช้วิธีนี้