ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยส่วนขยายการแมปแหล่งที่มา ignoreList
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะแยกวิเคราะห์ช่อง ignoreList ในการแมปแหล่งที่มาเพื่อช่วยปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องของนักพัฒนาซอฟต์แวร์ ลองดูสแต็กเทรซต่อไปนี้ในคอนโซล เครื่องมือสำหรับนักพัฒนาเว็บจะซ่อนเฟรมของบุคคลที่สามทั้งหมดโดยอัตโนมัติ และแสดงเฉพาะเฟรมที่เกี่ยวข้องกับโค้ดของคุณ
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 ใช้ ดูการแมปแหล่งที่มาคืออะไรเพื่อเรียนรู้วิธีการแมป
เนื่องจากไฟล์ 2 ไฟล์ชื่อ node_modules/…/frameworks.js และ node_modules/.../library.js เป็นสคริปต์ของบุคคลที่สาม คุณสามารถระบุช่อง ignoreList เพื่อระบุตำแหน่งไฟล์ในช่อง sources เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะใช้ข้อมูลนี้เพื่อซ่อนเฟรมจากไฟล์ที่ละเว้นเหล่านั้น
ซึ่งจะมีผลกับสแต็กการโทรในแผงแหล่งที่มาระหว่างการแก้ไขข้อบกพร่องของเบรกพอยท์ด้วย
เครื่องมือสำหรับนักพัฒนาเว็บเปิดการตั้งค่าเพิ่มเติมไว้เบื้องหลังโดยค่าเริ่มต้น ซึ่งได้แก่ เพิ่มสคริปต์ของบุคคลที่สามที่รู้จักลงในรายการละเว้นโดยอัตโนมัติ คุณจะพบเครื่องมือนี้ได้ในเครื่องมือสำหรับนักพัฒนาเว็บ > การตั้งค่า > รายชื่อไม่สนใจ
เมื่อใช้ช่องการแมปแหล่งที่มา 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 DevTools อยากขอขอบคุณทีม Angular ที่ให้ความช่วยเหลืออันมีค่ายิ่งสำหรับความสำเร็จในการติดตั้งใช้งานนี้ ความพยายามและความร่วมมือของคุณเป็นสิ่งสำคัญยิ่ง และขอขอบคุณสำหรับความทุ่มเทของคุณ ขอขอบคุณทีม Angular ที่ช่วยให้เรื่องนี้เกิดขึ้นได้