📋 محتويات الصفحة
📖 الوصف
Source Maps هي ملفات تربط بين الكود المجمع (minified/bundled) والكود المصدري الأصلي. تتيح للمطورين تصحيح أخطاء الكود الأصلي حتى بعد التجميع والتصغير. يتم إنشاء Source Maps تلقائياً من أدوات البناء مثل Webpack، Vite، و esbuild. تُعد أساسية لتصحيح أخطاء JavaScript و CSS في الإنتاج.
🎯 يستخدم في
مجالات استخدام هذه الأداة
Debugging Production Code
Error Tracking
Performance Profiling
Code Inspection
Error Reporting
✨ المميزات
أبرز مميزات هذه الأداة
Easy تربط الكود
easy إنتاج
easy أدوات البناء
easy Webpack/Vite
easy تصحيح
easy مجاني
easy مفتوح
⚠️ العيوب
نقاط يجب مراعاتها
يزيد الحجم
قد يكشف الكود
يحتاج تكوين
قد يكون بطيئاً
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// Webpack Configuration
// webpack.config.js
module.exports = {
devtool: 'source-map', // أو 'hidden-source-map'
mode: 'production'
}
// أو في Vite
// vite.config.js
export default {
build: {
sourcemap: true
}
}
// في Chrome DevTools
// 1. افتح Sources Panel
// 2. اختر الملف المصدري
// 3. ضع breakpoint
// أو من الكود
//# sourceMappingURL=app.js.map📚 أدوات أخرى في Debugging
قد يعجبك أيضاً
Charles Proxy
⭐HTTP Proxy/debugging tool
Chrome DevTools
⭐أدوات التطوير المدمجة في Chrome
Debug Proxy
⭐مكتبة Debug لـ Node.js
Firefox DevTools
⭐أدوات التطوير المدمجة في Firefox
Mitmproxy
⭐HTTP Proxy للتشفير والفحص
React DevTools
⭐أدوات التطوير لـ React