今回のテーマは「DevTools(デベロッパーツール)」。
今回はChromeのDevToolsを使うが、EdgeやFireFoxなどにも同じような機能はあるらしい。
※Edgeでも試してみたが、Chromeのほうがより細かく色々な情報が見られるような気がする。(ぱっと見)
何はともあれ、触ってみないことにはお話にならないので、早速触ってみることにする。
ターゲット
せっかくなので、ターゲットはこのブログｗ
このブログはBloggerで作ってあるが、Bloggerのデフォのテンプレートはシンプルすぎるので、いろんな人が作ってるテンプレートをシェアする gooyaabitemplates.com から、好みのテンプレを持ってきて、テキトーにカスタマイズして使っている。
テキトーさがこのDevToolsでモロバレになるのではないかと、内心ビビっているｗ
ドキドキするが、先に進もう。
DevToolsの起動
私はWindowsなので、F12でDevToolsが起動できる。
デタ。(嬉)
言語設定
割と最近、日本語版が使えるようになったらしい。
DevToolsの画面右上に歯車マークの「Settings」があるので、そこから
Preferences ＞ Appearance ＞ Language
で日本語を選べばよい。(そのあとDevToolsをリロードすると反映される。)
が。
日本語版見にくくない？
■日本語版
■英語版
結局、英語版に戻したｗ
これは完全に好みの問題なので、好きにすればいいと思う。
タブ(パネルというらしい)
え・・・タブ多くない？(悲報)
気を取り直して、1つずつ見ていく。
Select an element in the page to inspect it
このボタンを押すと、ボタンが水色になって、マウスでブラウザ上の要素を選択すると選択した要素がDevToolsで協調される。
ブラウザの要素からアプローチしたい場合にONにするとよい。
要素の構成をちゃんと把握してるよっていう場合は、別にONしなくても、Elementsタブの該当要素の部分にカーソルを持っていくと、その要素がブラウザ上でハイライトされる。
Toggle device toolbar
スマホやタブレットの画面とPCの画面を切り替えることができるボタン。
レスポンシブ対応にはありがたい機能。(しかもプルダウンで色々なデバイスを選択できるのはうれしい！)
Element
要素を表示。
選択した要素のスタイルもここで変えられる。
例えば、選択した要素の色を変えたい場合は、element.styleにcolor: 色と指定してやると、ブラウザ上で確認ができる。
paddingを0 → 100にする場合は、Computedタブの図の数値を変更するだけ。
デザイン的にお試しができるのはありがたい機能。
F5でリロードすれば、変更箇所は元に戻る。
Console
ログとか、ワーニングやエラーが出る。(リンクエラーなんかもここに出る)
早速なんかワーニングが出とるw
Application Cache API manifest selection is deprecated and will be removed
学習を始めたばかりだと、もう、言葉がわかんないｗ
アプリケーションキャッシュはHTMLやJavaScriptなどのファイルをローカルにキャッシュしておくものらしい。
で、HTMLにはマニフェストっていう属性があって、アプリケーションキャッシュの情報を記述したマニフェストファイルなるものの場所を指定するものらしい。
だから、マニフェストファイルが重複しているから、重複しているもののうちどっちかが無効になるよ、とかそういうワーニングなんだろうか。(憶測)
この辺は、学習を進めていくと、そのうちわかるようになるといいんだけど、今回の目的は、DevToolsの使い方を一通り触ってみることなので、ここではこれ以上深追いはしないことにしよう。(そうしないと、終わらない。悲)
Consoleには、ログ以外にももう1つ機能があって、JavaScriptを実行できるらしい。
適当にJSのコードを書いて、Enterすると、実行された。
ふむふむ。
Webサイトに埋め込まれているJSを、一時的に変更して試してみたい時に使ったりするのかな。(JavaScriptのなんたるやも知らないので、今試してみることさえできないのだけど。)
今後の私に期待ｗ
Sources
Webブラウザで使われているソースコード(CSSとかJavaScriptとか)を表示するだけでなく、編集も可能。
Elementsパネルで変更したように、Sourcesパネルでも編集・変更したコードは表示に反映される。
そして、なんとPretty-printボタンを押すと、インデントや改行が復活して、めっちゃ見やすくなる！！スゲー
■整形前
■整形後
CSSとかJavaScriptのコードって、改行がなくて見にくいな～って思っていて、世の中の人は、こんな改行なしのコードを読めるのか・・・と思っていたが、違ってたｗｗ
CSSやJavaScriptのコメントや改行などの無駄な記述を省くことで、コードを軽量化しているらしい。コードを軽量化することを「Minify」というのだとか。
あとは、JavaScriptのコードには、ただの記号の羅列(もはや暗号ｗ)のような記述があって、これも一体ナニモノなのか？と思っていたのだが、これも「難読化」というテクニック(技術？)のようで、あえてソースコードを読みにくく記述して、可読性を下げることでリバースエンジニアリングを防ぐ目的があるらしい。
もはや暗号、と思っていたが、やっぱり暗号だったのだｗ
(理解できなかったのは、きっと私の頭が悪いからではないはず。)
話はSourceパネルに戻るが、JavaScriptのデバッグもできるらしい。
現段階ではさっぱりだが、確かに右側にWatchウィンドウらしきものやブレークポイントがあるので、ステップ実行とかいろいろできるんだろうな。
なんか、組込み業界に長くいたからか、デバッグ環境を作るのってお金と時間がかかる(かつ実績のあるツールしか使えない)っていうイメージがものすごくあるんだけど、こんな簡単にデバッグ環境が手に入るなんて、正直震える。
え？いいの？使って？・・・的な。
意味不明な申し訳なさすら感じるｗ
Network
ブラウザ上で行われているやり取り(リクエストやレスポンス)が見られる。
表示速度を確認したり、通信の内容、ステータスコードなど様々な情報を確認することができる。
Disable cacheにチェックしておけば、初めてのページを開く場合の速度などもわかる。
そのほかにも、3Gの場合などもシミュレートできるので、疑似的にイロイロ手軽に確認できて便利。
Networkパネルの使い方は、勘所を押さえておかないと効率的にかつ正しく使えない気がする。
今はまだよくわかっていないが、murashunさんの記事「Chrome DevToolsの使い方」にわかりやすく記載されていたので、ネットワーク状況の調査をするようなことがあれば、参考にさせていただこう。
Performance
更新マークを押して計測を開始すると、計測が終わると自動で停止する。
Networkも多機能だな、と思ったが、Performanceパネルはもっと多機能そうだな・・・。
上のグラフの縦の赤線はページの表示が完了した時点を表す。
下のドーナツグラフは表示が完了するまでにかかった時間とその内訳を表す。
- Loading：URLからHTMLおよび必要なリソース一式を読み込む時間
- Scripting：JavaScriptの実行時間
- Rendering：スタイルの計算とレイアウトの実行時間
- Painting：描画時間
- Other：オーバーヘッドの時間
- Idle：待ち時間
今回の自分のブログの場合は、Totalが1796msなので、表示に2秒弱かかっているということになるのかな。
ドーナツグラフの内訳でどこに時間がかかっているのかわかったら、Buttom-UpタブやCall Treeタブでさらにどこで時間がかかっているのかを確認することができる。
こういう表示時間を可視化できるツールが、デフォで備わっているというのは素晴らしい。(しかも無料とか、もう意味わかんないｗ)
NetworkパネルとPerformanceパネルの使い分けがいまいちよくわからない・・・。
Performanceパネルだけでいいような気もするが、Networkタブがあるということは、Networkタブでしか見られない何かがあるのかな。
今度の授業で聞いてみよう。
2021/10/23：追記
NetworkパネルとPerformanceパネルについて調べなおして、2つは全然別物だと判明。
そもそもの目的が違う(タブ分けてあるんだから、そりゃそーか)。
Memory
メモリリークの追跡用。
Performanceパネルで、Memoryにチェックを入れるとメモリの開放が可視化できるので、それでもわかるが、もっと詳細な情報を調査したい場合は、Memoryパネルを使う。
詳細はあまりよくわかっていないが、メモリだけで色々な観点から調査できるので、きっとメモリリークを追跡するには便利な機能なのだと思う。
ていうか、JavaScriptはガベージコレクションがあるのに、コードの記述方法によっては、メモリリークが起こるとか怖すぎる。
言語が異なると、そういう概念も違ってくるから、頭を柔らかくしておかないと、固定概念でコードを書いてしまいそう・・・。
気を付けなくてはいけない。
Application
表示されているページの、Local StorageやCacheについての情報が見られる。
Cookieの確認とともに破棄もできるので、認証をいったんクリアしたい時やログアウトしたい時なんかに使えるのかなぁ・・・
それ以外はちょっと用途があまり思い浮かばない。
Security
有効な証明書かどうか、安全な接続が確立されているか、安全なリソースで配信されているかどうかを確認できるパネル。
DevToolsの概要はこのくらいかな。
機能はたくさんあるけど、実際によく使う機能というのは、限られてきそうだと感じる。
基本的な機能をしっかり押さえておいて、必要になったときに調べて使える状態にしておくことが大事。
特にNetworkとPerformanceパネルは、今後HTTP通信のやり取りをするコードを書くときに大いに役立ちそうだな。
DevToolsの存在は知ってはいたものの、項目が多すぎて使ったことがなかったし、使う機会もなかったが、ほんの少しでも「知る」ことで身近に感じるし、実際に使ってみようかなという気になるから不思議だ。
時間があるときに、色々なサイトに対してDevToolsという視点で見てみることにしよう。
