Source Map介绍 -浏览器篇

最新推荐文章于 2024-09-23 09:57:08 发布
最新推荐文章于 2024-09-23 09:57:08 发布
阅读量3k 收藏 1
点赞数
分类专栏： 前端 文章标签： sourcemap js 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangweiren_get/article/details/100025896
版权
本文介绍了Source Map在浏览器中的作用，包括其使用方式、原理、浏览器支持情况，并提供了相关资源链接，帮助开发者理解如何利用Source Map进行调试。
摘要由CSDN通过智能技术生成

Source Map介绍 - 浏览器篇

Source Map介绍

在做网站性能优化的时候，我们经常会做js和css代码压缩。但是压缩之 后的代码在调试的时候就会异常困难。source map就是解决问题的一种解决方案

浏览器source map

  • chrome sourcemap功能设置界面
    在这里插入图片描述

source map 使用介绍和原理

  • 第一种方式
    在你的压缩文件末尾加上下面注释。如果你开了devtool并且开启了sourcemap功能，浏览器就会去加载这个map文件

    //# sourceMappingURL=/path/to/script.js.map

  • 第二种方式
    在HTTP响应头上面设置X-SourceMap如下

    X-SourceMap: /path
最低0.47元/天 解锁文章
wangweiren_get
关注
专栏目录
SourceMap 与前端异常监控
JanLEE
07-11 269
背景 我们从事 Web 开发工作中，异常监控系统已经是我们朝夕相处的好助手，但是这些异常处理工具通常都是建立在 Web 生态，或者是假定运行在浏览器环境下的，但是当我们需要给一套跨端系统搭建一套类似的异常监控系统，并且期望该系统兼容 Web 生态，现有的工具很可能就不满足我们的需求了，因此我们需要考虑一套完整的异常监控系统整个链路将会涉及到哪些工具链，以及如何修改这些工具链来适配我们的跨端系统。 精彩的一天从查 Bug 开始 我们先从和我们程序员最息息相关的线上查 Bug 开始。 下面这种图，相信大
Angular 入门教程系列：41：使用source-map-explorer对构建结果进行分析
知行合一 止于至善
10-11 2751
在前面一篇文章中介绍了使用webpack-bundle-analyzer对构建结果大小进行分析的方法，这篇文章来介绍另外一种工具：source-map-explorer的使用方式。
sourcemap
crystalNB的专栏
12-05 1285
SourceMap 的文件内容是js对象，其个字段是： - version：Source map的版本，目前为3。 　　- file：转换后的文件名。 　　- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。 　　- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。 　　- names：转换前的所有变量名和属性名。 　　- map
【Webpack】Source Map详解
最新发布
lph159的博客
09-23 1310
在现代的前端开发中，源代码经过编译、打包和压缩后会变得难以阅读，尤其是当你使用如 Babel 之类的工具将 ES6+ 的语法转换成 ES5 时，或是使用 TypeScript 编译为 JavaScript 代码。此时，如果项目在生产环境中出现问题，调试变得极为困难。为了解决这个问题，Source Map作为一种映射机制应运而生。它将编译、压缩后的代码与源代码对应起来，使开发者在调试工具中能够看到原始的代码结构。这极大地提高了调试的效率和开发体验。Source Map。
什么是SourceMap
xiasohuai的博客
09-01 4163
什么是SourceMap？ 我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题的。 在项目开发完进行打包后...
webpack的source map
richest_qi的博客
05-27 883
source map 将编译后的代码映射到原始源代码 devtool 是否生成source map，怎么生成source map，devtool说了算。 不同的值会明显影响到构建(build)和重构建(rebuild)速度。 参考文章 使用source map devtool devtool demo ...
source-map-explorer：通过源图分析和调试空间使用情况
02-03
source-map-explorer bundle.min.js bundle.min.js.map source-map-explorer bundle.min.js* source-map-explorer *.js 这将打开一个可视化的视图，显示缩小包中空间的使用方式： 这是一个包含更复杂捆绑包的。 在...
vite-sourcemap-repro
03-20
【vite-sourcemap-repro】是一个与JavaScript开发环境相关的项目，主要涉及Vite工具的源地图（Source Map）问题。源地图是现代前端开发中的一个重要概念，它允许开发者在浏览器的调试环境中看到编译后的JavaScript...
source-map-sentry:这是source-map前端项目
05-19
Source Map是一种映射工具，它可以将浏览器中经过压缩、混淆后的源代码映射回原始的、可读性强的源代码。在开发过程中，我们通常会使用ES6语法、模块化、以及CSS预处理器等，这些都会导致编译后的代码变得难以阅读。...
深入浅出 Source Map
zz_jesse的博客
08-23 183
一、什么是 Source Map通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。关于 Source Map 的解释可以看下 Introduction to JavaScript Source Maps[7]。我们线上的代码一般都是经过打包的，如果线上代码报错了，想要调试起来，那真是很费劲了，比如...
Source Map的概念
wanhongbo029的博客
11-16 2839
source map顾名思义，就是代码地图，为什么会有这个东西呢，具体的起源等有时间在追溯，先看看这个东西是怎么用的，有什么用。 提到source map，说的最多的是javascript source map，其实并不仅仅是javascrip程序需要生成source map，其他的代码也需要，比如css（尤其是对于一个大型的前端样式库，比如bootstrap等）。 现代javascript程...
一文了解source-map
p1967914901的博客
12-02 1292
一文了解source-map一文了解source-map背景举例source-mapevaleval-source-mapinline-source-mapcheap-source-mapcheap-module-source-map总结开发环境生产环境 一文了解source-map 背景 作为一个开发工程师——无论是什么开发，要求开发环境最不可少的一点功能就是——debug功能。 当我们通过webpack 将我们的源码打包成了 bundle.js 。 试想：实际上客户端(浏览器)读取的是打包后的bundl
[译]什么是SourceMap
奇舞周刊
04-10 585
原文链接: https://web.dev/source-maps/使用 SourceMap 来提升 web 调试体验。今天，我们要讨论的是 SourceMap，这是现代 Web 开发中至关重要的工具，它能够显著地简化调试工作。在本文中，我们将探讨 SourceMap 的基础知识，包括它们的生成方式以及它们如何改善调试体验。SourceMap 的必要性以前，我们使用纯 HTML、CSS 和 Jav...
【Web技术】1652- 什么是SourceMap
pingan8787
04-12 173
原文链接: https://web.dev/source-maps/使用 SourceMap 来提升 web 调试体验。今天，我们要讨论的是 SourceMap，这是现代 Web 开发中至关重要的工具，它能够显著地简化调试工作。在本文中，我们将探讨 SourceMap 的基础知识，包括它们的生成方式以及它们如何改善调试体验。SourceMap 的必要性以前，我们使用纯 HTML、CSS 和 Jav...
webpack打包之sourcemap
我的博客简介
08-01 6891
希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........
SourceMap基本使用
m0_37036014的博客
09-07 1858
SourceMap 使用教程 一、前言 在前端的工作中主要是用来解决以下三个方面出现的 debug 问题： a. 代码压缩混淆后 b. 利用 sass 、typeScript 等其他语言编译成 css 或 JS 后 c. 利用 webpack 等打包工具进行多文件合并后 上面三种情况，我们在调试时都是没办法像调试源码般轻松，这就需要 SourceMap 帮助我们在控制台中转换成源码，从而进行 debug 。 二、概念 SourceMap 其实就是一个存储源代码与编译代码对应位置映射的信息文件
JavaScript Source Map详解
FishSaid的博客
10-25 536
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 转自阮一峰大大造的轮子。十分感谢
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值