chromeでdevelop tool利用する時の便利技まとめ
ショットカット
全パネス
キー | 機能 |
---|---|
Cmd+Opt+I | develop tool開く |
Cmd+Shift+M | デバイスモード開く(スマホ) |
Cmd+R | ページロード |
elementパネス
キー | 機能 |
---|---|
F2 | HTMLとして編集 |
Opt+Click on arrow icon | nodeを全部展開/折りたたみ |
H | 要素を非表示 |
Tab,Shift+Tab | Edit next / previous property |
Sources
キー | 機能 |
---|---|
F8 | Pause / resume script execution |
F10 | Step over next function call |
F11 | Step into next function call |
Shift+F11 | Step into next function call |
Cmd+S | 保存 |
Cmd+Opt+S | すべて保存 |
Cmd+Opt+F | 全リソースで検索 |
Cmd+O | ファイル名で検索 |
Cmd+P+:number | 指定行へ移動 |
Cmd+Shift+O | ファイル中の機能、変数へ移動 |
Cmd+D | 利用箇所へ移動 |
Console
キー | 機能 |
---|---|
Ctrl + Return | 複数行入力 |
参考資料
Chrome Keyboard & UI Shortcuts Reference
便利な機能
ページをリロードしてもNetworkタブで表示しているリクエストのリストを保持し続けたい
networkタブではHTTPリクエストが表示されるが、ページのリロードがかかるとこの内容がクリアされてしまう。
「Preserve Log」ボタンを押すと、もう一度押すまでの間のHTTPリクエストを、たとえリロードがかかっても、どんどん貯めることができる。
DOMエレメントに簡単アクセス
コンソールで一時的に何かをしたいときに、DOMエレメントにいちいち getElementById とかでアクセスするのは非常に面倒
DevToolsでは選択している要素に \$0 でアクセスすることができます。また、選択要素を変更した場合も $N でNつ前に選択していた要素にアクセスできます。
ほかのページの色を使いたい時
ここの記事を参考
マウス移動するだけ、めちゃくちゃ便利!