Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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つ前に選択していた要素にアクセスできます。

参考資料

grapswiz
topgate
Google技術を中心に取り扱う技術者集団
https://www.topgate.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした