Chrome 开发者工具 第十九章(源代码映射Source Maps)

源代码映射是前端开发中的一个重要概念,它允许开发者在经过编译、压缩或转译后的代码中调试原始源代码。这是通过在 Chrome 开发者工具的 "源代码/来源" 面板中将编译后的代码映射回原始源代码实现的。

使用源代码映射的优势

源代码映射的主要优势在于它保持了客户端代码的可读性和可调试性,即使在代码被合并、缩减或编译之后。这意味着即使在生产环境中,你也能够像在开发环境一样轻松地调试代码。

预处理器和源代码映射

许多现代的预处理器和工具链都支持生成源代码映射。这些工具包括但不限于 Babel(转译器)、TypeScript(编译器)、terser(代码压缩工具)以及 Webpack、Vite、esbuild 和 Parcel(模块打包器和开发服务器)。使用这些工具时,确保它们配置为生成源代码映射文件。 以vue的vue.config.js为例:

javascript 复制代码
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: "source-map", // <-开启Source Map
  },
});

启用源代码映射

在 Chrome 开发者工具的设置中,你需要确保启用了 "启用JavaScript源代码映射" 选项。 点击开发者工具右上角的"设置"按钮,弹出"偏好设置面板" 在"偏好设置面板"中勾选"启用JavaScript源代码映射"即可

对于 CSS,可能还需要启用 "启用CSS源代码映射"。 这样,开发者工具在加载缩减或编译后的文件时,也会加载对应的原始文件。

打开"开发者资源"并查看状态

在开发者工具中,按ESC键调出控制台,确保启用源代码映射,然后依次点击 > 更多工具 > 开发者资源。 在表格中,检查以下列中的值: 状态,用于查看来源映射加载是成功还是失败。 错误:用于读取错误消息(如果有)。

在文件树中将编写和部署的文件分组

使用框架(例如 React 或 Vue)开发 Web 应用时,由于构建工具(例如 webpack 或 Vite)会生成缩减文件,因此可能很难浏览源代码。 若要仅关注编写的代码,在文件树中将编写和部署的文件分组。然后展开已编写部分,并在编辑器中打开原始源文件。

调试原始代码

一旦启用了源代码映射,你就可以在 "源代码/来源" 面板中打开你的网站资源,并在原始源文件中设置断点进行单步调试。所有的错误、日志和断点都会自动映射到原始代码,而不是缩减或编译后的代码。

检查源代码映射

你可以在 "源代码/来源" 面板中检查是否成功加载了源代码映射。当你打开任何已部署的文件时,如果 开发者工具 找到了 //# sourceMappingURL 注释和关联的原始文件,它会通知你。

通过这些步骤,源代码映射可以极大地提高你在生产环境中调试代码的效率。它让你能够直接在原始代码上工作,而不是在经过多重转换后的代码上,从而提供了一个更直观、更容易理解的调试环境。

相关推荐
baiduopenmap8 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish16 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i28 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_30 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun36 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网