ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องของเว็บด้วยการแมปแหล่งที่มา
วันนี้ เราจะพูดถึงแผนที่แหล่งที่มา ซึ่งเป็นเครื่องมือสำคัญในการพัฒนาเว็บสมัยใหม่ที่จะทำให้แก้ไขข้อบกพร่องได้ง่ายขึ้นมาก ในบทความนี้ เราจะสำรวจข้อมูลพื้นฐานของการแมปแหล่งที่มา วิธีสร้าง และวิธีการปรับปรุงประสบการณ์การแก้ไขข้อบกพร่อง
ความต้องการการแมปแหล่งที่มา
เมื่อวันก่อนๆ เราสร้างเว็บแอปพลิเคชันด้วย HTML, CSS และ JavaScript เพียงอย่างเดียว และนำไฟล์เดียวกันไปไว้บนเว็บ
อย่างไรก็ตาม เนื่องจากปัจจุบันเรากำลังสร้างเว็บแอปพลิเคชันที่ซับซ้อนมากขึ้น เวิร์กโฟลว์การพัฒนาของคุณอาจเกี่ยวข้องกับการใช้เครื่องมือต่างๆ เช่น
- ภาษาและตัวประมวลผล HTML ล่วงหน้า: Pug, Nunjucks และ มาร์กดาวน์
- โปรเซสเซอร์ CSS ล่วงหน้า: SCSS, LESS, PostCSS
- เฟรมเวิร์ก JavaScript ได้แก่ Angular, React, Vue, Svelte
- เฟรมเวิร์กเมตา JavaScript: Next.js, Nuxt, Astro
- ภาษาโปรแกรมระดับสูง: TypeScript, Dart, CoffeeScript
- และอื่นๆ อีกมากมาย รายการจะดำเนินต่อไปก็ได้
เครื่องมือเหล่านี้ต้องมีกระบวนการบิลด์เพื่อแปลงโค้ดเป็น HTML มาตรฐาน, JavaScript และ CSS ที่เบราว์เซอร์เข้าใจได้ นอกจากนี้ เพื่อเพิ่มประสิทธิภาพ แนวทางปฏิบัติทั่วไปในการบีบอัด (เช่น การใช้ Terser เพื่อลดขนาดและแก้ไข JavaScript) และรวมไฟล์เหล่านี้เข้าด้วยกัน การลดขนาด และทำให้ไฟล์มีประสิทธิภาพมากขึ้นสำหรับเว็บ
ตัวอย่างเช่น การใช้เครื่องมือบิลด์ เราสามารถแปลงและบีบอัดไฟล์ TypeScript ต่อไปนี้ลงใน JavaScript บรรทัดเดียว คุณเล่นการสาธิตในที่เก็บ GitHub ของฉันได้
/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {
const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
console.log(num);
});
เวอร์ชันที่บีบอัดจะเป็น:
/* A compressed JavaScript version of the TypeScript demo: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));
อย่างไรก็ตาม การเพิ่มประสิทธิภาพนี้อาจทำให้แก้ไขข้อบกพร่องได้ยากขึ้น โค้ดที่บีบอัดพร้อมข้อมูลทุกอย่างในบรรทัดเดียวและชื่อตัวแปรที่สั้นลงอาจทำให้ยากต่อการระบุแหล่งที่มาของปัญหา ซึ่งเป็นที่ที่การแมปต้นฉบับจะเข้ามา โดยแมปโค้ดที่คอมไพล์แล้วกลับไปเป็นโค้ดต้นฉบับ
กำลังสร้างการแมปแหล่งที่มา
แผนที่แหล่งที่มาคือไฟล์ที่มีชื่อลงท้ายด้วย .map (เช่น example.min.js.map และ styles.css.map) ซึ่งสามารถสร้างโดยเครื่องมือสร้างส่วนใหญ่ เช่น Vite, webpack, Rollup, Parcel, esbuild และอื่นๆ
เครื่องมือบางอย่างอาจประกอบด้วยแผนที่แหล่งที่มาโดยค่าเริ่มต้น ขณะที่เครื่องมืออื่นๆ อาจต้องมีการกำหนดค่าเพิ่มเติมเพื่อสร้างแผนที่แหล่งที่มา
/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
ทำความเข้าใจการแมปแหล่งที่มา
ไฟล์แผนที่แหล่งที่มาเหล่านี้มีข้อมูลสำคัญเกี่ยวกับการแมปโค้ดที่คอมไพล์เข้ากับโค้ดต้นฉบับ ทำให้นักพัฒนาซอฟต์แวร์แก้ไขข้อบกพร่องได้อย่างง่ายดาย นี่คือตัวอย่างของการแมปแหล่งที่มา
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
หากต้องการทำความเข้าใจแต่ละช่องเหล่านี้ คุณสามารถอ่านข้อกำหนดการแมปแหล่งที่มา หรือบทความคลาสสิกนี้เกี่ยวกับโครงสร้างของการแมปแหล่งที่มา
แง่มุมที่สําคัญที่สุดของการแมปแหล่งที่มาคือช่อง mappings ซึ่งจะใช้สตริงที่เข้ารหัส VLQ ฐาน 64 เพื่อจับคู่เส้นและตำแหน่งในไฟล์ที่คอมไพล์เข้ากับไฟล์ต้นฉบับที่เกี่ยวข้อง แสดงภาพการแมปนี้ได้โดยใช้โปรแกรมสร้างภาพแผนที่แหล่งที่มา เช่น ภาพแผนที่แหล่งที่มาและการแสดงภาพแผนที่แหล่งที่มา
คอลัมน์สร้างทางด้านซ้ายจะแสดงเนื้อหาที่บีบอัด และคอลัมน์ต้นฉบับจะแสดงแหล่งที่มาต้นฉบับ
รหัสสีของ Visualizer แต่ละบรรทัดในคอลัมน์ต้นฉบับ และโค้ดที่สอดคล้องกันในคอลัมน์สร้าง
ส่วนการแมปจะแสดงการแมปโค้ดที่ถอดรหัสแล้ว ตัวอย่างเช่น ข้อความ 65-> 2:2 หมายถึง
- โค้ดที่สร้างขึ้น: คำว่า
constเริ่มต้นที่ตำแหน่ง 65 ในเนื้อหาที่บีบอัด - รหัสต้นฉบับ: คำว่า
constเริ่มต้นที่บรรทัดที่ 2 และคอลัมน์ที่ 2 ในเนื้อหาต้นฉบับ
วิธีนี้ทำให้นักพัฒนาซอฟต์แวร์ระบุความสัมพันธ์ระหว่างโค้ดที่ลดขนาดและโค้ดต้นฉบับได้อย่างรวดเร็ว ซึ่งทำให้การแก้ไขข้อบกพร่องเป็นไปอย่างราบรื่นยิ่งขึ้น
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เบราว์เซอร์จะใช้แผนที่แหล่งที่มาเหล่านี้เพื่อช่วยให้คุณระบุปัญหาการดีบักได้เร็วขึ้นจากเบราว์เซอร์ได้โดยตรง
รูปภาพแสดงวิธีที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ใช้การแมปแหล่งที่มาและแสดงการแมประหว่างไฟล์ต่างๆ
ส่วนขยายการแมปแหล่งที่มา
ส่วนขยายที่สนับสนุนการแมปแหล่งที่มา ส่วนขยายคือช่องที่กำหนดเองที่ขึ้นต้นด้วยรูปแบบการตั้งชื่อ x_ ตัวอย่างหนึ่งคือช่องส่วนขยาย x_google_ignoreList ที่ Chrome DevTools เสนอ โปรดดู x_google_ignoreList เพื่อเรียนรู้เพิ่มเติมว่าส่วนขยายเหล่านี้ช่วยให้คุณโฟกัสที่โค้ดได้อย่างไร
อาจยังไม่สมบูรณ์
ในตัวอย่างของเรา ตัวแปร greet ได้รับการเพิ่มประสิทธิภาพในระหว่างกระบวนการบิลด์ ระบบฝังค่าไว้ในเอาต์พุตสตริงสุดท้ายโดยตรง
ในกรณีนี้ เมื่อคุณแก้ไขข้อบกพร่องของโค้ด เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์อาจไม่สามารถอนุมานและแสดงค่าที่แท้จริงได้ นี่ไม่ใช่แค่ความท้าทายสำหรับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์เท่านั้น ทั้งยังทำให้การตรวจสอบและวิเคราะห์โค้ดทำได้ยากขึ้น
ปัญหานี้แก้ไขได้อย่างแน่นอน หนึ่งในวิธีคือการรวมข้อมูลขอบเขตไว้ในการแมปแหล่งที่มาเหมือนที่ภาษาโปรแกรมอื่นๆ ทำกับข้อมูลการแก้ไขข้อบกพร่อง
อย่างไรก็ตาม วิธีนี้ทำให้ทั้งระบบนิเวศต้องทำงานร่วมกันเพื่อปรับปรุงข้อกำหนดและการใช้งานแผนที่แหล่งที่มา มีการสนทนาที่ใช้งานอยู่เกี่ยวกับการปรับปรุงความสามารถในการแก้ไขข้อบกพร่องด้วยแผนที่แหล่งที่มา
เราต้องการปรับปรุงแผนที่แหล่งที่มาและทำให้การแก้ไขข้อบกพร่องเป็นเรื่องยุ่งยากน้อยลง