意外と知らないChrome Developer Toolsの便利な機能

DevToolsの起動するショートカットキーは？

開くだけ

F12, Ctrl + Shift + I (Win, Linux)
Opt + Cmd + I (Mac)

要素の検証(Inspect Element)と同じ状態で開く

Ctrl + Shift + C (Win, Linux)
Shift + Cmd + C (Mac)

Consoleタブが開いた状態で開く

Ctrl + Shift + J (Win, Linux)
Opt + Cmd + J (Mac)

DevToolsって下じゃなくて右に持ってこれないの？

Dock To Right

名前が分かってるファイルを開きたい

Ctrl + O (Win, Linux)
Cmd + O (Mac)

DevTools上で編集したコードを保存

（あとで書く）

DevTools上でいろいろ編集したけどどこをどう変えたかわかんなくなっちゃった

Local Modifications系
（あとで書く）

Webページ上の今いるファイル内検索

Ctrl + F (Win, Linux)
Cmd + F (Mac)

Webページ上のすべてのファイルを横断検索

Ctrl + Shift + F (Win, Linux)
Cmd + Opt + F (Mac)

ページを行き来してもNetworkタブで表示しているリクエストのリストを保持し続けたい

NetworkタブではHTTPリクエストが表示されるが、ページのリロードがかかるとこの内容がクリアされてしまう。「Preserve Log upon Navigation」ボタンを押すと、もう一度押すまでの間のHTTPリクエストを、たとえリロードがかかっても、どんどん貯めることができる。

DOMエレメントに簡単アクセス

コンソールで一時的に何かをしたいときに、DOMエレメントにいちいち getElementById とかでアクセスするのは非常に面倒です（idやclassが割り振られていない場合などは特に）

DevToolsでは選択している要素に $0 でアクセスすることができます。また、選択要素を変更した場合も $N でNつ前に選択していた要素にアクセスできます。

参考資料

·         https://developers.google.com/chrome-developer-tools/

·         http://anti-code.com/devtools-cheatsheet/

·         http://www.youtube.com/watch?v=bqfoYaKCYUI&list=SP055Epbe6d5avZGXwE5u039VQq_oQFgrc&index=5