開発者ツールの使い方
開発者（デベロッパー）ツールとは、ウェブサイトやウェブアプリケーションの開発を行う際、エラーや不具合を確認、検証するための一連のツールです。
これらのツールはGoogle ChromeやSafariなどのウェブブラウザに組み込まれています。
開発を行うと、必ずエラーや不具合に遭遇します。そして、その度にそれを確認、検証、修正します。
開発とは、コードを書く、不具合が見つかる、不具合を直す、の繰り返しです。
この一連の作業を効率良く行うため、開発者ツールを使用します。
実際に開発者ツールに少し触れてみましょう。
ブラウザはGoogle Chromeを使うものとします。
使用するHTML
開発者ツールに触れる前に、まずHTMLを用意します。
本章では、先のJavaScriptとはの記事で使用したHTMLを使用します。
<button onClick="showHelloWorld()">サンプル</button>
<style type="text/css">
button {background-color: red;}
</style>
<script>
function showHelloWorld() {
alert("Hello world!!");
}
</script>
Google ChromeでHTMLを開いておきます。
開発者ツールの使い方
開発者ツールの起動
PCがWindowsであれば「F12」キーを、Macであれば「Command + Option + i」キーを押すと起動します。
ページ上で右クリックして「要素の検証」から起動することもできます。
要素の検証
開発者ツールの左上にある虫眼鏡のアイコンをクリックします。その状態でボタンをクリックしてみましょう。
要素が選択され、開発者ツール内で詳細な情報を確認することが出来ます。
表示された情報の解説をします。
開発者ツール内の上半分の赤く囲った部分にはHTMLが表示されています。
下半分の赤く囲った部分には、ボタンに適用されているCSSが表示されています。
開発者ツールには他にも開発を行う際に便利な様々な機能があります。
他の機能については後続の記事でも都度解説していきます。
