1. TOP
  2.   ›  
  3. WEB制作の疑問
  4.   ›  
  5. コーディング
  6.   ›  
  7. cssを圧縮するとデベロッパーツールで行数がわからない?!

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

公開日: 最終更新日: カテゴリ:WEB制作の疑問

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

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

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

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

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

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

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

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

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

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

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

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

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

合わせて読みたい「コーディング」の記事

管理人はWEBサイトを作っています

コーディング&WordPressの組み込みではや10数年。。

WEBサイト実績一覧へ

WEB制作の疑問」の関連記事

ツール

Firefox8にしてからアドオンのFire...

必須FireMobileSimulator [adsense] もう「FireMobileSimulator」は絶対に外せないって方は下記「GIGAZINE」のURL...

続きを読む

WordPress

WordPressのエラーの原因を効率的に調...

主にプラグイン関連のエラーを探す時に使える方法です。 WordPressのエラー [adsense] 様々なタイプのエラーがあります。 例えば、プラグインを更新したタイミン...

続きを読む

SEO対策・アクセスUP

【困った】AMPのエラーでアクセスが激減り

現在、WordPressでサイトを運営しております。 もちろんAMP対応もプラグイン任せ! コーダー上がりのWEB担当者の仕事をしている身としては、自作のAMPテンプレートを作りた...

続きを読む

WordPress

WordPressの「リカバリーモード」は制...

WordPressで真っ白な画面になって焦ったことはないですか? リカバリーモードとは ・ユーザーは「このサイトは現在技術的な問題が発生しています」という画面を見ることにな...

続きを読む

ツール

Bracketsをバージョンアップしてから、...

Bracketsが起動しない。。 [adsense] 今回、Adobe Bracketsを更新したのですが、起動せず、、 その前にやった事といえば、Adobe Bracket...

続きを読む

記事タイトルとURLをコピーする