Chrome DevTools谷歌浏览器开发者工具设置CSS和JS预处理器

作者: Arvin Chen 分类: Chrome 来源: Break易站(www.breakyizhan.com)

正确使用CSS预处理器(如Sass),以及JS预处理器和转换器可以大大提升你的开发效率。本文讲解如何设置设置CSS和JS预处理器。

这篇文章的主要内容为:

  • 预处理器允许您使用浏览器原生不支持的CSS和JavaScript中的特性,例如,CSS变量。
  • 如果你使用预处理器,使用Source Maps(源映射)将原始源文件映射到渲染输出文件。
  • 确保您的网络服务器支持Source Maps(源映射)。使用支持的预处理器自动生成Source Maps(源映射)。

什么是预处理器?

预处理器接受任意源文件,并将其转换为浏览器可以理解的东西。

输出CSS,它们添加很多浏览器原生不支持(或尚未支持)的功能,比如CSS变量,嵌套和多层嵌套。这个类别中值得注意的例子有SassLess和Stylus。

输出JavaScript,他们是从JavaScript或者从另一种完全不同的语言转换(编译)过来的,或将超集或新语言标准转换到当前的标准。 此类别中的值得注意的例子有CoffeeScript和ES6(通过Babel转换)。

调试和编辑预处理的内容

只要你在浏览器中并使用DevTools编辑你的CSS或调试你的JavaScript, 一个问题变得很明显:你看到的不是真正的源代码,并不真正帮助你解决问题。

为了解决这个问题,大多数现代预处理器都支持称为Source Maps(源映射)的功能。

什么是Source Maps(源映射)

source map(源映射)是基于JSON的映射格式,它在编译压缩的文件和其源文件之间创建关联。当你为生产环境构建时,它会为你压缩并且合并JavaScript文件,并且为你生成一个包含源文件信息的源映射。

源映射如何工作

对于每个生成的CSS文件,除了编译的CSS之外,CSS预处理器还生成源映射文件(.map)。源映射文件是一个JSON文件,用于定义每个生成的CSS声明之间的映射和源文件的相应行。每个CSS文件包含一个注释,指定其源映射文件的URL,嵌在文件的最后一行的特殊注释中:

/*# sourceMappingURL=<url> */

举个例子,给定一个名为styles.scss的Sass源文件:


$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass生成一个CSS文件,styles.css,带有sourceMappingURL注释:


h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */

下面是源映射文件的示例:


{
version: 3,
 mappings:AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK,
 sources: [sass/styles.scss],
 file: styles.css;
}

验证WEB服务器是否支持Source Maps

一些Web服务器,例如 Google App Engine,需要对每个提供的文件类型进行显式配置。在这种情况下,您的 Source Maps 应该提供一个application/json的MIME类型,但Chrome实际上接受任何内容类型,例如application/octet-stream

额外说明:通过自定义标头设置Source Maps

如果您不想在输出的文件中添加额外的注释,在压缩的JavaScript文件上使用 HTTP header 字段告诉DevTools在哪里可以找到源映射。这需要配置或自定义您的Web服务器,这超出本文档的范围。

X-SourceMap: /path/to/file.js.map

类似于注释,这会告诉DevTools和其他工具在哪里查找与JavaScript文件相关联的 Source Maps(源映射)。这个 header 字段还绕过了在不支持单行注释的语言中引用Source Maps(源映射)的问题。

支持的预处理器

几乎所有能编译到JavaScript语言的处理器,都有一个选项来生成 Source Maps(源映射) - 包括Coffeescript,TypeScript,JSX等等。您还可以在 Node 服务器端使用 Source Maps(源映射),我们的CSS中通过Sass, Less等预处理,使用 browserify 给你带来节点式(node-style)的 require 能力,并通过诸如uglify-js的压缩工具,这也增加了生成多级 Source Maps(源映射)的能力。

JavaScript

编译器 命令 说明
CoffeeScript $ coffee -c square.coffee -m `-m` (`--map`)标志是编译器输出Source Maps(源映射)所必须的,它还将为你输出的文件添加sourceMapURL注释。
TypeScript $ tsc -sourcemap square.ts -sourcemap标志将生成映射并添加编译指示注释。
Traceur $ traceur --source-maps=[file|inline] 使用--source-maps=file,以.js结尾的每个输出文件都将有一个以.map结尾的Source Maps(源映射)文件;使用 source-maps='inline',以.js结尾的每个输出文件都将以包含在data:URL编码中的sourcemap的注释结束。
Babel $ babel script.js --out-file script-compiled.js --source-maps 使用--source-maps-s生成Source Maps(源映射)。对于内联的Source Maps(源映射)使用--source-maps inline
UglifyJS $ uglifyjs file.js -o file.min.js --source-map file.min.js.map 这是生成file.js Source Maps(源映射)所需的基本命令。这也将添加添加编译指示注释到输出文件中。

CSS

编译器 命令 说明
Sass $ scss --sourcemap styles.scss styles.css 从Sass 3.3开始支持 Source Maps(源映射)。
Less $ lessc styles.less > styles.css --source-map styles.css.map 在1.5.0中实现。 有关详细信息和使用模式,请参阅issue #1050。
Stylus $ stylus --sourcemaps styles.style styles.css 这将把 sourcemap 作为一个base64编码字符串直接嵌入到输出文件中。
Compass $ sass --compass --sourcemap --watch scss:css 或者,您可以添加sourcemap: true到您的config.rb文件。
Autoprefixer 点击链接查看如何使用它并解析输入sourcemap。

Source Maps(源映射)和DevTools

现在您已经可以正确地设置Source Maps(源映射)了,当你知道 Chrome DevTools 已内置支持基于CSS和JS的Source Maps(源映射)的时候,你可能会很高兴。

编辑预处理的CSS

点击查看编辑Sass,Less或Stylus,以了解如何直接在DevTools中编辑和刷新链接到源映射的样式。

编辑和调试预处理的JavaScript

详细了解如何在Sources(源文件)面板中调试压缩,编译或转译后的JavaScript代码。 将预处理的代码映射到源代码。

在将预处理的代码映射到源代码文章中,详细了解如何在地图预处理代码的源代码面板中调试manified,compiled或transpiled JavaScript到源代码。

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/console/events

 

本文内容来自:Chrome DevTools谷歌浏览器开发者工具设置CSS和JS预处理器– Break易站


—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)

  •   本文标题:Chrome DevTools谷歌浏览器开发者工具设置CSS和JS预处理器 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/chromeconsole/2304.html

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注

    更多阅读