ส่วนขยายการแมปแหล่งที่มา ignoreList

ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยส่วนขยายแผนที่แหล่งที่มา ignoreList

Jecelyn Yeen

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

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

ignoreList คืออะไร

ส่วนขยายแผนที่แหล่งที่มาคือช่องเพิ่มเติมที่จัดเก็บข้อมูลเสริมเกี่ยวกับแผนที่แหล่งที่มา ช่องดังกล่าวจะมีคำนำหน้าเป็น x_

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

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

ช่อง sources จะแสดงรายการแหล่งที่มาเดิมที่รายการ mappings ใช้ ดูการแมปแหล่งที่มาคืออะไรเพื่อดูวิธีการทำงานของการแมป

เนื่องจากไฟล์ node_modules/…/frameworks.js และ node_modules/.../library.js เป็นสคริปต์ของบุคคลที่สาม คุณจึงระบุฟิลด์ ignoreList เพื่อระบุตำแหน่งในฟิลด์ sources ได้ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะใช้ข้อมูลนี้เพื่อซ่อนเฟรมจากไฟล์ที่ละเว้นเหล่านั้น

รูปภาพแสดงสแต็กเทรซก่อนและหลังขยายสแต็กเทรซใน Console เฟรมที่ละเว้นจะเป็นสีเทาเมื่อขยาย

นอกจากนี้ยังใช้กับสแต็กการเรียกใช้ในแผงแหล่งที่มาระหว่างการแก้ไขข้อบกพร่องของเบรกพอยท์ด้วย

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

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

วิธีป้อนข้อมูล ignoreList

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

ในทางกลับกัน เครื่องมือสร้างอย่าง Vite และ Rollup มีการตั้งค่าให้กำหนดค่าได้ นอกจากนี้ยังมีปลั๊กอิน webpack สำหรับการดำเนินการดังกล่าวด้วย

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

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

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

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

กรณีศึกษา: การใช้งาน Nuxt และ Angular

ลองดูกรณีศึกษา 2 รายการต่อไปนี้

ignoreList ใน Nuxt

ตั้งแต่ Nuxt v3.3.1 เป็นต้นไป เนื้อหาของ node_modules และ Nuxt buildDir ได้รับการทำเครื่องหมายเป็น "ให้โปรแกรมแก้ไขข้อบกพร่องละเว้น"

ซึ่งทำได้โดยการเปลี่ยนแปลงการกำหนดค่าบิลด์ของ Nuxt โดยใช้ Vite และ Rollup ดังนี้

/* vite.config.ts */

const ctx: ViteBuildContext = {
  config: vite.mergeConfig(
  build: {
    rollupOptions: {
      output: {
        sourcemapIgnoreList: (relativeSourcePath) => {
          return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
        },
      }
})

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

ignoreList ใน Angular

ตั้งแต่ Angular v14.1.0 เป็นต้นไป เนื้อหาในโฟลเดอร์ node_modules และ webpack จะได้รับการทำเครื่องหมายเป็น "ให้ละเว้น"

ซึ่งทำได้โดยการเปลี่ยนแปลงใน angular-cli ด้วยการสร้างปลั๊กอินที่เชื่อมโยงกับโมดูล Compiler ของ webpack

ปลั๊กอิน webpack ที่วิศวกรของเราสร้างขึ้นจะเชื่อมโยงกับระยะ PROCESS_ASSETS_STAGE_DEV_TOOLING และป้อนข้อมูลในช่อง ignoreList ในแผนที่แหล่งที่มาด้วยชิ้นงานสุดท้ายที่ webpack สร้างขึ้นและเบราว์เซอร์โหลด

const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];

for (const [index, path] of map.sources.entries()) {
  if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
    ignoreList.push(index);
  }
}

map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));

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

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