1. 開発者ツールとは

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SampleJS.html</title>
<script type="text/javascript">
// スクリプトを記述
</script>
</head>
<body>
	Hello World
</body>
</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();は、メッセージだけでなく変数も出力できます。

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

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

Last modified: Wednesday, 9 May 2018, 11:25 AM