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

Bramus

Victor Porof

บทนำ

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

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

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

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

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

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

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

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

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

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

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

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

"Just my code"

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

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

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

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

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

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

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

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

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

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

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

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

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

โค้ดในรายการที่ละเว้นจะซ่อนอยู่จากทั้งโครงสร้างไฟล์และเมนู "เปิดด่วน" (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 ที่ดีขึ้นด้วยเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์มีคําแนะนําเกี่ยวกับวิธีใช้วิธีนี้