對于支持 CSS 源映射（source maps）的預(yù)處理器， DevTools 允許你在源面板中實時編輯預(yù)處理器的源文件，并且不需要離開 DevTools 或者刷新頁面就能查看結(jié)果。當(dāng)你審查生成的 CSS 文件提供的樣式元素時，元素面板會顯示一個鏈接到源文件的鏈接，而不是生成的 .css 文件。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/sass-debugging.png" alt="sass-debugging" />

如果要跳轉(zhuǎn)到源文件：

在源面板中點擊相應(yīng)鏈接可打開（可編輯的）源文件。
Control + 鼠標(biāo)左鍵（或者在Mac上用 Command + 鼠標(biāo)左鍵）點擊 CSS 屬性名或者屬性值可以打開源文件并且跳轉(zhuǎn)到相應(yīng)的行。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/sass-sources.png" alt="sass-sources" />

當(dāng)你通過 DevTools 來保存對 CSS 預(yù)處理器做出的更改時，CSS 預(yù)處理器會重新生成 CSS 文件。然后 DevTools 會重新加載新生成的 CSS 文件。

在外部編輯器中做出的修改不會被 DevTools 偵測到，除非 Source 選項卡包含的相關(guān)源文件重新獲得了焦點。而且，手動編輯由 Sass/LESS/ 其他編譯器產(chǎn)生的 CSS 文件將會中斷源映射的關(guān)聯(lián)，直到重新加載頁面為止。

如果你正在使用 Workspaces（工作空間），你需要確認(rèn)產(chǎn)生的文件是否映射到了 Workspace 中。你可以在源面板右側(cè)的樹中來查看并驗證源自本地的 CSS。

要求

使用 CSS 預(yù)處理器的時候有一些要求需要滿足：

如果要使用該工作流，你的 CSS 預(yù)處理器必須支持 CSS 源映射，特別是源映射 v3 協(xié)議。CSS 源映射必須和 CSS 文件一同建立，所以 DevTools 可以將每個 CSS 屬性映射到源文件中的正確位置。（比如，.scss 文件）
為了讓你改動源文件時， DevTools 會自動加載樣式，你的預(yù)處理器必須設(shè)置為當(dāng)源文件發(fā)生變動時就重新生成 CSS 文件的模式。否則，你只有手動創(chuàng)建新的 CSS 文件并重新加載頁面后才能查看到生效后的更改。
你必須從 web 服務(wù)器來訪問你的站點或者應(yīng)用（不是一個類似于 file:// 的 URL），而且服務(wù)器必須能夠支持 CSS 文件以及源映射（source map）（.css .map）和源文件（.scss）。
如果你沒有使用工作空間的特性，那么 web 服務(wù)器也必須能夠提供上次修改的文件頭。Python SimpleHTTPServer 模塊默認(rèn)會提供這個文件頭。你可以像這樣啟動一個 web 服務(wù)來服務(wù)當(dāng)前目錄：

python -m SimpleHTTPServer

啟用 CSS 源映射

默認(rèn)情況下，CSS 源映射是啟用的。你可以選擇是否要啟用自動重新加載生成的 CSS 文件模式。

如果想要啟用 CSS 源映射，重載 CSS 文件，請參照以下步驟：

打開 DevTools 設(shè)置，然后點擊 General。
打開 Enable CSS source maps 和 Auto-reload generated CSS。

利用 CSS 源映射來使用 Sass

要在 Chrome 中實時編輯 Sass 文件，你需要3.3以上的 Sass，因為只有這樣才支持源映射。

gem install sass

當(dāng) Sass 安裝好以后，開啟 Sass 編譯器來監(jiān)測你的 Sass 源文件的改變并為每個產(chǎn)生的 CSS 文件創(chuàng)建源映射文件，例如：

sass --watch --sourcemap sass/styles.scss:styles.css

CSS 預(yù)編譯器支持

DevTools 支持 Source Map Revision 3 proposal。該協(xié)議在幾個 CSS 預(yù)編譯器中實施（2014年8月更新）：

Sass：如上面所說的，在 Sass 3.3 以后支持。
Compass：--sourcemap 標(biāo)簽在 Compass 1.0 后開始使用。你可以在 config.rb 文件中加入 sourcemap: true 來選擇是否啟用。這里有一份 Demo 可供參考。開發(fā)日志在 issue 1108。
Less：從1.5.0中開始實現(xiàn)。參考 issue #1050 來了解詳細信息和使用模式。
Autoprefix：從 1.0 中開始實現(xiàn)。Autoprefixer docs 說明了怎么使用它，以及怎么（從另一個預(yù)處理器中）接收一個輸入的源映射。
Libsass：詳細。
Stylus：已支持，最新的信息請見 issue #1655。

源映射是如何工作的

對于每個生成的 CSS 文件，預(yù)處理器另外為編譯的 CSS 生成一個源映射文件（.map）。源映射是一個 JSON 格式的文件，它定義了每個生成的 CSS 聲明和在原文件中相應(yīng)行的映射。每個 CSS 文件的最后一行都會含有一個說明其源文件路徑的特別注釋。

/*# sourceMappingURL=<url> */

例如，給定一個名為 styles.css 的 CSS 文件：

$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass 會生成一個 styles.css 文件并且在后面添加源文件路徑映射的注釋：

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

下面是關(guān)于源映射文件的例子：

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

參考資源

很多開發(fā)者會在使用 CSS 預(yù)處理器的過程中形成自己的工作流。有關(guān)教程和備用工作流的內(nèi)容請參照下面的文章：

Getting Started with CSS sourcemaps and in-browser Sass editing
Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt

注意：外部資源可能不是有關(guān)最新版 Chrome 的資料。

以上內(nèi)容適用于 CC-By 3.0 license

上一篇：博客帖子下一篇：遠程調(diào)試協(xié)議