解説
Webブラウザの「開発者ツール」(Developer Tools/DevTools)は、Webサイトの構築やWebページの作成に役立つ、Webブラウザの機能です。主要なWebブラウザには、この開発者ツールが付いています。Windowsでは「F12」キー、Macでは「Command+Option+I」などのショートカットで呼び出せることが多いです。
主要なWebブラウザが備えている「開発者ツール」の機能は似通っています。例えば「Google Chrome」では、DOM要素ツリーを表示するタブや、コンソールの内容を表示するタブがあります。他にも、読み込んだファイルを確認するタブや、ネットワークの情報、メモリやCPUなどの情報を確認するタブが用意されています。
サンプル
開発者ツールのコンソールに情報を表示するJavaScriptのプログラムを掲載します。
ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
<html>
<head>
<title>「コンソール」のサンプル</title>
<meta charset="UTF-8">
<script>
console.log('コンソールに情報を出力');
console.log(window.location);
</script>
</head>
<body>
開発者ツールを開き「コンソール(Console)」タブを確認してください。
</body>
</html>
