本日のゴール
本日は、Chromeの開発者ツールの基本の「き」を学びます。
Web開発では、開発者ツールの利用は基本中の基本なので、色々実験してみて、学びを深めて下さい。
ネットワークの読み込み状況を確認する
Chromeの開発者ツールを使って、HTML、CSS、JavaScriptファイルの読み込み状況を確認します。
| 1 | Chromeを使って、「Bootstrapの組み込み」で作成したページを表示し、 「Ctrl+Shift+i」 を同時押しし、開発者ツールを表示する。 ※F12キーでも同じ操作が可能。 |
 |
||||||||
| 2 | デフォルトではElementsタブが表示されているので、 Networkタブ をクリックする。 【解説】 開発では、「Elements、Console、Network」タブをよく使います。
|
|
||||||||
| 3 | ブラウザの再読込ボタンをクリックし、Networkタブに読み込まれたリソースファイルが表示されることを確認する。 |
|
||||||||
| 4 | 作成したXPageを開き、CSSファイル名をわざと間違った名前に変更し、保存ボタンをクリックする。 【変更後】 <xp:styleSheet href=”css/bootstrap222.css”></xp:styleSheet> |
 |
||||||||
| 5 | XPageはNSFファイルにある設計要素をファイルシステム上に出力して実行しているので、最新の設計要素を反映するために、 プロジェクト＞クリーン を選択する。 |
 |
||||||||
| 6 | 「すべてのプロジェクトをクリーン」を選択し、OKボタンをクリックする。 |  |
||||||||
| 7 | ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。
|
 |
||||||||
| 8 | 開発者ツールの「Network」タブをクリックし、ブラウザの再読込ボタンをクリックする。 cssファイルが赤字で表示され、読み込みが失敗していることを確認する。 |
 |
||||||||
| 9 | CSSファイル名を元に戻し、次はJavaScriptファイル名をわざと間違った名前に変更し、保存ボタンをクリックする。 【変更後】 <xp:script src=”js/bootstrap.bundle222.js” clientSide=”true”></xp:script> |
 |
||||||||
| 10 | プロジェクト＞クリーンをクリックし、最新の設計を反映する。 |  |
||||||||
| 11 | ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。
【解説】 |
 |
||||||||
| 12 | 確認後、JavaScriptファイル名を元に戻し、XPageを保存する。 |
要素の色を変えてみる
開発者ツールを利用して、一時的に要素のプロパティを変更します。
| 1 | ブラウザの開発者モードを起動し、 「マウスアイコン」 をクリックする。 |
|
| 2 | マウスでドロップダウンボタンを選択し、Elementsタブで該当するHTMLタグが選択されていることを確認する。 |
|
| 3 | HTMLタグの右側のStyleタブには、適用されているCSSが表示されていることを確認する。 |
|
| 4 | CSSの.btn_secondaryクラスに設定された、background-colorプロパティの色番号の横にある■をクリックし、自由に色を選択する。 選択した色がドロップダウンボタンの背景色として反映されることを確認する。 【解説】 ここでの変更は、ブラウザ上で実行されている値が変更されているだけなので、ブラウザを再読込すると元の状態にリセットされます。 |
|
| 5 | ブラウザのリロードボタンをクリックし、ドロップダウンボタンの色が元に戻ることを確認する。 |  |
コンソールログを出力する
JavaScriptを使って、コンソールログにボタン名を出力します。
| 1 | XPagesをソースタブで開き、ドロップダウン用HTMLの下にコンソールログ出力用のJavaScriptを追加し、保存ボタンをクリックする。 ソースは、【コンソールログ出力JavaScript】を参照。 |
 |
| 2 | ブラウザでプリビューし、開発者モードを表示する。 Consoleタブをクリックし、ボタン名 「ボタン名：Dropdown button」 が表示されていることを確認する。 |
 |
【コンソールログ出力JavaScript】
<script>
console.log("ボタン名：" + document.getElementById("dropdownMenuButton1").innerHTML);
</script>
