bootstrap.css.map这个文件有何用处?该怎能使用它?

.
├── bootstrap.css
├── bootstrap.css.map
├── bootstrap.min.css
├── bootstrap-theme.css
├── bootstrap-theme.css.map
└── bootstrap-theme.min.css

0 directories, 6 files

我先说一下什么是source map文件。 source map文件是js文件压缩后,文件的变量名替换对应、变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map,压缩后通过变量替换规则可能会被替换成a,这时source map文件会记录下这个mapping的信息,这样的好处就是说,在调试的时候,如果有一些JS报错,那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试,这样会给我们带来很大的方便! 而这种还原性调试功能,目前只有chorme才具有,所以就会出现标题说的问题,我引入jquery-1.10.2.min.js的时候,在firefox下或者其他浏览器下是好的,在chorme下会报错找不到jquery-1.10.2.min.map文件,404,就是因为以上说的情况,jquery会检测浏览器是否支持source map功能,如果支持的话,那就去下载source map文件,而这个时候如果你引用的是官网的min.js那没问题,它会去自己的目录下找source map文件,而如果jquery.min.js文件在你的服务器上而服务器上又没有source map的话,那就会报错了,所以三种解决办法:一,引用官网文件 二,把source map文件下载下来放到服务器上(推荐) 三,把chorme文件的工具-->开发者工具-->设置-->Enable source maps勾去掉,去掉这个勾,jquery就不会去下载source map文件了!

原文出处:

http://segmentfault.com/q/1010000002556738

http://segmentfault.com/q/1010000000259052

时间: 2024-12-14 00:40:29

bootstrap.css.map这个文件有何用处?该怎能使用它?的相关文章

Bootstrap的基本使用(css、js文件的引入)

使用Bootstrap需要引入官方的文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap3示例</title> <link hre

JQuery 加载 CSS、JS 文件的方法有哪些?

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

解决了部署到Heroku时无法显示bootstrap CSS样式的问题

今天使用了bootstrap-sass进行布局,真的很好用,据说是tweet 开源的一个东东,本地一切都OK的时候欢喜的git push heroku后,发现bootstrap css的样式并没有预期中的显示出来,感觉还是挺沮丧,但是有问题就要解决,于是抱着技术问题问Google的态度,搜索了下,在 stackoverflow上找到了解决方法,不得不说stackoverflow真是个好东西,我的问题大部分都是在那上面解决的. 原文: I could not view the site with

(二)Bootstrap CSS 概览

在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创

MVC-采用Bundles方式引入css和js文件

优点:修改js或css时会自动生成hash版本号. 缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步. web.config中 <compilation debug="true" targetFramework="4.5" /> 1.BundleConfig 如果是调试模式,前端页面会显示真实的js.css路径,生产环境是会显示前面的路径.在bundles中还可以使用通配符引用. bundle

Bootstrap CSS(一)

1.Bootstrap CSS 概览 1.1HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> xxx </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览

Bootstrap CSS 概览

HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情

4.1HTML和Bootstrap css精华

1.HTML 2.理解Bootstrap HTML元素告诉浏览器,他要表现的是什么类型的内容,当他们不提供任何关于如何显示内容的信息.如何显示内容的信息,由CSS提供. 本书仅包含足够的信息,让你查看AngularJS特性,和Bootstrap的样式.要演示基本bootstrap的特性,在angularjs文件夹下新建bootstrap.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

使用Bootstrap.css 中IE下页面加载过慢问题

问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"); 国内访问不稳定,页面反应慢 解决:将请求结果保存下来,放到本地,重新声明请求 1.请求http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,4