MENU
  1. ホーム
  2. パーツ別チップ
  3. Chromeの検証画面にSCSSのファイル名と行番号を表示する方法

Chromeの検証画面にSCSSのファイル名と行番号を表示する方法

パーツ別チップ

CSSを調整しているとき、Chrome DevToolsの「Styles」を見ても、そこに表示されるのはコンパイル後のCSSだけなんですよね。

うが
うが

あれ、このスタイルって元のSCSSのどこに書いたんだっけ…？

正直、これで何度も探し直した経験があります。同じような場面に心当たりがある人も多いんじゃないでしょうか。

タップで読みたいところにジャンプします

なぜコンパイル後のCSSしか見えないのか

ブラウザが実際に読み込んでいるのは、SCSSをコンパイルして作られたCSSです。

SCSS  → コンパイルCSS

なので、普通にしていると、Chromeから元のSCSSファイルを確認することはできません。

ただ、CSSと一緒にソースマップを生成しておくと、Chromeが次の対応関係を復元できるようになります。

コンパイル後のCSS  ↕ ソースマップ元のSCSSファイルと行番号

ソースマップは、一般的に次のようなファイルとして出力されます。

style.cssstyle.css.map

.css.mapが「CSSのどの部分が、元のSCSSのどこに対応するか」を記録した対応表になっているイメージです。

「map」 が鍵！

ポイントブロックタイトル

1）使っているビルドツールで、外部のstyle.css.map（CSSファイル名＋.map）を出力させる
2）Chrome DevTools側で、そのソースマップを参照する設定をオンにする

この2つが揃うと、検証画面に次のようにSCSSのファイル名と行番号が表示されるようになります。

css.map を出力させるには

Viteの場合

ite.config.jsまたはvite.config.tsに、次の設定を追加します。

import { defineConfig } from "vite";
export default defineConfig({
  css: {    // 開発サーバーでCSSソースマップを有効にする 
   devSourcemap: true,
  },  
  build: {    // ビルド後の成果物にもソースマップを出力する
    sourcemap: true,  
  },
});

それぞれどこで効いてくるかは、こんな感じです。

設定対象
css.devSourcemap: truenpm run devやyarn devで開発しているとき
build.sourcemap: truenpm run buildやyarn buildで出力したファイルを見るとき

build.sourcemapには、次の値も指定できます。

値挙動
true外部の.css.mapを生成し、CSSに参照コメントも付ける（今回紹介した設定）
'inline'.mapファイルは作らず、CSSファイル自体にBase64で埋め込む
'hidden'.mapファイルは生成するが、CSSに参照コメントは付けない

style.css.mapのような外部ファイルとして出力したい場合は、trueを指定してください。

なお、Viteはビルド時にファイル名へハッシュを付けることが多いため（例：style-a1b2c3.css）、実際のファイル名はstyle-a1b2c3.css.mapのようになる場合があります。

css.devSourcemapの初期値はfalseなので、明示的にオンにする必要があります。設定を変えたら、開発サーバーは再起動しておきましょう。

npm run dev

ビルド済みのCSSを確認する場合は、再ビルドも忘れずに。

npm run build

Viteの詳しい仕様が気になる人は、Vite公式ドキュメントのCSS設定とビルド設定もあわせてチェックしてみてください。

Gulpの場合

Gulpを使っている場合は、gulp-sourcemapsでstyle.css.mapを生成できます。

const gulp = require("gulp");const sourcemaps = require("gulp-sourcemaps");const sass = require("gulp-sass")(require("sass"));function styles() {  return gulp    .src("src/scss/**/*.scss")    .pipe(sourcemaps.init())    .pipe(sass().on("error", sass.logError))    .pipe(sourcemaps.write("."))    .pipe(gulp.dest("dist/css"));}exports.styles = styles;

次の部分で、SCSSのソースマップ作成がスタートします。

.pipe(sourcemaps.init())

ポイントはsourcemaps.write()の書き方です。

書き方挙動
sourcemaps.write(".")CSSと同じ階層に外部.mapファイルを出力（今回の設定）
sourcemaps.write().mapファイルは作らず、CSSに直接インライン埋め込み

外部のstyle.css.mapを出力したい場合は、write(".")のように出力先を指定してください。

ビルドツールを不使用の場合

ビルドツールを使わず、VSCodeの拡張機能でSCSSをコンパイルしている場合は「DartJS Sass Compiler and Sass Watcher」がよく使われています。

この拡張機能は、デフォルトでソースマップ（`.css.map`）を生成する設定になっています。

逆にソースマップを無効にしたい場合は、VSCodeの`settings.json`に次の設定を追加してください。

json{  
　"dartsass.disableSourceMap": true
}

参考：[DartJS Sass Compiler and Sass Watcher – Visual Studio Marketplace]
(https://marketplace.visualstudio.com/items?itemName=codelios.dartsass)

Chrome DevToolsの設定

先に、Google Chromeデブツール側の説明を設定方法を説明します。

  1. DevTools右上の歯車アイコンを開く
  2. 「Preferences」を選択する
  3. 「Sources」を開く
  4. ページをハードリロードする
  5. 「Enable CSS source maps」をオンにする

うまくいかない場合

下のチェックリストをもとにチェックしてみてください。
それでも表示されない場合は、次の順番で確認してみてください。

  • CDNやサーバーが.mapの配信を止めていないか
  • 設定後に開発サーバーを再起動したか
  • ビルド済みファイルなら再ビルドしたか
  • Chromeの「Enable CSS source maps」がオンになっているか
  • ブラウザが目的のCSSを読み込んでいるか
  • .css.mapが生成されているか
  • .css.mapが404になっていないか
  • CSSだけを別フォルダへ移動していないか
  • キャッシュを削除して再読み込みしたか

まとめ

Chromeの検証画面に元のSCSSファイル名と行番号を表示するには、次の2つが必要でした。

  1. 使っているビルドツールで、外部のstyle.css.mapを出力する
  2. Chrome DevToolsの「Enable CSS source maps」を有効にする

これだけで、検証画面で見つけたスタイルから、元のSCSSファイルと行番号まで一気にたどれるようになります。
地味だけど、日々のコーディングがだいぶ楽になる設定なので、まだの人はぜひ試してみてください。

パーツ別チップ

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！

関連記事

コメント

コメントする

タップで読みたいところにジャンプします