Chrome Developr Tools(Elementタブ)使い方メモ1

Code SchoolのChrome Developer ToolsのElementタブの使い方の1コース目を終了したので、そのメモ。

Chrome Developer Tools起動方法

• 右上の設定アイコン→ツール→デベロッパーツール
• 右クリック→要素の検証
• ショートカット→(Windows:Ctl+Shift+i,Mac:Command + Option + i)

Elementタブで出来る事。

• HTML、CSSなどの編集が出来る。
• 要素の編集、確認が出来る。
• 要素の追加、移動、属性の変更なども出来る。

変更したいDOMの検索

• 画面左のHTMLビューから探す。
• 画面下の虫眼鏡アイコンを選択し、HTML画面の変更したいDOMをクリックする。
• HTML画面の該当の要素の箇所で右クリックしてInspect Elementを選択する。

DOM操作

• 画面左のHTMLビューで直接文字列などを変更可能。
• 該当箇所で右クリックしてAdd Atributeで属性追加可能。
• 該当箇所で右クリックしてDelete Nodeで要素を削除。
• 該当箇所で右クリックしてEdit As HTMLで選択箇所のHTMLを編集可能。
• ドラッグ&ドロップで表示位置の変更も可能。

編集ファイルの保存

• 右クリック→copy as HTMLで編集したHTMLのコピーが可能。