あなたが知らないかもしれない『Chrome Developer Tools』の裏ワザまとめ

SPONSORED LINK

Pocket

Google Dev Toolsの練習

ドットインストールの方でも紹介していますが、ざざっとまとめたくなったのでご紹介。

なお、ショートカットはMac用の表記なのでWinの方は適当に読み替えてくださいな。

■ 全般

  • Developer Toolsを別ウィンドウ表示した状態でDeveloper Toolsを起動するとDeveloper Tools自体をデバッグできる(使いどころはないけど、JSとHTMLで出来ているのだなぁ、と知ることができる)。
  • Cmd+「?」でショートカット表示

■ Elementsパネル

  • DOMは矢印で操作できる。左右で展開、折りたたみが出来て便利。
  • DOMはドラッグ&ドロップで入れ替えができる。デザインを試行しているときに便利。
  • DOMは削除キーで削除できる。スクショとるときに広告消したりとか便利。
  • 要素を選択した状態で右側Stylesパネルの+をクリックすると、そのセレクタ用のスタイルを作ってくれてすぐに編集することができる。

■ Resources

  • CSSはその場で編集できる。
  • CSSを編集してCmd+Sで保存すると左側で過去のバージョンが見られるようになる。元に戻したり、特定のバージョンを保存できたりする。

■ Networkパネル

  • 右クリックでCookie、キャッシュのクリアができる。
  • 下の「Documents」「Stylesheet」なんかでフィルタリングができる。「XHR」だけ指定しておくとAjaxのデバッグが出来て便利。

■ Sourcesパネル

  • Cmd+Oでファイルが選択できる。
  • Cmd+Shift+Oでセレクタ、関数が選択できる(トップの画像参照)。
  • Cmd+Lで特定の行へジャンプ。

■ Timelineパネル

  • Eventsなんかは右クリックで保存、読み込みができる。不具合があるユーザーに保存してもらって手元で読み込んで再現、なんてのができる。

■ Console

  • Ctrl+Lでクリア。
  • Shift+Enterでコマンド内改行。複数行のスクリプト打つときに便利。

■ 設定パネル

  • User Agentを変えられる。

そんなところですかね。ざっと復習しておくと良いかもですよ。

» Chrome Developer Toolsの基礎 (全12回) – ドットインストール

ツイッターもやっています!

SPONSORED LINK

  • Trackback are closed
  • Comments (0)
  1. No comments yet.