cssを圧縮するとデベロッパーツールで行数がわからない?!

  • カテゴリ:コーディング
  • 投稿日:
  • 最終更新日:

タグ:

この記事は約1分で読めます。

ここら辺ブラウザのバージョンアップで変わったりしやすい部分。。

最近のchromeは圧縮されたcssの行数が表示されます。

もし、あなたがchrome以外のブラウザでsassの行数を知りたいのなら迷わず、chromeを使いましょう。

あ、その前にソースマップというファイルをコンパイラに出力するように設定しておいてください。

ソースマップというものは
sassファイルに圧縮されたcssが何行目に書かれてるか、マッピングされた情報が書かれているファイルです。

きっとあなたがお使いのコンパイラにはソースマップを出力するかしないかチェックボックスなどで選択できるようになっているはずです。

もう一つ忘れずに行ってほしいのは

ソースマップファイルをFTPでかならずサーバーにUPしてください。

そうしないとブラウザがソースマップファイルを認識してデベロッパーツールが行数を認識してくれません。

CSSの圧縮はwebページ表示速度の改善にもかなり効果的です。

しかもwebページの表示速度が改善されたらSEO的にも評価が上がります。

行数がわからないからといって、CSSの圧縮を拒んでいたら上記の方法をヒントにソースマップを活用してみくださいね!

関連記事-あなたが興味のありそうな関連記事をご紹介します