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

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

Jecelyn Yeen

Chrome DevTools จะแยกวิเคราะห์ช่อง 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 DevTools จะใช้ข้อมูลนี้เพื่อซ่อนเฟรมจากไฟล์ที่ละเว้นเหล่านั้น

ซึ่งรวมถึงกองคิวการเรียกในแผงซอร์สระหว่างการแก้ไขข้อบกพร่องเบรกพอยต์ด้วย

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

เมื่อใช้ช่องการแมปแหล่งที่มา 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 ได้รับการทําเครื่องหมายเป็น "to ignore"

ซึ่งทำได้ผ่านการเปลี่ยนแปลงใน 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 อื่นๆ ใน DevTools โปรดดูกรณีศึกษา: การแก้ไขข้อบกพร่อง Angular ที่ดีขึ้นด้วยเครื่องมือสำหรับนักพัฒนาเว็บ

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