[{"data":1,"prerenderedAt":791},["ShallowReactive",2],{"guide-source-maps-minified-code":3},{"id":4,"title":5,"body":6,"date":782,"description":783,"extension":784,"meta":785,"navigation":786,"path":787,"readingTime":142,"seo":788,"stem":789,"__hash__":790},"guides\u002Fguides\u002Fsource-maps-minified-code.md","Source Maps and Minified Code: Debugging Production JavaScript",{"type":7,"value":8,"toc":771},"minimark",[9,18,23,30,157,164,168,171,177,243,248,309,314,338,351,355,473,479,483,486,517,527,533,537,540,543,565,622,625,629,632,635,656,659,697,703,707,730,734,755,759,767],[10,11,12,13,17],"p",{},"When you minify JavaScript for production, variable names shorten, whitespace disappears, and the entire file may collapse onto a single line. If an error occurs in that minified bundle, the stack trace points to meaningless positions like ",[14,15,16],"code",{},"app.min.js:1:4829",". Source maps solve this problem by providing a mapping back to your original source code.",[19,20,22],"h2",{"id":21},"what-source-maps-do","What Source Maps Do",[10,24,25,26,29],{},"A source map is a ",[14,27,28],{},".map"," file that records the relationship between each position in the minified output and the corresponding position in the original source files. When the browser encounters a source map (either referenced in the minified file or loaded separately), DevTools reconstructs the original file names, line numbers, and variable names for debugging.",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-json shiki shiki-themes github-light github-dark","{\n  \"version\": 3,\n  \"file\": \"app.min.js\",\n  \"sources\": [\"app.js\", \"utils.js\", \"api.js\"],\n  \"sourcesContent\": [\"\u002F\u002F original source...\"],\n  \"names\": [\"fetchData\", \"response\", \"data\"],\n  \"mappings\": \"AAAA,SAASA...\"\n}\n","json","",[14,38,39,48,64,78,104,117,140,151],{"__ignoreMap":36},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sVt8B","{\n",[40,49,51,55,58,61],{"class":42,"line":50},2,[40,52,54],{"class":53},"sj4cs","  \"version\"",[40,56,57],{"class":46},": ",[40,59,60],{"class":53},"3",[40,62,63],{"class":46},",\n",[40,65,67,70,72,76],{"class":42,"line":66},3,[40,68,69],{"class":53},"  \"file\"",[40,71,57],{"class":46},[40,73,75],{"class":74},"sZZnC","\"app.min.js\"",[40,77,63],{"class":46},[40,79,81,84,87,90,93,96,98,101],{"class":42,"line":80},4,[40,82,83],{"class":53},"  \"sources\"",[40,85,86],{"class":46},": [",[40,88,89],{"class":74},"\"app.js\"",[40,91,92],{"class":46},", ",[40,94,95],{"class":74},"\"utils.js\"",[40,97,92],{"class":46},[40,99,100],{"class":74},"\"api.js\"",[40,102,103],{"class":46},"],\n",[40,105,107,110,112,115],{"class":42,"line":106},5,[40,108,109],{"class":53},"  \"sourcesContent\"",[40,111,86],{"class":46},[40,113,114],{"class":74},"\"\u002F\u002F original source...\"",[40,116,103],{"class":46},[40,118,120,123,125,128,130,133,135,138],{"class":42,"line":119},6,[40,121,122],{"class":53},"  \"names\"",[40,124,86],{"class":46},[40,126,127],{"class":74},"\"fetchData\"",[40,129,92],{"class":46},[40,131,132],{"class":74},"\"response\"",[40,134,92],{"class":46},[40,136,137],{"class":74},"\"data\"",[40,139,103],{"class":46},[40,141,143,146,148],{"class":42,"line":142},7,[40,144,145],{"class":53},"  \"mappings\"",[40,147,57],{"class":46},[40,149,150],{"class":74},"\"AAAA,SAASA...\"\n",[40,152,154],{"class":42,"line":153},8,[40,155,156],{"class":46},"}\n",[10,158,159,160,163],{},"The ",[14,161,162],{},"mappings"," field uses Base64 VLQ encoding to represent position translations compactly. You rarely interact with it directly — your bundler generates it, and the browser consumes it.",[19,165,167],{"id":166},"generating-source-maps","Generating Source Maps",[10,169,170],{},"Every major bundler supports source map generation. The configuration varies slightly:",[10,172,173],{},[174,175,176],"strong",{},"Vite (Rollup under the hood):",[31,178,182],{"className":179,"code":180,"language":181,"meta":36,"style":36},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F vite.config.js\nexport default defineConfig({\n  build: {\n    sourcemap: true,              \u002F\u002F standard source maps\n    \u002F\u002F sourcemap: 'hidden',       \u002F\u002F generate .map files but omit the comment\n  }\n})\n","javascript",[14,183,184,190,206,211,225,233,238],{"__ignoreMap":36},[40,185,186],{"class":42,"line":43},[40,187,189],{"class":188},"sJ8bj","\u002F\u002F vite.config.js\n",[40,191,192,196,199,203],{"class":42,"line":50},[40,193,195],{"class":194},"szBVR","export",[40,197,198],{"class":194}," default",[40,200,202],{"class":201},"sScJk"," defineConfig",[40,204,205],{"class":46},"({\n",[40,207,208],{"class":42,"line":66},[40,209,210],{"class":46},"  build: {\n",[40,212,213,216,219,222],{"class":42,"line":80},[40,214,215],{"class":46},"    sourcemap: ",[40,217,218],{"class":53},"true",[40,220,221],{"class":46},",              ",[40,223,224],{"class":188},"\u002F\u002F standard source maps\n",[40,226,227,230],{"class":42,"line":106},[40,228,229],{"class":188},"    \u002F\u002F sourcemap: 'hidden',",[40,231,232],{"class":188},"       \u002F\u002F generate .map files but omit the comment\n",[40,234,235],{"class":42,"line":119},[40,236,237],{"class":46},"  }\n",[40,239,240],{"class":42,"line":142},[40,241,242],{"class":46},"})\n",[10,244,245],{},[174,246,247],{},"Webpack:",[31,249,251],{"className":179,"code":250,"language":181,"meta":36,"style":36},"\u002F\u002F webpack.config.js\nmodule.exports = {\n  devtool: 'source-map',        \u002F\u002F full source maps\n  \u002F\u002F devtool: 'hidden-source-map', \u002F\u002F no referencing comment\n  \u002F\u002F devtool: 'nosources-source-map', \u002F\u002F mappings only, no source content\n}\n",[14,252,253,258,275,289,297,305],{"__ignoreMap":36},[40,254,255],{"class":42,"line":43},[40,256,257],{"class":188},"\u002F\u002F webpack.config.js\n",[40,259,260,263,266,269,272],{"class":42,"line":50},[40,261,262],{"class":53},"module",[40,264,265],{"class":46},".",[40,267,268],{"class":53},"exports",[40,270,271],{"class":194}," =",[40,273,274],{"class":46}," {\n",[40,276,277,280,283,286],{"class":42,"line":66},[40,278,279],{"class":46},"  devtool: ",[40,281,282],{"class":74},"'source-map'",[40,284,285],{"class":46},",        ",[40,287,288],{"class":188},"\u002F\u002F full source maps\n",[40,290,291,294],{"class":42,"line":80},[40,292,293],{"class":188},"  \u002F\u002F devtool: 'hidden-source-map',",[40,295,296],{"class":188}," \u002F\u002F no referencing comment\n",[40,298,299,302],{"class":42,"line":106},[40,300,301],{"class":188},"  \u002F\u002F devtool: 'nosources-source-map',",[40,303,304],{"class":188}," \u002F\u002F mappings only, no source content\n",[40,306,307],{"class":42,"line":119},[40,308,156],{"class":46},[10,310,311],{},[174,312,313],{},"esbuild:",[31,315,319],{"className":316,"code":317,"language":318,"meta":36,"style":36},"language-bash shiki shiki-themes github-light github-dark","esbuild app.js --bundle --sourcemap --outfile=dist\u002Fapp.min.js\n","bash",[14,320,321],{"__ignoreMap":36},[40,322,323,326,329,332,335],{"class":42,"line":43},[40,324,325],{"class":201},"esbuild",[40,327,328],{"class":74}," app.js",[40,330,331],{"class":53}," --bundle",[40,333,334],{"class":53}," --sourcemap",[40,336,337],{"class":53}," --outfile=dist\u002Fapp.min.js\n",[10,339,159,340,343,344,346,347,350],{},[14,341,342],{},"hidden"," variant generates the ",[14,345,28],{}," file but omits the ",[14,348,349],{},"\u002F\u002F# sourceMappingURL=..."," comment from the minified output. This is important for production security — more on that below.",[19,352,354],{"id":353},"source-map-types-compared","Source Map Types Compared",[356,357,358,380],"table",{},[359,360,361],"thead",{},[362,363,364,368,371,374,377],"tr",{},[365,366,367],"th",{},"Devtool Value",[365,369,370],{},"Build Speed",[365,372,373],{},"Reconstruction Quality",[365,375,376],{},"Source Content Included",[365,378,379],{},"Production Safe",[381,382,383,406,421,438,456],"tbody",{},[362,384,385,391,394,397,400],{},[386,387,388],"td",{},[14,389,390],{},"source-map",[386,392,393],{},"Slow",[386,395,396],{},"Full",[386,398,399],{},"Yes",[386,401,402,403,405],{},"With ",[14,404,342],{}," variant",[362,407,408,413,415,417,419],{},[386,409,410],{},[14,411,412],{},"hidden-source-map",[386,414,393],{},[386,416,396],{},[386,418,399],{},[386,420,399],{},[362,422,423,428,430,433,436],{},[386,424,425],{},[14,426,427],{},"nosources-source-map",[386,429,393],{},[386,431,432],{},"Line\u002Fcolumn only",[386,434,435],{},"No",[386,437,399],{},[362,439,440,445,448,451,454],{},[386,441,442],{},[14,443,444],{},"cheap-module-source-map",[386,446,447],{},"Medium",[386,449,450],{},"Line-level",[386,452,453],{},"Yes ❌ partially",[386,455,435],{},[362,457,458,463,466,468,471],{},[386,459,460],{},[14,461,462],{},"eval-source-map",[386,464,465],{},"Fast",[386,467,396],{},[386,469,470],{},"Yes (in eval)",[386,472,435],{},[10,474,475,476,478],{},"For production, ",[14,477,412],{}," is the recommended choice. It gives you full debugging capability through error monitoring tools without exposing source maps to the public.",[19,480,482],{"id":481},"debugging-with-source-maps","Debugging With Source Maps",[10,484,485],{},"When source maps are available, browser DevTools shows original file names and line numbers automatically:",[487,488,489,493,503,510],"ol",{},[490,491,492],"li",{},"Open DevTools → Sources panel",[490,494,495,496,499,500,502],{},"DevTools detects the ",[14,497,498],{},"sourceMappingURL"," comment and fetches the ",[14,501,28],{}," file",[490,504,505,506,509],{},"The Sources panel displays the original files from the ",[14,507,508],{},"sources"," array",[490,511,512,513,516],{},"Breakpoints, ",[14,514,515],{},"console.log"," locations, and stack traces reference the original code",[10,518,519,520,522,523,526],{},"Without source maps, you see ",[14,521,16],{},". With them, you see ",[14,524,525],{},"api.js:45:12"," — exactly where the error occurred in your source.",[10,528,529,532],{},[174,530,531],{},"Important:"," Source maps only affect DevTools display. The browser still executes the minified code. Source maps do not change runtime behavior.",[19,534,536],{"id":535},"source-maps-in-error-monitoring","Source Maps in Error Monitoring",[10,538,539],{},"Source maps are critical for production error tracking. Services like Sentry, Bugsnag, and Datadog consume uploaded source maps to show readable stack traces for unhandled exceptions.",[10,541,542],{},"The typical workflow:",[487,544,545,550,556,562],{},[490,546,547,548],{},"Build your project with ",[14,549,412],{},[490,551,552,553,555],{},"Upload ",[14,554,28],{}," files to your error monitoring service via CLI or API",[490,557,558,559,561],{},"Deploy minified files to production (without ",[14,560,28],{}," references)",[490,563,564],{},"When an error occurs, the monitoring service matches the stack trace against uploaded source maps",[31,566,568],{"className":316,"code":567,"language":318,"meta":36,"style":36},"# Sentry CLI example\nsentry-cli releases files \u003Cversion> upload-sourcemaps .\u002Fdist \\\n  --url-prefix \"~\u002Fassets\u002Fjs\" \\\n  --strip-common-prefix\n",[14,569,570,575,607,617],{"__ignoreMap":36},[40,571,572],{"class":42,"line":43},[40,573,574],{"class":188},"# Sentry CLI example\n",[40,576,577,580,583,586,589,592,595,598,601,604],{"class":42,"line":50},[40,578,579],{"class":201},"sentry-cli",[40,581,582],{"class":74}," releases",[40,584,585],{"class":74}," files",[40,587,588],{"class":194}," \u003C",[40,590,591],{"class":74},"versio",[40,593,594],{"class":46},"n",[40,596,597],{"class":194},">",[40,599,600],{"class":74}," upload-sourcemaps",[40,602,603],{"class":74}," .\u002Fdist",[40,605,606],{"class":53}," \\\n",[40,608,609,612,615],{"class":42,"line":66},[40,610,611],{"class":53},"  --url-prefix",[40,613,614],{"class":74}," \"~\u002Fassets\u002Fjs\"",[40,616,606],{"class":53},[40,618,619],{"class":42,"line":80},[40,620,621],{"class":53},"  --strip-common-prefix\n",[10,623,624],{},"Keep source maps versioned with your releases. If the deployed bundle does not match the uploaded source map version, reconstructed stack traces will be incorrect.",[19,626,628],{"id":627},"security-considerations","Security Considerations",[10,630,631],{},"Exposing source maps publicly means anyone can view your original source code — including proprietary logic, API endpoints, and internal comments.",[10,633,634],{},"Risks of publicly accessible source maps:",[636,637,638,644,650],"ul",{},[490,639,640,643],{},[174,641,642],{},"Source code exposure"," — competitors or attackers can inspect your business logic",[490,645,646,649],{},[174,647,648],{},"API key discovery"," — comments may contain credentials mistakenly committed",[490,651,652,655],{},[174,653,654],{},"Attack surface mapping"," — attackers identify vulnerable code paths more easily",[10,657,658],{},"Mitigation strategies:",[636,660,661,672,681,690],{},[490,662,663,668,669,671],{},[174,664,665,666],{},"Use ",[14,667,412],{}," — no ",[14,670,498],{}," comment in the minified file",[490,673,674,680],{},[174,675,676,677,679],{},"Serve ",[14,678,28],{}," files on an internal domain"," — restrict access via authentication or IP allowlists",[490,682,683,689],{},[174,684,685,686,688],{},"Delete ",[14,687,28],{}," files from production servers"," — after uploading to your error monitoring service",[490,691,692,696],{},[174,693,665,694],{},[14,695,427],{}," — includes position mappings but omits original source content",[10,698,159,699,702],{},[14,700,701],{},"nosources"," variant is a middle ground: error monitoring tools still get correct line numbers, but nobody can read your actual code through the source map.",[19,704,706],{"id":705},"key-takeaways","Key Takeaways",[636,708,709,712,718,721,727],{},[490,710,711],{},"Source maps map minified code positions back to original source files for debugging",[490,713,714,715,717],{},"Generate them with ",[14,716,412],{}," for production — full fidelity without public exposure",[490,719,720],{},"Upload source maps to error monitoring services (Sentry, Bugsnag) for readable production stack traces",[490,722,723,724,726],{},"Never deploy ",[14,725,28],{}," files to public servers — they expose your original source code",[490,728,729],{},"Source maps only affect DevTools display; they do not change runtime behavior",[19,731,733],{"id":732},"related-guides","Related Guides",[636,735,736,743,749],{},[490,737,738],{},[739,740,742],"a",{"href":741},"\u002Fguides\u002Fjs-minification-guide","JavaScript Minification Guide: How It Works and Why It Matters",[490,744,745],{},[739,746,748],{"href":747},"\u002Fguides\u002Fjs-tree-shaking","Tree Shaking vs Minification",[490,750,751],{},[739,752,754],{"href":753},"\u002Fguides\u002Fjs-performance-optimization","JavaScript Performance Optimization",[19,756,758],{"id":757},"try-it-yourself","Try It Yourself",[10,760,761,762,766],{},"See minification in action with our free ",[739,763,765],{"href":764},"\u002Ftools\u002Fjs-minifier","JavaScript Minifier",". Paste your code, compare the original and minified output, and understand why source maps are essential for production debugging.",[768,769,770],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":36,"searchDepth":50,"depth":50,"links":772},[773,774,775,776,777,778,779,780,781],{"id":21,"depth":50,"text":22},{"id":166,"depth":50,"text":167},{"id":353,"depth":50,"text":354},{"id":481,"depth":50,"text":482},{"id":535,"depth":50,"text":536},{"id":627,"depth":50,"text":628},{"id":705,"depth":50,"text":706},{"id":732,"depth":50,"text":733},{"id":757,"depth":50,"text":758},"2026-05-28","Understand how source maps bridge the gap between minified production code and your original source — setup, security, and debugging workflows.","md",{"immutable":786},true,"\u002Fguides\u002Fsource-maps-minified-code",{"title":5,"description":783},"guides\u002Fsource-maps-minified-code","xR8ycJswjSJf4CyiVylgGVl_pqLFej2qguOwhtiv2Vg",1780401337087]