Webの検証やデバッグをするのに欠かせないツールです。
その概要について。
Elementsパネル
左側（ブラウザがHTMLを読み込んだツリー上のオブジェクト。）
要素の編集や位置変更（ドラッグアンドドロップ）、削除が可能。
右側（スタイルがどのように適用されているか）
Networkパネル
このパネルでは、どのタイミングでファイルが読み込まれたかというのを教えてくれます。
Timeline
読み込まれたファイルが早いものが、左側にあります。
右側にある青い線はツリー上のオブジェクトが構成された状態です。
赤い線は画像などのファイルが全て読み込まれた状態です。
デベロッパーツールのショートカット
開くだけ
Ctrl+Shift+i(Win)
Command+Shift+I(Mac)
要素の検証
Ctrl+Shift+C(Win,Linux)
Command+Shift+C(Mac)
Consoleタブが開いた状態で開く
Ctrl+Shift+J(Win,Linux)
Command+Shift+J(Mac)
名前が開いているファイルを開きたい
デベロッパーツールが開いている状態で
Ctrl+O（検索）