中堅システムエンジニアの備忘ログ

20代後半SEによる、備忘を兼ねた技術的な記事メインのブログです。

【Webエンジニア向け】よくわかる「F12 開発者ツール」の使い方~コンソール、デバッガー編~【MicrosoftEdge】

こんばんは。ねるおです。

 

前回(【Webエンジニア向け】よくわかる「F12 開発者ツール」の使い方~DOMExplorer編~【MicrosoftEdge】)に引き続き「F12 開発者ツール」の使い方

のお話です。今回は「コンソール」「デバッガー」の機能について説明します。

Webページ中のエラーを教えてくれる「コンソール」とエラー解析の必需品「デバッガー」

 「コンソール」はWebページ中のエラーを教えてくれます。「デバッガー」はその名の通りデバッグする際の強力なサポートツールです。「書いたJavaScriptが予定通り動かないよ~(泣)」なんて時に大活躍です。

 

それでは実践してみます。

ユースケース:入力したスイーツをアラート表示する機能を作成】

 

使用したソースコードは以下です。

 <title>F12 確認用</title>

好きなスイーツを入力して下さい。:<br>
<input id="sweets"><input type="button" onclick="sweets_alert()" value="押す">
<script>
function sweets_alert() {
    var sweets_name = document.getElementByI("sweets");
    alert(sweets_name);
}
</script>

 

上のソースコードをEdgeで開き、動作させても、

f:id:kojikoji1990:20170603210454p:plain

エラーがあるので、動きません。それでは、「コンソール」と「デバッガー」を駆使してエラーを解消しましょう。

 

 

f:id:kojikoji1990:20170603211215p:plain

①「F12 開発者ツール」が起動されている状態でボタンを押します。

②エラー文が出ます。(今回はgetElmentByIdと書きたいところをgetElmentByIと誤記していました。)

 

エラー箇所を修正して再チャレンジ!

f:id:kojikoji1990:20170603211720p:plain

③エラーを修正後、再度ボタンを押す。

④エラーは出なくなったが、またもや期待通りにはならず。。。

 

f:id:kojikoji1990:20170603212044p:plain

⑤「デバッガー」タブを選択します。

⑥あやしい箇所にブレークポイント*1をおきます。

 

ブレークポイントをおいて再チャレンジ!!

f:id:kojikoji1990:20170603212712p:plain

 ⑦変数”sweets_name”に何が格納されているか確認。どうやら「テキストボックスの値」ではなく、「テキストボックスそのもの」が格納されてしまっている模様。

 

「テキストボックスの値」を取得するように修正して、再チャレンジ!!!

f:id:kojikoji1990:20170603213104p:plain

まとめ

いかがでしたでしょうか。「コンソール」「デバッガー」は「F12 開発者ツール」のみならず、多くの開発環境で整備されているものなので、ぜひ使い方をマスターしておくとよいです。

ねるおも久々にWeb開発の現場に行くと「えーと、どうやるんだっけ?(///▽///)」となるので備忘も兼ねて書いてみました!

 

 

ねるお。

 

 

*1:ソフトウェア開発デバッグ作業において実行中のプログラムを意図的に一時停止させる箇所である。ブレークポイントの指定機能は多くのデバッガに備えられており、これを用いることでプログラムの任意箇所への到達を自動的に捕捉できる。ブレークポイントでの停止後、プログラマは通常のデバッグ作業同様に実行環境(メモリレジスタログ、ファイルなど)を観察し、プログラムが期待通りに機能しているかどうかを判断する。(Wikipediaより。)