☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

{"type":"doc","content":[{"type":"paragraph","attrs":{"id":"26e292c5-1bea-4720-a506-72322ab5e849","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false}},{"type":"heading","attrs":{"id":"8b1c1392-f2e9-4646-8e73-788af076a583","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"一、什么是源映射？为什么我们需要它？"}]},{"type":"heading","attrs":{"id":"39a8c33d-e7b3-4ee6-883b-4b1a39061d6f","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"1.1 现实中的调试困境"}]},{"type":"paragraph","attrs":{"id":"36455969-4c03-4fc8-8fcc-203adce6f577","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"想象一下这样的场景：你在开发一个复杂的web应用，代码经过babel转换、webpack打包、terser压缩后，最终生成一个只有一行的javascript文件。突然，用户报告了一个错误："}]},{"type":"codeblock","attrs":{"id":"ed19e991-77c7-4226-84a7-2b709ae059d4","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"错误发生在 bundle.min.js:1:27698"}]},{"type":"paragraph","attrs":{"id":"b928aded-5400-46cd-9038-1cb95b8d82fd","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"面对这个错误位置，你该怎么办？在"},{"type":"text","marks":[{"type":"bold"}],"text":"一行几万个字符"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"的压缩代码中，找到第27698个字符的位置，这几乎是不可能完成的任务。"}]},{"type":"heading","attrs":{"id":"06add336-1894-4aee-8fde-d1cf0463f354","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"1.2 源映射的解决方案"}]},{"type":"paragraph","attrs":{"id":"d0b51d78-cdae-4a06-8a46-1390dd207613","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"源映射（source maps）就是解决这个问题的"},{"type":"text","marks":[{"type":"bold"}],"text":"魔法工具"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"。它建立了一个\"翻译字典\"，让浏览器能够："}]},{"type":"bulletlist","attrs":{"id":"3c94a2fd-bfbc-4673-838d-491e55b362f8","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"a6a8e6e6-1a09-4f48-a06a-edfafd3b8f89"},"content":[{"type":"paragraph","attrs":{"id":"46027589-677e-43ea-a2e7-5946ac60abe7","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"将压缩代码中的错误位置转换为原始源码中的准确位置"}]}]},{"type":"listitem","attrs":{"id":"aa729b37-d05b-4b6f-84ed-7a835e566a07"},"content":[{"type":"paragraph","attrs":{"id":"0fdfcaad-73bc-4b3e-bcba-2dd1a116f3ea","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"在开发者工具中显示原始的、可读的源代码"}]}]},{"type":"listitem","attrs":{"id":"9f520a0c-f7e2-492b-9772-4524ca233c3b"},"content":[{"type":"paragraph","attrs":{"id":"e7444440-b651-422e-822b-dc2edec272ee","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"支持在原始代码中设置断点和调试"}]}]}]},{"type":"paragraph","attrs":{"id":"1f93d826-f947-4ceb-a244-2b9ef90cd3c0","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"有了源映射，上面的错误信息变成了："}]},{"type":"codeblock","attrs":{"id":"80c4464d-a79c-4521-9e19-7af84d29fa6c","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"错误发生在 src/components/userprofile.js:45:12"}]},{"type":"paragraph","attrs":{"id":"0349add5-f9e9-46c4-9a19-953c019cfa81","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"瞬间就能定位到问题所在！"}]},{"type":"heading","attrs":{"id":"01c9d790-163c-4449-b9f7-166675855fc6","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"二、源映射在构建流程中的工作方式"}]},{"type":"heading","attrs":{"id":"8b1f1102-2a7a-4a64-91ca-942d427b2598","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"2.1 现代前端构建的三个阶段"}]},{"type":"heading","attrs":{"id":"5bcece24-384f-43f6-a289-594a77f78a2d","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第一阶段：转换（transformation）"}]},{"type":"paragraph","attrs":{"id":"a35079d5-40a7-4702-a281-166ed6f1b193","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"输入"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：es6+ javascript、jsx等"}]},{"type":"paragraph","attrs":{"id":"9d49ab32-2d57-4612-891c-c998c86a24dd","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"输出"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：浏览器兼容的javascript"}]},{"type":"paragraph","attrs":{"id":"47d92bf2-b04d-46e9-945e-c1ba81433f61","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"工具"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：babel"}]},{"type":"paragraph","attrs":{"id":"4e804d8d-aa79-4ae0-8ad4-bedfaeac5377","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"源映射作用"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：将转换后的js映射回原始代码"}]},{"type":"codeblock","attrs":{"id":"06ee911c-6132-4960-9f61-479c4e164810","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 原始es6+代码（math.js）export const add = (a, b) =u003e { console.log('adding numbers:', a, b); return a + b;};\export const multiply = (a, b) =u003e a * b;"}]},{"type":"paragraph","attrs":{"id":"b1fb2bd8-7c83-419b-acf9-961e7ff29264","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"babel转换后："}]},{"type":"codeblock","attrs":{"id":"f8842f20-3e54-471e-81a0-dff7da0c400c","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 转换后的javascript代码（math-compiled.js）\\"use strict\";\object.defineproperty(exports, \"__esmodule\", { value: true});exports.add = void 0;exports.multiply = multiply;\var add = function add(a, b) { console.log('adding numbers:', a, b); return a + b;};\exports.add = add;\var multiply = function multiply(a, b) { return a * b;};//# sourcemappingurl=math-compiled.js.map"}]},{"type":"heading","attrs":{"id":"9df4af64-8d42-451d-9d40-fa7b17e616fe","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第二阶段：打包（bundling）"}]},{"type":"paragraph","attrs":{"id":"c23bf43d-eb47-4de0-aa9e-af52cdc4952b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"输入"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：多个js模块。"}]},{"type":"paragraph","attrs":{"id":"8b38b3f7-f8f2-4407-b3fc-ce1534dc5984","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"输出"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：单个或多个打包文件。"}]},{"type":"paragraph","attrs":{"id":"b6e9e24d-68f2-4a94-a7d1-c8d8ba3e95a7","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"工具"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：webpack、rollup、vite。"}]},{"type":"paragraph","attrs":{"id":"389e5058-10a6-495c-9957-f6e840c8647d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"源映射作用"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：合并各个模块的源映射。"}]},{"type":"heading","attrs":{"id":"fc3e1ca1-da88-49b3-bbea-f38c247def04","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第三阶段：压缩（minification）"}]},{"type":"paragraph","attrs":{"id":"13be4dcb-829e-4f5e-b3b5-757a7789d536","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"输入"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：可读的javascript"}]},{"type":"paragraph","attrs":{"id":"a28b6f1b-fa92-41f2-8dfa-973e72d70757","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"输出"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：优化的压缩代码"}]},{"type":"paragraph","attrs":{"id":"0b8d210a-64da-48a6-8e0b-473121522615","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"工具"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：terser、uglifyjs。"}]},{"type":"paragraph","attrs":{"id":"e9db2ea6-d6aa-4227-813b-ae5a193ba4ef","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"源映射作用"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：将压缩代码映射回打包前的代码"}]},{"type":"codeblock","attrs":{"id":"4a3d6b51-22a8-4285-9125-0f5cd7006f06","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 压缩后的代码（bundle.min.js）!function(e,t){e.exports=function(e,t){return console.log(\"adding numbers:\",e,t),e+t}}(this,window);//# sourcemappingurl=bundle.min.js.map"}]},{"type":"heading","attrs":{"id":"444df706-3974-4dfd-891f-b1e2bafcd337","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"2.2 源映射的传递链"}]},{"type":"paragraph","attrs":{"id":"aa4e99db-f04a-435b-820d-063ed9241e74","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"源映射在整个构建流程中像"},{"type":"text","marks":[{"type":"bold"}],"text":"接力棒"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"一样传递："}]},{"type":"codeblock","attrs":{"id":"eef210ce-9d1d-4add-a44c-0acbdac2a6fa","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"原始js源码 → (转换+源映射1) → 兼容js → (打包+合并源映射) → 打包文件 → (压缩+源映射2) → 最终代码"}]},{"type":"paragraph","attrs":{"id":"8a6fb21a-aa24-47e0-a5a6-1604063e16b5","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"每个阶段都生成源映射，最终形成一个完整的映射链条。"}]},{"type":"heading","attrs":{"id":"436d43d6-c708-4400-8f6c-265ae32d1cb7","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"三、源映射文件格式详解"}]},{"type":"heading","attrs":{"id":"f4330327-9113-469d-b1bb-7718bedec2c1","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"3.1 完整的源映射文件结构"}]},{"type":"paragraph","attrs":{"id":"9e4446bf-cfbb-4fd7-875a-641c9309112c","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"让我们看一个真实的源映射文件示例："}]},{"type":"codeblock","attrs":{"id":"b29e0418-ed53-40ed-9bd2-91f68e8b5518","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"{ \"version\": 3, \"file\": \"bundle.min.js\", \"sourceroot\": \"\", \"sources\": [ \"src/math.js\", \"src/calculator.js\", \"src/main.js\" ], \"sourcescontent\": [ \"export const add = (a, b) =u003e { console.log('adding numbers:', a, b); return a + b; };\", \"import { add } from './math.js'; export function calculatetotal(...numbers) {...}\", \"import { calculatetotal } from './calculator.js'; const result = calculatetotal(1,2,3);\" ], \"names\": [\"add\", \"multiply\", \"calculatetotal\", \"numbers\", \"result\", \"console\", \"log\"], \"mappings\": \"aaaa,saasa,iaai,caacc,eaac;eacrb,oaao,iaai;aacb;;acaa,oaao,saasc...\"}"}]},{"type":"heading","attrs":{"id":"548382c3-f661-4d5e-81c8-11588f26c86f","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"3.2 每个字段的详细解释"}]},{"type":"heading","attrs":{"id":"38bb0301-12ef-4911-9ca9-39e5d149db17","textalign":"inherit","indent":0,"level":4,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"version（版本号）"}]},{"type":"bulletlist","attrs":{"id":"be6e7ee8-157c-4f34-991c-b5a22be28423","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"3741fa93-dd63-4868-a6e2-94092ea9d43c"},"content":[{"type":"paragraph","attrs":{"id":"be3a67b9-4ea1-44ee-a9a4-c07e217bd0be","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"当前总是为3。"}]}]},{"type":"listitem","attrs":{"id":"e143114a-3665-47de-846c-7b524e67e8d3"},"content":[{"type":"paragraph","attrs":{"id":"8c6e52d6-1967-4917-b47d-db548f357876","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"表示使用的源映射规范版本。"}]}]}]},{"type":"heading","attrs":{"id":"9872b6d6-b88c-41e1-b7de-3ef56d155d6b","textalign":"inherit","indent":0,"level":4,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"file（文件名）"}]},{"type":"bulletlist","attrs":{"id":"6a7bb88c-75fc-4552-8ab9-5433688e7102","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"94f76371-04ef-4780-9069-e83fa84ff6aa"},"content":[{"type":"paragraph","attrs":{"id":"641207e9-192a-49b9-8f81-c24d13a5f056","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"这个源映射对应的生成文件名称。"}]}]},{"type":"listitem","attrs":{"id":"e0c02f0d-c17e-4d12-ace6-212de26247f8"},"content":[{"type":"paragraph","attrs":{"id":"87b4eb04-0330-45da-9529-e1e01c0a324e","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"例如：\"bundle.min.js\"。"}]}]}]},{"type":"heading","attrs":{"id":"c49e453d-81bf-4712-80d0-736ce9756498","textalign":"inherit","indent":0,"level":4,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"sources（源文件列表）"}]},{"type":"bulletlist","attrs":{"id":"2d2342d2-dd86-4107-9276-de71dba5c4dd","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"a69d54be-dc14-45d8-b1f4-5cb8111592ad"},"content":[{"type":"paragraph","attrs":{"id":"0a8256bd-0c74-4945-8bef-7b64c31c5ee1","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"数组，包含所有原始源文件的路径。"}]}]},{"type":"listitem","attrs":{"id":"ae78bc33-c775-4861-abe8-0fe84fb7fcc0"},"content":[{"type":"paragraph","attrs":{"id":"17db2f04-4d17-472a-8302-9f4c0ff5df43","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"路径相对于源映射文件的位置或结合sourceroot使用。"}]}]}]},{"type":"heading","attrs":{"id":"d7465983-3c26-472b-af0a-e92b17ac3c4c","textalign":"inherit","indent":0,"level":4,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"sourcescontent（源文件内容）"}]},{"type":"bulletlist","attrs":{"id":"487f5be9-9a40-4ba4-8189-fb8800a01d2c","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"6abc765a-dd2a-40bf-93c1-82a48f9de253"},"content":[{"type":"paragraph","attrs":{"id":"2038457b-b6d0-442d-bb50-c8d8771f0a25","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"可选字段"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"，包含原始源代码的具体内容。"}]}]},{"type":"listitem","attrs":{"id":"6e9ec377-e35b-4688-abde-f40fcc89085a"},"content":[{"type":"paragraph","attrs":{"id":"bc51c907-7c1f-43db-863e-8b67b4837b64","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"如果提供，开发者工具即使找不到源文件也能显示源码。"}]}]},{"type":"listitem","attrs":{"id":"72db96ec-b842-42ea-8eb5-ddf5cec7ae87"},"content":[{"type":"paragraph","attrs":{"id":"514ebcd6-68f0-49e7-ab99-a5b50fc8ff23","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"生产环境通常省略以减小文件体积。"}]}]}]},{"type":"heading","attrs":{"id":"44ae621c-b9ff-40c5-9581-5fb22f391012","textalign":"inherit","indent":0,"level":4,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"names（名称列表）"}]},{"type":"bulletlist","attrs":{"id":"531055ce-5608-4eb9-8854-06ab31af6be9","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"8ac1eea0-2ef5-49cb-80fe-9fac11ae9174"},"content":[{"type":"paragraph","attrs":{"id":"f6a80120-384d-4653-a826-7e713aaa5ecb","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"数组，包含所有可能被重命名的标识符。"}]}]},{"type":"listitem","attrs":{"id":"58bdd8d0-a6ef-47d3-bfc1-0a7b85f2b96c"},"content":[{"type":"paragraph","attrs":{"id":"587aacc4-283a-4b34-a02f-732d60d2941a","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"包括变量名、函数名、参数名等。"}]}]},{"type":"listitem","attrs":{"id":"c8fb9d0b-d781-4fc4-a612-9466d50668b6"},"content":[{"type":"paragraph","attrs":{"id":"1a928a54-3e61-4642-a2aa-11af9b9b18a2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"压缩工具会将长名称改为短名称，这里保存原始名称。"}]}]}]},{"type":"heading","attrs":{"id":"09f47a34-c79c-4ec8-a7da-7b66f5500e80","textalign":"inherit","indent":0,"level":4,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"mappings（映射数据）"}]},{"type":"bulletlist","attrs":{"id":"8a354a2d-52d4-40cd-a0ca-7f987405a24f","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"e1413f62-32c8-4aa5-8154-5aa091ed72ca"},"content":[{"type":"paragraph","attrs":{"id":"7002c546-751e-4ea2-b977-b24b2e3c5b58","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"最重要的字段"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"，包含所有位置映射信息。"}]}]},{"type":"listitem","attrs":{"id":"8bdd639d-98d7-450b-9953-72739711057d"},"content":[{"type":"paragraph","attrs":{"id":"88623a82-5b05-4552-a70d-213da3586403","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"使用vlq编码的字符串，极大压缩了数据体积。"}]}]}]},{"type":"heading","attrs":{"id":"aaf23c50-302f-4deb-89d3-b2dfaa7fa1f9","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"四、映射数据的编码魔法：vlq技术详解"}]},{"type":"heading","attrs":{"id":"c8022016-37c0-4a87-bf31-7bff7fb372f6","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"4.1 为什么需要特殊编码？"}]},{"type":"paragraph","attrs":{"id":"a0b74b26-7f92-401a-92c0-b8ac37211c57","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"考虑一个真实的场景：一个大型应用压缩后可能有"},{"type":"text","marks":[{"type":"bold"}],"text":"几十万"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"个字符位置需要映射。如果每个映射都用json数组表示："}]},{"type":"codeblock","attrs":{"id":"6a89a93f-3350-4fd3-b5dd-81fe46759d18","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"[[0,0,0,0], [15,0,0,15], [23,0,0,23], [45,0,1,12], ...]"}]},{"type":"paragraph","attrs":{"id":"c173b233-9e40-4cf3-b34d-1fa65c3b29ec","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"这样的源映射文件可能比原始代码还要大！这就是vlq编码要解决的问题。"}]},{"type":"heading","attrs":{"id":"eac97477-0613-479e-a8e5-2b0acc53b8a6","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"4.2 vlq编码的四步过程"}]},{"type":"paragraph","attrs":{"id":"b5adecc7-429c-441d-929d-bae6b5e03600","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"让我们通过编码数字"},{"type":"text","marks":[{"type":"code"}],"text":"137"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"来理解vlq编码："}]},{"type":"heading","attrs":{"id":"fc24c4fb-b974-4838-8422-60fc225a2f99","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第一步：将数字转换为二进制"}]},{"type":"codeblock","attrs":{"id":"dfafae7e-0f10-4002-82ec-e30bc66b573a","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"137 → 二进制 10001001"}]},{"type":"heading","attrs":{"id":"0a8ccd67-c15c-4d89-9d52-692fe85cec1c","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第二步：添加符号位（正负号）"}]},{"type":"bulletlist","attrs":{"id":"e5a85d52-af2e-49a3-b303-c56e05ac9e21","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"74060140-c672-4eee-ad7f-0535d3f495b0"},"content":[{"type":"paragraph","attrs":{"id":"6382d46e-bdd8-4a94-ab5f-b68c09f0f328","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"正数：在末尾加0"}]}]},{"type":"listitem","attrs":{"id":"d7394f81-7cc1-4527-9696-fa0212253bea"},"content":[{"type":"paragraph","attrs":{"id":"e3d4ad8b-2e7a-4384-aa5f-7d1be6344b0a","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"负数：在末尾加1（然后取绝对值的二进制）"}]}]}]},{"type":"codeblock","attrs":{"id":"e438c26a-59ec-464e-8eec-5429cd58b0cc","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"137是正数 → 10001001 + 0 = 100010010"}]},{"type":"heading","attrs":{"id":"8733ccfb-64af-4b65-b666-5f9335bf3186","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第三步：分组成5位块，从右向左"}]},{"type":"codeblock","attrs":{"id":"b662e2bc-4969-4314-b913-d4534ba0731b","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"100010010 → 从右向左5位一组：最右边: 10010 (18)中间: 00010 (2) 最左边: 00001 (1) - 只有4位，前面补0"}]},{"type":"heading","attrs":{"id":"54b02a9b-2e9b-4c76-afdd-6b8d759a6d7a","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第四步：添加连续位并转换为base64"}]},{"type":"bulletlist","attrs":{"id":"88a8b1d4-0613-4c7b-95df-e5f7d0b34315","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"a4f23b50-72fd-478c-aa78-3086b39ca637"},"content":[{"type":"paragraph","attrs":{"id":"bc789f53-0a4d-4667-8163-220810a3c439","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"每个6位组：连续位(1位) + 数据位(5位)"}]}]},{"type":"listitem","attrs":{"id":"26d467c7-acf0-456f-ba2c-e486fd6f72dc"},"content":[{"type":"paragraph","attrs":{"id":"e775cec7-de29-4295-96c2-5eb70a041415","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"连续位：1表示还有后续字符，0表示这是最后一个"}]}]},{"type":"listitem","attrs":{"id":"7fc867b7-0a46-48e6-a812-7e64c696cf94"},"content":[{"type":"paragraph","attrs":{"id":"21befecf-f66c-4513-9c08-9cedae4326b2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"然后转换为base64字符"}]}]}]},{"type":"codeblock","attrs":{"id":"2c91a3dd-a2d0-419f-b6e1-16163b7efe45","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"第一组: 100001 (33) → base64[33] = 'h'第二组: 100010 (34) → base64[34] = 'i' 第三组: 0010 (2) → base64[2] = 'c'\结果：137 → \"ihc\""}]},{"type":"heading","attrs":{"id":"bd1b44c8-335d-4f01-8a3e-031629e84341","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"4.3 实际映射示例解析"}]},{"type":"paragraph","attrs":{"id":"4a84fce0-8e88-4534-8749-8088a207d602","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"让我们解码一个真实的映射段："},{"type":"text","marks":[{"type":"code"}],"text":"\"saasa\""}]},{"type":"paragraph","attrs":{"id":"c6f2885a-3722-4ece-a236-9989a2bf66e2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"这个段表示："},{"type":"text","marks":[{"type":"code"}],"text":"[9,0,0,9,0]"}]},{"type":"paragraph","attrs":{"id":"8830a8a0-d7c1-442f-ba27-7b2909b7ccce","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"分解说明："}]},{"type":"bulletlist","attrs":{"id":"ebfa1278-65b5-471f-988f-284748642bb8","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"1de5d8db-86e3-4c90-9e3e-112299de4f7b"},"content":[{"type":"paragraph","attrs":{"id":"af241924-48f1-4c36-8871-a171a86305fe","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"第一个值9"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：在生成文件中，这个位置比上一个位置右移9列。"}]}]},{"type":"listitem","attrs":{"id":"d97382c8-52d7-4257-b6c6-cba1ccdf4cc1"},"content":[{"type":"paragraph","attrs":{"id":"16f3ce6d-f158-4813-bf56-0d2e23c2d1ca","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"第二个值0"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：使用sources数组中的第0个源文件（src/math.js）。"}]}]},{"type":"listitem","attrs":{"id":"99d7ec36-b344-4463-b0fd-b25d80d3cc18"},"content":[{"type":"paragraph","attrs":{"id":"b3a98212-ffde-433f-984f-690d25828ce6","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"第三个值0"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：在源文件的第0行（行号从0开始）。"}]}]},{"type":"listitem","attrs":{"id":"f9c4b4c6-bd96-421b-8ec0-3aa1c862635d"},"content":[{"type":"paragraph","attrs":{"id":"b9c253ac-2973-47b6-b889-2a996d1e3745","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"第四个值9"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：在源文件的第9列。"}]}]},{"type":"listitem","attrs":{"id":"1c76cd8f-a249-46dc-a3ab-3168c5f40ce2"},"content":[{"type":"paragraph","attrs":{"id":"ee74cc43-654d-4bd4-bff1-a0070ac183b6","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"第五个值0"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：使用names数组中的第0个名称（add函数）。"}]}]}]},{"type":"heading","attrs":{"id":"b99b5bd7-9fcf-41d5-b294-5398918b874a","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"五、源映射在浏览器中的工作流程"}]},{"type":"heading","attrs":{"id":"b89eb8f2-4f37-49a5-8ba4-3b1b66c53e17","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"5.1 如何关联源映射？"}]},{"type":"paragraph","attrs":{"id":"ef0d4e05-b546-4bd5-a2a5-657de8ff3379","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"浏览器通过两种方式发现源映射："}]},{"type":"heading","attrs":{"id":"25a53a3c-4098-4ad3-a76a-d57d89701a18","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"方法一：文件末尾注释"}]},{"type":"codeblock","attrs":{"id":"e032b263-9010-4c98-aed2-329195a1928d","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 压缩代码的末尾unction n(n,r){return n+r}//# sourcemappingurl=bundle.min.js.map"}]},{"type":"heading","attrs":{"id":"876cb6cb-0c7d-4326-920b-e87dc8b763e9","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"方法二：http响应头"}]},{"type":"codeblock","attrs":{"id":"c1b46f36-cc56-4063-a7ab-0ae29eb84e1c","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"javascript文件请求的响应头中包含：sourcemap: /path/to/bundle.min.js.map"}]},{"type":"heading","attrs":{"id":"ee96bffc-9cc7-42b0-9dcc-9ff3a6f317fa","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"5.2 调试器中的映射过程"}]},{"type":"paragraph","attrs":{"id":"e5e091d5-5ef9-49b4-9a86-0644ce50c4fe","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"当你在开发者工具中调试时："}]},{"type":"bulletlist","attrs":{"id":"2c6f4894-f272-4c70-a581-a138c2679f11","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"db9e4255-3b05-4b90-a9ff-52e8022a8875"},"content":[{"type":"paragraph","attrs":{"id":"26f974b7-bf03-4b53-9033-7698ae861fbe","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"打开源文件"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：你点击src/math.js文件。"}]}]},{"type":"listitem","attrs":{"id":"b9b2a931-4608-4d17-8ddc-99cfe14a585e"},"content":[{"type":"paragraph","attrs":{"id":"a7df5ea8-c01a-41f1-bd61-c831adc54325","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"设置断点"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：在第3行设置断点。"}]}]},{"type":"listitem","attrs":{"id":"82b1cc0d-d68b-4304-8d17-655a321e22dd"},"content":[{"type":"paragraph","attrs":{"id":"cb398c54-5dd0-4011-b076-eb24a5b18db6","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"反向映射"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：调试器将原始位置(math.js, 3, 10)通过源映射转换为压缩代码位置(bundle.min.js, 1, 15432)。"}]}]},{"type":"listitem","attrs":{"id":"38cd54de-2c8c-4b1a-9a1b-e76ee55a6fe3"},"content":[{"type":"paragraph","attrs":{"id":"546deca5-84df-406b-b083-a66bae7a1e85","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"执行监控"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：浏览器在压缩代码的15432字符处设置实际断点。"}]}]},{"type":"listitem","attrs":{"id":"d1b76d6e-65f9-4dd1-a73f-a940818c5956"},"content":[{"type":"paragraph","attrs":{"id":"65b7fcfe-edb3-40e4-8b77-258557c63ecf","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"命中显示"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：当执行到该位置时，调试器高亮显示原始源码中的对应行。"}]}]}]},{"type":"heading","attrs":{"id":"acd25ba9-bff1-41be-82ed-435cfd5380d4","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"5.3 错误堆栈的转换"}]},{"type":"paragraph","attrs":{"id":"7f08ae49-6031-49e3-94a3-1754f663fe98","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"错误发生时，浏览器的处理流程："}]},{"type":"codeblock","attrs":{"id":"01d6396c-33b7-4959-85ac-e2ba6ba7bab8","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 1. 原始错误堆栈（压缩代码）error: something went wrong at n (bundle.min.js:1:15432) at r (bundle.min.js:1:16789) at i (bundle.min.js:1:19876)\// 2. 应用源映射后error: something went wrong at add (src/math.js:3:10) at calculatetotal (src/calculator.js:12:15) at main (src/main.js:8:23)"}]},{"type":"heading","attrs":{"id":"ed60c305-0457-48e9-bfa5-fe0bb5ca9cb3","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"六、实战：创建和使用源映射"}]},{"type":"heading","attrs":{"id":"03658a3d-776c-4288-bfc2-020d1b998332","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"6.1 babel配置示例"}]},{"type":"codeblock","attrs":{"id":"6e481f38-f900-4b1e-b209-c685e7f0f61f","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// .babelrc{ \"presets\": [ [\"@babel/preset-env\", { \"targets\": \"u003e 0.25%, not dead\" }] ], \"sourcemaps\": true, \"sourceroot\": \"/src\", \"sourcefilename\": \"../[name].js\"}"}]},{"type":"heading","attrs":{"id":"209a6dd1-afd3-4856-ad86-18d114441278","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"6.2 webpack配置示例"}]},{"type":"codeblock","attrs":{"id":"5df8bcc4-304d-4494-910d-788089c6bc38","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// webpack.config.jsmodule.exports = { mode: 'development', devtool: 'source-map', // 生成完整的源映射 entry: { main: './src/main.js', calculator: './src/calculator.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), sourcemapfilename: '[file].map' }, module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { sourcemaps: true } } } ] }};"}]},{"type":"paragraph","attrs":{"id":"60c55e48-50ff-437c-82f5-705a050ccbc3","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"webpack的devtool选项有多种模式："}]},{"type":"bulletlist","attrs":{"id":"dd89797e-6126-40e8-835a-be04110f30cc","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"31d5c41b-693f-4f09-af69-d47d42e43315"},"content":[{"type":"paragraph","attrs":{"id":"9d70fd34-1bc1-4e37-8691-6219f84bfd3a","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"source-map"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：独立文件，最完整。"}]}]},{"type":"listitem","attrs":{"id":"87ca626b-40eb-477c-afa4-9f30019d3738"},"content":[{"type":"paragraph","attrs":{"id":"2085aeeb-0320-486a-a691-d696ed8df856","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"eval-source-map"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：内联，适合开发。"}]}]},{"type":"listitem","attrs":{"id":"e034d147-0a7f-46ec-a5ac-f7c487c26de9"},"content":[{"type":"paragraph","attrs":{"id":"f3edd6f5-180f-4d23-97e7-629d5c7bcf78","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"cheap-module-source-map"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：不包含列信息，文件较小。"}]}]},{"type":"listitem","attrs":{"id":"cd757ba7-6a9b-4eec-b033-cbb2b0088d8a"},"content":[{"type":"paragraph","attrs":{"id":"a9d02bea-8e03-421a-8bb1-a8610b135651","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"hidden-source-map"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：生成但不引用，适合生产环境。"}]}]}]},{"type":"heading","attrs":{"id":"be6968ee-35b8-47df-a4bc-a92e8be34e2c","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"6.3 生产环境最佳实践"}]},{"type":"codeblock","attrs":{"id":"a9d20603-9c0e-4c56-a2cf-50ab40baa3ec","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 生产环境webpack配置const terserplugin = require('terser-webpack-plugin');\module.exports = { mode: 'production', devtool: 'hidden-source-map', // 生成但不引用 entry: './src/main.js', output: { filename: 'bundle.min.js', path: path.resolve(__dirname, 'dist'), sourcemapfilename: 'bundle.min.js.map' }, optimization: { minimizer: [ new terserplugin({ terseroptions: { compress: true, mangle: true, sourcemap: true } }) ] }, module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { sourcemaps: true } } } ] }};"}]},{"type":"heading","attrs":{"id":"9e3e755c-ebdb-4a18-ab32-059e475ebc9b","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"6.4 手动创建源映射示例"}]},{"type":"paragraph","attrs":{"id":"cc7ada91-e9da-429e-b4e7-b7e77a44ef0a","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"对于简单的项目，也可以手动创建源映射："}]},{"type":"codeblock","attrs":{"id":"abd6a3f2-abad-4695-a02b-798b229e8c3e","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 原始文件：src/utils.jsunction formatdate(date) { const year = date.getfullyear(); const month = string(date.getmonth() + 1).padstart(2, '0'); const day = string(date.getdate()).padstart(2, '0'); return `${year}-${month}-${day}`;}\// 压缩后：dist/utils.min.jsunction f(e){const t=e.getfullyear(),n=string(e.getmonth()+1).padstart(2,\"0\"),r=string(e.getdate()).padstart(2,\"0\");return`${t}-${n}-${r}`}\// 手动创建的源映射：dist/utils.min.js.map{ \"version\": 3, \"file\": \"utils.min.js\", \"sourceroot\": \"\", \"sources\": [\"../src/utils.js\"], \"names\": [\"formatdate\", \"date\", \"year\", \"month\", \"day\"], \"mappings\": \"aaaa,saasa,uaau,caacc,iaac;eacnb,maamc,iaag,gaagd,iaai,caace,maam;...\"}"}]},{"type":"heading","attrs":{"id":"a4f01bea-9901-4c3f-92b8-f0167331d3d5","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"七、源映射的进阶话题"}]},{"type":"heading","attrs":{"id":"f89e8536-ec84-415b-a182-d2a412d56c3f","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"7.1 性能考虑"}]},{"type":"paragraph","attrs":{"id":"7c022df2-4037-4d6a-96c5-bcf3a16c3401","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"源映射文件可能很大，但浏览器有优化策略："}]},{"type":"bulletlist","attrs":{"id":"f80c9569-e754-4ef6-ac00-b7194b78e15f","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"b3fc6fb5-0904-448c-b49d-092679332a02"},"content":[{"type":"paragraph","attrs":{"id":"c6fcc798-b942-4152-bd00-573d1dfeb943","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"懒加载"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：只在打开开发者工具时加载源映射。"}]}]},{"type":"listitem","attrs":{"id":"ab3c9158-c1e5-4278-9e17-d02aea52290c"},"content":[{"type":"paragraph","attrs":{"id":"408cbd3f-5195-45e5-8d80-ac98885a090b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"按需解析"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：只解析当前查看文件相关的映射部分。"}]}]},{"type":"listitem","attrs":{"id":"e2ec4ac4-6d16-4ac4-a359-43cfccdb5068"},"content":[{"type":"paragraph","attrs":{"id":"d53405f0-6a8d-4911-bbea-b5e5d6fd1406","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"缓存机制"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"：源映射文件被浏览器缓存，避免重复下载。"}]}]}]},{"type":"heading","attrs":{"id":"397753d5-a2e1-4ecb-a14e-9a38de00a350","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"7.2 安全问题"}]},{"type":"paragraph","attrs":{"id":"99eb6b1c-522f-49f9-9f3e-8c79baac3fc0","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"源映射可能泄露源代码，需要特别注意："}]},{"type":"heading","attrs":{"id":"4805bba2-02f2-42c1-a289-6ee440e09613","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"安全风险"}]},{"type":"bulletlist","attrs":{"id":"2a715a65-6af1-44f7-a6d3-cb1082235d98","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"c2452ae4-9145-4bc4-8f45-6f75ad9feb04"},"content":[{"type":"paragraph","attrs":{"id":"30f09e0f-43ec-4100-bd3a-d3b2596f3efb","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"源映射文件包含或可以还原原始源代码。"}]}]},{"type":"listitem","attrs":{"id":"ad8ca4bc-8cd8-400b-8cf6-0af6ebc28147"},"content":[{"type":"paragraph","attrs":{"id":"6ca31b49-9be6-4ffa-9349-b0a972f8cbf1","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"敏感信息（api密钥、算法逻辑）可能被暴露。"}]}]}]},{"type":"heading","attrs":{"id":"b09b7708-ab68-41f6-b3df-1fac68120a04","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"防护措施"}]},{"type":"codeblock","attrs":{"id":"679b46c2-1bfc-4cdb-8b5c-10e52d0d71e7","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 1. 生产环境不包含sourcescontentconst safesourcemap = { ...originalsourcemap, sourcescontent: undefined // 移除源代码内容};\// 2. 源映射文件独立部署// 不公开访问，需要认证才能获取\// 3. 使用hidden-source-map// 生成源映射但不包含引用注释"}]},{"type":"heading","attrs":{"id":"2f566354-8fe1-438e-ab5c-d1886fdb5f48","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"7.3 调试技巧和最佳实践"}]},{"type":"heading","attrs":{"id":"a062fd2a-13c8-428a-902f-f19e800a9554","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"开发环境配置"}]},{"type":"codeblock","attrs":{"id":"18f46cf1-dd93-4ef1-9e35-bb4711fce1a9","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// webpack.dev.js - 开发环境module.exports = { devtool: 'eval-source-map', // 快速重建，适合开发};\// webpack.prod.js - 生产环境 module.exports = { devtool: 'hidden-source-map', // 安全且完整，适合生产};"}]},{"type":"heading","attrs":{"id":"d383fe4b-3815-4bf8-8bc5-2c347b50f285","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"第三方库的源映射处理"}]},{"type":"codeblock","attrs":{"id":"e7f9547c-3e91-4146-99c4-9c82dc7f0514","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 确保第三方库也提供源映射module.exports = { module: { rules: [ { test: /\\.js$/, include: path.resolve(__dirname, 'node_modules/some-library'), use: { loader: 'babel-loader', options: { sourcemaps: true } } } ] }};"}]},{"type":"heading","attrs":{"id":"90f46a84-6d72-479c-9568-ab8e35420971","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"八、常见问题解答"}]},{"type":"paragraph","attrs":{"id":"5b3ea6fb-118a-4adf-bf3f-0aa619651106","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"8.1 源映射文件太大怎么办？"}]},{"type":"paragraph","attrs":{"id":"28c4a8dd-6651-4eee-b13a-37a8ad6ab032","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"解决方案"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"："}]},{"type":"bulletlist","attrs":{"id":"9a01239d-528c-4a6b-817f-e8745770bb96","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"77127a6d-6b02-4e7f-9f0e-3b4934854581"},"content":[{"type":"paragraph","attrs":{"id":"e95fa0a6-5836-4854-a362-a1a0339638b1","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"使用"},{"type":"text","marks":[{"type":"code"}],"text":"cheap-module-source-map"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"减少列信息。"}]}]},{"type":"listitem","attrs":{"id":"6cd58b13-7c7d-46bb-8172-b1502652f573"},"content":[{"type":"paragraph","attrs":{"id":"a8aeb430-f810-4043-982a-384d2bc0ecb5","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"移除"},{"type":"text","marks":[{"type":"code"}],"text":"sourcescontent"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"字段。"}]}]},{"type":"listitem","attrs":{"id":"afad19e5-3389-494e-90f9-b597ab2ddcf8"},"content":[{"type":"paragraph","attrs":{"id":"fc54bf13-6d00-4c0c-abb6-3ec9e90439c8","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"使用gzip压缩传输。"}]}]}]},{"type":"heading","attrs":{"id":"179cf840-5dd0-404f-9dbb-3230255390cf","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"8.2 源映射在浏览器中不工作？"}]},{"type":"paragraph","attrs":{"id":"dfa4afe7-f4c7-41e7-bbf2-5f50e615f331","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"排查步骤"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"："}]},{"type":"bulletlist","attrs":{"id":"2c870a3f-4e78-4f65-9b67-b887d1431f73","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"620814e1-37e0-4c82-8a93-17371e0001a6"},"content":[{"type":"paragraph","attrs":{"id":"57d64cf3-cc61-441b-9538-45d0f0faa33c","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"检查源映射文件是否正确生成。"}]}]},{"type":"listitem","attrs":{"id":"14755c7a-3084-46bd-8799-5dad7aa13951"},"content":[{"type":"paragraph","attrs":{"id":"9d0f1a0d-3a5c-4796-be78-1f08b23e2d38","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"验证源映射引用路径是否正确。"}]}]},{"type":"listitem","attrs":{"id":"37926dca-6f51-4b1b-bc8a-9cdb93ab5018"},"content":[{"type":"paragraph","attrs":{"id":"52c280f1-23d7-4cb8-b90a-b577a065f2d3","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"查看浏览器开发者工具的网络面板。"}]}]},{"type":"listitem","attrs":{"id":"65b3390e-1d19-490d-b521-a4accdebb487"},"content":[{"type":"paragraph","attrs":{"id":"5164471b-cd78-4375-9f1f-1c9b3ca3c4a0","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"检查控制台是否有源映射相关错误。"}]}]}]},{"type":"heading","attrs":{"id":"2a3a4211-0c89-46c6-954a-1ab84c7c60cd","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"8.3 如何测试源映射是否正常工作？"}]},{"type":"codeblock","attrs":{"id":"b471e161-22c3-4734-a4d1-5f994a7475ed","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"// 在代码中故意抛出错误测试unction testsourcemap() { // 这行代码应该映射回原始文件 throw new error('测试源映射功能');}\// 在浏览器控制台查看错误堆栈// 应该显示原始文件位置，而不是压缩文件位置"}]},{"type":"heading","attrs":{"id":"4ec49175-ddf4-4c19-a924-5d5cbebb66dd","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-h-color)","background":""}}],"text":"九、总结"}]},{"type":"paragraph","attrs":{"id":"eed4dbe0-6311-4a7e-8129-0630a00ff902","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"javascript源映射是现代前端开发中不可或缺的基础设施。它通过精巧的编码设计和高效的映射机制，在压缩代码和原始源码之间建立了无缝的桥梁。"}]},{"type":"paragraph","attrs":{"id":"2e22006f-8ca4-44e7-ae7b-b118802ca15d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"关键要点回顾"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"："}]},{"type":"bulletlist","attrs":{"id":"a059f75b-8e78-454a-b89a-299345d51de0","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"83cc83b1-f276-4260-9bdd-71b6b8bf05de"},"content":[{"type":"paragraph","attrs":{"id":"f4840ad2-2218-4b28-a05c-fad453f9c42d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"源映射解决了压缩代码调试的痛点"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"，让开发者能够直接面对可读的源代码。"}]}]},{"type":"listitem","attrs":{"id":"ce23f3de-0ede-43b6-865d-e4ce4aedb2f2"},"content":[{"type":"paragraph","attrs":{"id":"3dca419d-4fc7-4c98-8d6a-9ff8a0ecfbd2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"vlq编码技术"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"是源映射高效压缩的核心，用最少的空间存储大量位置信息。"}]}]},{"type":"listitem","attrs":{"id":"c6a3e94a-5012-4a61-a621-7a9cbb83790e"},"content":[{"type":"paragraph","attrs":{"id":"a98a9ad5-54bf-4e5d-a169-b4b126b80faf","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"构建工具链的集成"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"让源映射在各个编译阶段都能正确传递。"}]}]},{"type":"listitem","attrs":{"id":"eb00d67f-f0f2-4d95-a9e6-499cfdbb584c"},"content":[{"type":"paragraph","attrs":{"id":"d0d5a45e-566a-4734-87dd-32edb7e100db","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"安全性和性能"},{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"需要在生产环境中特别关注。"}]}]}]},{"type":"paragraph","attrs":{"id":"733547d0-3a89-4980-8854-aef1c55ef5eb","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"源映射技术不仅提升了开发体验，也代表了软件工程中\"可调试性\"的重要性。随着技术的发展，我们有理由相信，未来的开发者工具会更加智能，让调试和优化变得更加简单高效。"}]},{"type":"paragraph","attrs":{"id":"43ed0761-a604-40ab-b5d2-4ec8e5cc4a10","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"textstyle","attrs":{"color":"var(--yb-md-text-color)","background":""}}],"text":"下次当你轻松地在浏览器中调试看似\"不可读\"的压缩代码时，不妨感谢背后这套精密的源映射系统——它正是现代前端开发体验如此流畅的关键所在。"}]}]}