1. 開発者ツールとは

開発者ツールはブラウザの機能のひとつで、表示しているページのHTML/CSS/JavaScriptを
一時的に書き換えたり、調査することができます。
ここからはChromeのDeveloper Toolsを使用していきます。

まずは、以下の内容を「SampleJS.html」に記述してください。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SampleJS.html</title>
  6. <script type="text/javascript">
  7. // スクリプトを記述
  8. </script>
  9. </head>
  10. <body>
  11. 	Hello World
  12. </body>
  13. </html>

それではChromeを起動し、SampleJS.htmlをドラッグしてChromeの上でドロップしてSampleJS.htmlを表示させてください。
SampleJS.htmlが表示できたら、「F12キー」を押してください。
すると、以下の画像のような画面が表示されたと思います。
  chrome_devtool1

左上の「Elements」が選択されている事を確認してください。
「Elements」は今見ているページのHTMLのコードや各要素に設定されているスタイル等を見る事ができます。

次は「Elements」の右隣の「Console」を選択してください。
以下の画像のような画面に切り替わります。
 chrome_devtool2

ここはエラーメッセージや、ログメッセージが表示されます。
試しにSampleJS.htmlのscriptタグの中に「var var = 100;」と記述して上書き保存し、ブラウザをリロードしてください。
以下の画像のようなエラーメッセージが表示されたと思います。
  chrome_devtool3

赤い文字がエラーメッセージで、右側の「SampleJS.html:8」は「SampleJS.htmlの8行目で発生したエラー」という意味になります。

次は「var var = 100;」を「console.log("Hello World!");」と書き換えて、上書き保存してブラウザをリロードしてください。
すると、以下の画像のような画面が表示されたと思います。
  chrome_devtool4

黒い文字がログメッセージで、右側の「SampleJS.html:8」は「SampleJS.htmlの8行目で出力されたログ」という意味になります。
console.log();は、メッセージだけでなく変数も出力できます。

  1. var hoge = "こんにちは";
  2. var fuga = 12345;
  3.   
  4. console.log(hoge); // こんにちは とコンソールに出力
  5. console.log(fuga); // 12345 とコンソールに出力

This software includes the work that is distributed in the Apache License 2.0

最終更新日時: 2018年 05月 9日(水曜日) 11:25