FC2ブログ

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 を消すこともできる

スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック