Chrome DevTools — Elements

3280 ワード
chrome-devtools
一、編集DOM
要素の表示
  • ページの任意の要素を右クリックし、「Inspect」
    • を選択します.
  • Elementsパネルで、マウスであるDOMノード
    • を手動で選択する.
  • レビュー要素ボタンをクリックし、ページでDOM
    • を選択します.
  • consoleでinspect(dom)を使用して、ある要素
    • を表示します.
    DOMノードのナビゲート
    マウス>>1.DOMノードを1回クリックして、このノードをハイライトします.2.ノードを展開します.ノードの任意の場所でダブルクリックするか、左の矢印をクリックします.3.ノードを閉じます.左の矢印をクリックします.
    キーボード>>1.上矢印を使用してノードの前のノードを選択します(Elementsパネルに表示されるノードは、親ノード、兄弟ノード、または兄弟ノードの子ノードなどです).2.下矢印を使用してノードの後のノードを選択します(上と同じ)3.右向き矢印は1つのノードを展開することができ、再び右向き矢印を押すとこの展開ノードの最初のサブ要素が選択され、この論説に従って4.左向き矢印は1つのノードを収容することができ、再び左向き矢印を押すとこの収容ノードの親要素が選択され、この論説に従って押す
    Elementsパネルの一番下にパンくずのパスがあり、現在選択されているノードは青でハイライト表示され、青ハイライトノードの左側は親ノード、右側は子ノードです.
    DOMノードとプロパティの編集
    DOMノードの名前または属性を編集
  • ノード名または属性の上に
    • を直接ダブルクリック
  • ノードを選択し、Enterキーを押し、その後(繰り返し)Tabキーを押して、ノード名または属性
    • を選択する.
  • 右クリック[属性を追加]または[属性を編集]
    • を選択
    ノード名を変更すると、完了すると、対応する閉じたラベルが自動的に更新されます.
    htmlテキスト形式でDOMノードとそのサブ要素を編集する
    編集に関わる内容が多い場合は、htmlテキストの形式で編集することを右クリックで選択でき、便利で簡潔です.
    DOMノードを移動
    ノードをクリックして放さずにドラッグします.
    DOMノードを削除
    ノードの上を右クリックし、「要素の削除」を選択します.
    ノードを現在のウィンドウに表示
    Elementsパネルで要素を選択すると、この要素は現在のウィンドウ内にない可能性があります.この場合、右クリックで「Scroll Into View」を選択すると、アンカーポイントの効果に相当するノードが自動的に位置決めされます.
    HTMLコメントの表示/非表示
    Settings > Preferences > Elements > Show HTML comments
    その他のアクションメニューを表示
    より多くの操作を表示するには、右クリックが一般的ですが、実際には別の入り口があります.現在選択されているノードでは、一番左側に3つの点があります.この3つの点をクリックすると、マウスの右クリックの効果が得られます.
    DOMについては他にも、DOMにブレークポイントを設定したり、DOMにバインドされているイベントを傍受したりするなど、jsデバッグの内容にまとめましたが、興味があれば次の『Chrome DevTools-JSデバッグ』をご覧ください
    二、スタイルの編集
    エレメント上のスタイルの表示
    要素を選択すると、Stylesウィンドウには、この要素のすべてのスタイルが表示され、優先度が高いものから低いものまで表示されます.
  • の一番上は、HTMLに直接書かれた行内スタイルまたはconsoleで動的に設定された
    • です.
  • 次はこの要素に直接一致するcss
    • である.
  • それからいくつかの継承cssで、親要素から継承されたものもあれば、ブラウザのデフォルトスタイルから継承された
    • もあります.
    上の図:1.要素のスタイルに対応するセレクタ2.ブラウザのデフォルトのスタイルは、通常上書きされます3.上書きされたスタイルには削除線があります4.継承されたスタイルは、それぞれのグループに表示されます.ヘッダーはelement.style 5.灰色のスタイルは定義されていませんが、実行時に対応する値が計算されます.
    セレクタによって影響される要素の表示
    Stylesパネルで、セレクタにマウスを置くと、このセレクタに対応するcssがどの要素に適用されているかが表示されます.
    クラスが有効かどうか、および新しいクラスを追加Inherited from ボタンをクリックすると、現在の要素に追加されているすべてのクラス名が表示されます.また、入力ボックスに新しいクラス名を追加することもできます(入力が完了したら、.clsボタンを押してください).
    属性名と属性値の編集
    属性名または属性値をクリックすると編集状態に入り、ある属性名または属性値がハイライトされている場合、Enterキーを押すと、後の属性名、属性値、セレクタ、または新しく属性が追加され、Tabが反転します.属性値が数値に関連付けられている場合、いくつかのショートカットキーがあります.
  • 上下方向キー、±1
  • Shift + Tab+上下方向キー、±0.1
  • Alt+上下方向キー、±10
  • Shift(Windows、Linux)またはShift + Page Up/Page Down(Mac),±100
    • 新しい属性宣言を追加
    cssルール編集可能領域の空白で、クリックするとcss宣言が作成されます.
    cssルールを追加
    ボタンをクリックすると、スタイル・ルールが追加されます.このボタンをクリックすると、どのスタイル・テーブルにcssルールを追加するかを選択できます.
    擬似クラスのスタイルの表示
  • Elementsパネルで、ノード上で擬似クラス
    • を右クリックして選択する.
  • Stylesウィンドウで、Shift + Function + Up/Downボタンをクリックし、チェックボックスで
    • を選択します.
    エレメントにフォント色、背景色、シャドウなどをすばやく追加
    マウスがスタイルルールに浮かぶと、右下隅に「3つのポイント」ボタンがあり、マウスがこのボタンに移動すると、いくつかの異なるアイコンが表示され、要素に異なるスタイルをすばやく追加できます.
    カラーピッカーによるカラー値の変更
    場合によってはカラーピッカーでカラー値を確認するのは便利ですが、一般的にはページのカラー値UIに表示されており、フロントエンドは自分で設計する必要がなく、直接修正するのが便利です.この部分は説明していません.:hov+クリックすると、rgb、16進数などの色値のフォーマットが変更されます.
    JavascriptカスケードドロップダウンメニューおよびAJAXデータ検証コアコード
    OC-文字列の大文字と小文字の変換