2017-10-31 17 views
2

一般的に、ページの一部の要素が表示されないときにCSSをデバッグして問題を解決する方法はありますか?今のところ、スタイルがどのように表示されているかを理解するために、CSS宣言を順を追ってコメントしなければなりません。CSSコードをデバッグする方法は?

+0

Chrome Dev Toolsはあなたの友人です。 –

答えて

2

スクリプト言語ではないため、CSSを「デバッグできませんが、Chrome DevTools Elementsパネルを使用して、要素&の右側の「スタイル」パネルを確認できます。

これは、スタイルがオーバーライドされたり無視されたりすることについての洞察を与えます(行が投げられた)。

CTRL + SHIFT + I

&警告がCSSLint

1

デバッグCSSとHTMLコードのバグが本当にあなたのアプリケーションの設計を台無しにある使用のエラーを見つけること。 CSSとHTMLコードのデバッグをデバッグするには、複数の方法があります。 HTMLの開発やCSSの作成中にデバッグや注意を払う際に考慮すべき事柄や方法はほとんどありません。

http://csslint.net/で構文エラーを確認してください。それは 素晴らしいツールを提供し、エラーが発生する行を強調表示します。

ブラウザ間の互換性の問題を詳しく確認してください。サイトはファイヤーフォックスできれいで美しく見えますが、時には は別のブラウザでうまく見えません。そのときには、CSSのクロスブラウザ互換性の問題 を気にする必要があります。 ブラウザ間の問題を発生させないようにするCSSフレームワークと ブラウザで正しくサポートされているHTMLタグとCSSプロパティを確認する必要があります。

これはHTML 要素のための適切なCSSを書くことができます 異なる基準でHTML要素を概説できますブラウザのWeb開発者向けツール。

Chromeのツールでスタイルシートを有効または無効にします。 CSSが特定のページ要素にどのような影響を与えているのか疑問がある場合は、Chrome DevToolsを使用して各プロパティを簡単に切り替えることができます。 Google Chromeの ウェブブラウザでは、右クリックして コンテキストメニューの[要素の検査]を選択します。[要素]パネルの右側に、 というタブがあり、内部にはいくつかのCSSがあります。これは、選択された要素にどのCSS 宣言が適用されているかを示しています。 が各CSSプロパティにカーソルを置いた場合、個別にチェックを外すことができます。 プロパティを省略すると、通常、別の場所でオーバーライドされているのは です。いくつかの 場所でプロパティをオフにして、要素から実際に削除する必要があるかもしれません。

クロム開発ツール計算タブを使用してください。それは正確にあなたのスタイルを計算しているブラウザ を教えてくれます。大規模プロジェクトで作業する場合、この はカスケード問題、セレクタ の問題などの問題を解決するために不可欠です。

あなたはCTRL +シャツ+ Iとクロムのdevのツールを有効にするか、またはほぼすべてのブラウザでサポートされていF12キー を押下してもよいです。

関連する問題