怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】

阅读本篇博文前,建议大家先看看下面这篇博文:
https://blog.csdn.net/wenhao_ir/article/details/132089650

Bootstrap经编译(压缩)后的源码百度网盘下载地址:
https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwd=m02m

Bootstrap未经编译(压缩)后的源码百度网盘下载地址:
https://pan.baidu.com/s/19U-13-sgPDHCI0FozreFdQ?pwd=b9m1

我们在web项目中,用Bootstrap开发前端内容时,通常都是引用编译版的文件,如下图这些文件:
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第1张图片
但这些css文件中的源码,是经过编译压缩处理的,如果直接打开,基本上人是无法阅读的,用四川话来说,那真是“一饼粘”, 不忍直视,如下图所示:
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第2张图片
那怎么办呢?此时我们可以通过官方配套的map文件去进行编译前的反映射,从而获得易于阅读的源代码,如下图所示:
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第3张图片
那么怎么通过Source Map(源映射)文件去看易于阅读的源码文件呢?
很简单,只需要把css文件和对应的css.map文件放于同一文件下,然后浏览器打开相应的HTML文件,进入开发者模式,即可查看易于阅读的源码文件。

示例如下:
在目录"E:\HTML_3"下放入下面三个文件:

css-map-test.html
bootstrap.min.css
bootstrap.min.css.map

这三个文件的百度网盘下载链接如下:
https://pan.baidu.com/s/1ydZiOKESZydtDXuNiNN0Hg?pwd=ppsi

文件 css-map-test.html 的内容如下:

DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="bootstrap.min.css">
head>
<body>
  <div class="container">
  <p>我要测试Source Map(源映射)文件的效果。p>
  div>
body>
html>

chorm浏览器中打开文件 css-map-test.html ,然后通过F12或右键→“审查元素”进入开发模式。
通过Elements的Styles可以查看对应的元素的源码及位于未编译前的源码中的位置,如下图所示:
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第4张图片
右边上边截图中右边的源码文件,即可跳转到具体的源码:
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第5张图片
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第6张图片

我们进入到Sources选项下,打开bootstrap.css文件,搜索“.container”,即可找到选择器 .container 的定义:
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第7张图片
如果要理解上面截图中scss文件夹的含义,那么你把bootstrap的完整代码下载下来就知道了,如下图所示:
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】_第8张图片

你可能感兴趣的:(Bootstrap,bootstrap,前端,html)