696
698

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-06-20

参考資料がすべて英語なので、日本語で情報がまとまってる場所が欲しいと思いこの記事を作りました。「俺もっと便利な機能知ってるぜ!」「こういうことできないの?」って思った人はコメント/編集リクエストをくれると僕の幸せのステージがどんどん上がります。

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
docktoright.gif

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

Ctrl + O (Win, Linux)
Cmd + O (Mac)
openfile.gif

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エレメントに簡単アクセス

Screen_Shot_2013-07-04_at_6.06.00_PM.png

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

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

参考資料

696
698
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
696
698

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?