「Javascript」のエラーをチェックできる「開発ツール」は、
各ブラウザごとに用意してくれています。
「CSS」のレイアウトチェックにも使える機能も含まれているので、
レイアウトデザインの「CSS」をコーディングするときにも使えます。

「開発ツール」で、「Javascript」のエラーチェックなどを行うのに使用するのは、
「コンソール」画面を多く使います。
「Javascript」に用意されている「console.log()」メソッドは、
ブラウザの「コンソール」に表示するためのメソッドなので、
「console.log("Hello!!");」と「Javascript」に入力して実行すると、
ブラウザのコンソールには、「Hello!!」と表示されます。
「Javascript」を実行した結果も「コンソール」に表示してくれて、
問題のある個所を表示してくれたりと、
開発には、何かと便利に教えてくれるのが「コンソール」です。

他にも、
内容をブラウザに表示するメソッドもあるので、
使い分けて、内容をチェックしながら「Javascript」の開発を進めていきます。

メソッド	説明
console.log()	ブラウザに付属しているコンソールに情報を出力できる。
document.write()	Webページに情報を出力できる。
document.writeln();	Webページに情報を出力できる。出力内容の後に、「改行」文字を一緒に出力してくれる。
alert()	ポップアップしてくるアラート画面に、情報を精細する。
blob()	情報をファイルに出力する。

「FireFox」ブラウザの開発ツールを開く方法

FireFoxの開発ツールは、
・ショートカット「Ctrl + Shift + K 」
・「トップメニュー」→「ツール」→「ウェブ開発」→「開発ツールを表示」
などの方法で開くことができます。

「Internet Explorer」ブラウザの開発ツールを開く方法

Internet Explorer では F12 キーで開きます。

「Mac OS X」ブラウザの開発ツールを開く方法

Mac OS X では ⌘ + ⌥ + I キーで開きます。

その他のブラウザの開発ツールを開く方法

ほとんどのブラウザでは、
「Ctrl + Shift + I」
で開発ツールを開くことができるらしい。

「Chrome」＝「メニュー ➤ その他のツール ➤ 開発者ツール」
「Safari」＝「開発 ➤ Web インスペクタ」
「Opera」＝「開発者用ツール ➤ Web インスペクタ」

Back

「console.log()」メソッドの使い方

「console.log()」メソッドは、「コンソール」に出力ができるメソッド。
「コンソール」は、Webブラウザの機能の１つで、
開発の色々なチェックなどに使われる機能の１つ。
「Windows」の「コマンドプロンプト」の参照用タイプのWebブラウザ版みたいなもの。

「console.log()」メソッドの書式

console.log("出力したいテキスト");
console.log(変数);
console.log(変数 + "出力したいテキスト" + 変数);

Back

情報を出力してチェックできるメソッド

「Javascript」では、
情報を出力して、チェックできる方法がある。

出力ができる関数

メソッド	説明
console.log()	ブラウザに付属しているコンソールに情報を出力できる。
document.write()	Webページに情報を出力できる。
document.writeln();	Webページに情報を出力できる。出力内容の後に、「改行」文字を一緒に出力してくれる。
alert()	ポップアップしてくるアラート画面に、情報を精細する。
blob()	情報をファイルに出力する。

Back