Chrome Developer Tools

リファレンスの
サイトは
https://developers.google.com/chrome-developer-tools/
このツールを使うには
chrome が必要
ちなみに、起動して
developer tools の画面左下のアイコンをクリックすると
別のウインドウと分離できる
もう一度おすと、一つの画面に戻る
これについては
http://dotinstall.com/lessons/basic_chrome_dev/7102
で解説がある
html body などのタグ入りのものもでるけど
これは
ESCキーをおすことで消したり出したりできる
このツールを使うことで様々な編集ができる
コードの編集をしたいのなら
右クリックして
Edit as HTML
を選択すれば編集もできる
あと、DOM要素をクリックして移動させることもできる
ただし、編集はリロードすると元にもどるので
保存したいのなら
右クリックして
Copy As HTML を選択して保存する
Elementsパネル
使い勝手はよさそうだけど多機能なので忘れそう
http://dotinstall.com/lessons/basic_chrome_dev/7104
に動画で解説されているので、今後忘れたときには
またみるとしよう
Resourcesパネルを使ってみよう
http://dotinstall.com/lessons/basic_chrome_dev/7105
また、ネットワークパネルを使えば
どのタイミングで読み込んでいるのかを調べることができる
使い方は
Networkパネルを使ってみよう
http://dotinstall.com/lessons/basic_chrome_dev/7106
を参考に
TimeLine でどの程度の時間がかかるかを調べることができる
青いラインがDOM構成の時間
赤い線がすべて終わった時の時間
という意味になっている
一番下のところは
フィルタリングで、これは
画像だけにしたり
ドキュメントだけにしたりできる
通行止めのようなアイコンがあるけど
これはクリア
その横にある●は、一時保存のような効果
これは、他の画面にいったら
結果が消えてしまうので、これを押しておくことで保留しておける
また、ネットワークパネルで
右クリックすると
メニューから
browser の cache を消すこともできる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です