ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บใน 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)
},
}
})
ทีมเครื่องมือสำหรับนักพัฒนาเว็บต้องการแสดงความขอบคุณต่อทีม 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 ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่กรณีศึกษา: Better Angular Debugging ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
ทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อยากขอขอบคุณทีม Angular ที่ให้ความร่วมมืออันมีค่าในการทํางานของการติดตั้งใช้งานนี้ ความพยายามและความร่วมมือของคุณเป็นสิ่งสำคัญและเราขอขอบคุณสำหรับความทุ่มเทของคุณ ขอขอบคุณทีม Angular ที่ทำให้สิ่งนี้เป็นจริง