33日目:ドットインストールで勉強中(Chrome Developer Tools入門開始)

SNSやってます。

タイで生命保険に入っているのですが、やっと証書が届きました。これでやっとタイの確定申告が進められます。

日本でも確定申告しなければならないくらい儲けたいものです。

こんにちは、バンコク在住のダイ(@daijirok-jp)です。

今日はJavaScriptから一旦離れてChrome Developter Toolの勉強をすることにしました。

ドットインストールのようにいろんなレッスンが網羅してあるのはとても助かります。

本日の学習結果

今日は「Chrome Developer Tools入門」の勉強を開始しました。

  • #01 Chrome Developer Toolsとは?
  • #02 Elementsパネルを使ってみよう
  • #03 Stylesを操作してみよう
  • #04 Networkパネルを使ってみよう
  • #05 Sourcesパネルを使ってみよう

感想

レッスン最初の動画「#01 Chrome Developer Toolsとは?」では、デベロッパーツールの公式サイトが https://developer.chrome.com/devtools である事の他、Chrome Developer Toolsというのはグーグルクロームに内蔵されているデバッグツールだという事を学びました。

またウェブサイト上で右クリック「要素の検証(英語版ならInspect)」を選ぶとそれに対応するHTMLコードも表示してくれるという親切さ。これはどういう風に実現しているのかなというウェブサイトを訪問した際も、気になった時はすぐに確認できると言う事ですね。

知りませんでした。

#02 Elementsパネルを使ってみよう」では、ElementsパネルではウェブサイトのHTMLを表示するだけでなく、それを編集しブラウザで確認できると言う事をはじめて知りました。

#03 Stylesを操作してみよう」では、HTMLだけでなくCSSも詳細を確認してその場で編集できることが分かりました。

その他、擬似要素の:hoverや:focusなんかもきちんと確認できました。

#04 Networkパネルを使ってみよう」では、画像やCSSを読み込むのにどのくらいの時間がかかっているのかという事が確認できると言うのを学びました。こんな事までできるんですね。ビックリしました。

#05 Sourcesパネルを使ってみよう」では、ページで生成されたHTMLを1枚つのページで確認できました。このページでも編集とその結果の表示が見れるはずなのですが、ワードプレスで生成されたページのIndexは編集ができませんでした。

どうして編集できないのか分かりませんが、まあ、そのうち分かるようになるんでしょう。

今回学んだデベロッパーツールの機能ですが、すごく便利なようでいてブロガーの私には結局使う場面はないのかなぁという機能でした。

もちろん知っておいて損はない、いつか役に立ちそうな機能たちでした。

もしネットサーフィンをしていて気になる表示があった際は、コードを見てみようという気にさせられました。