Firebug を投げるメモ_(2)HTML&CSS の配置とデバッグのヒント_html/css_WEB-ITnose

本題から外れます

従来の開発では、エディターでコードを保存し、それをブラウザーでプレビューして効果を確認します
しかし、今日の Firebug と Chrome の組み込みデバッガーは必要なくなりました。リアルタイムで確認できます。
デバッグ中のコードの操作は実際のローカル コードには保存されません。 素晴らしいですね

HTML 要素を見つける 3 つの方法

1. デバッグ ツールのインターフェイスに入り、 を押します。 「てんとう虫」の横にある小さなマウスを使用して Web ページ要素を選択します
2. デフォルトのショートカット キー、Ctrl + Shift + C
3. Web ページの特定の要素にマウスを移動し、右クリックし、 Firebug を使用して要素を表示します

HTML と CSS の簡単なデバッグ

##HTML 要素の編集
操作できないハードコーディングされたコード構造 (DIV ブロック タグなど) を除き、さまざまな内部属性とコンテンツはリアルタイムの変更とプレビューをサポートします。
コンテンツを変更するには、選択した項目をクリックするだけです。小さな青いボックスが表示されます。
例:

class

inline style(style)

target(target)

link(href) )

テキストコンテンツ

追加の属性を追加し、ブロックを含む最初のタグの括弧内をクリックして追加したいものを追加します

HTML DOMの選択

さまざまなラッピングレイヤーと親クラスを簡単に選択できます。

CSS 要素の編集 (リアルタイム プレビュー) をクリック

属性の無効化をサポート、属性の横にある赤い丸をクリックすると、無効になった属性が灰色に変わります

属性を変更する

追加属性 Attributes

CSS ピクセル微調整スキル

CSDN は GIF アニメーションをサポートしていません。だから私はそれをしませんでした…試してみた方が良いです

方向キー ↑ または方向キー ↓、追加 1px(em==) 、減算 1px(em==)

Ctrl+↑ または Ctrl+↓、増加 0.1px(em==)、減算 0.1px(em==)

Shift+↑ または SHIFT+ ↓ 10px(em==) を上に追加し、10px(em==)

概要エリア

スタイルを計算できますか? 選択したブロックの全体のサイズを計算できますか? 、非常に実用的です

レイアウトを適切にデバッグするために使用されるレイアウト?ボックス モデル ビュー

ショートカット キーとカスタマイズ

グローバル カスタム ショートカット キー呼び出し: ctrl+shift+alt+b、もちろん、「Ladybug in」をクリックすることもできます"

Firebug グローバル ショートカット キー、カスタマイズをサポートします

あなたの習慣と矛盾するものはどれですか。内部ショートカット キーを変更し、保存して有効になることを確認してください

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく転載することはできません。