デバッグ：Google Chrome のセットアップ

Google Chrome は、ブラウザです。
が、WEB アプリ開発で非常に役に立つ「デバッガ」やアドオンが多数用意されており、
編者は開発環境として重宝しているので、この章で紹介します。

Google Chrome のインストール
インストーラは、ココで入手できます。
[Google Chrome をダウンロード] ボタンを押し、
セットアップ用プログラムをダウンロードして、実行します。
画面の指示に従って行けば、インストールできるでしょう。
途中に出てくる選択肢は、お好みで。

デバッガ
Google Chrome 上で F12 キーを押すと、右側にデバッガのウインドウが開きます。
編者は、以下のタブをよく利用します。
・コンソール
  エラーメッセージなどが表示されます。

・ソース
  ブラウザが読み込んでいるソースコードの中身が見れます。
  JavaScript を選んで、コード上をクリックすると、
  行番号が青色に変化し、ブレークポイントが設定されます。
  WEB を実行するとブレークポイントで一旦実行が止まります。
  右ペインの「スマートウォッチ」で各変数の内容などが確認できます。
  ステップ実行なども可能です。
  また、
  JavaScript や CSS は編集可能で、リアルタイムに編集内容が WEB画面に反映されます。
  # ただし、編集内容はソースコードのファイルには保存されません。
  # あくまでも一時的な確認になります。

・ネットワーク
  HTTP通信の内容が詳細に確認できます。

アドオンの入手方法
蛇足ながら、Google Chrome のアドオンは、以下の方法で入手できます。
・Google Chrome、画面右上の3点リーダー → 拡張機能 → Chrome ウェブストアにアクセス
・検索欄に、所望のアドオン名を入力。表示されたリストから選択。
・「Chrome に追加」をクリック
・「追加しますか？」Popup で「拡張機能を追加」をクリック
・必要なら Google Chrome を再起動。

Chrome Logger アドオンのインストール
上記の方法に従って、
「Chrome Logger」をインストールしておきます。
次章で使用します。