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 注释和关联的原始文件,它会通知你。

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

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj8 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____9 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站