ども。いま現在は侍エンジニア塾というプログラミングスクールでJavascriptの学習をしております。
Javascriptはほとんど始めてなのですがサンプルコードがうまく動かなくて四苦八苦しています。それでブラウザの「デベロッパーツール」「開発者モード」「要素の検証」というのを使ってデバッグする方法をメモしています。
・デベロッパーツール
・開発者モード
・要素の検証
これらは3つとも同じ意味で使われているようで人によって呼び方が違うので混乱していましたが、全部同じです。
この記事ではデベロッパーツールということで統一したいと思います。
ブラウザのデベロッパーツールを開く
ブラウザはChrome、Firefox、IEなどがありますが最近はChromeが多いのかなと思います。Firefoxはエンジニアの間では非常に好まれて使われているブラウザなのでFirefoxでもよいでしょう。
プログラミングの参考書などではIEが取り上げられる事が多いようですがシェアが少ないのでね。。
さて、デベロッパーツールの開き方ですがブラウザのなかでキーボードの「F12」キーを押す。
またはブラウザの中でマウスの「右クリック→要素の検証」と進めばよいです。
以後はChromeの画面で進めていきます。
私はFirefoxが好きなんですけど、開発環境としてAmazonのCLoud9というクラウド上でプログラミング開発ができるサービスがありまして。
これはブラウザのChromeでCloud9にアクセスして操作するのでChromeを対象としているのです。
侍エンジニア塾ではそのCloud9でプログラミング学習をしているので、ブラウザは自動的にChromeを使う事になりますので。
そうすると次のような画面が出てきました。
これはローカルで作成したhtmlのサンプルです。htmlファイルをブラウザで開いたところから、デベロッパーツールを開いたところです。
画面下部に見える英語の部分ですね。残念ながら2018年現在では日本語化はされていない様子です。
画面の見え方も変える事ができます。デベロッパーツールの右端にある縦三連のボタンからDock sideのアイコンを選択することで、デベロッパーツールの場所を変えることができます。お好みで。
↓画面右側に出すとこうなります。
次からはよく使うメニューについてのメモです。
HTMLやCSSを画面を見ながら修正する方法と、
Javascriptのデバッグやブレークポイントについて説明していきます。
ElementsとStylesでHTMLとCSSを修正してみる
簡単なので（といっても2分程度）Youtube動画にまとめました。
Chromeでデベロッパーツールを開きながら、HTMLの画面を見ていわばプレビュー状態のようにしながらCSSやHTMLを変更してみて、どうなるかをチェックできます。
見栄えがうまくいったら、そのコードをCSSファイルにコピペする、といった使い方になります。
Javascriptにブレークポイントをつけて動作を追いかけてみる
なんてことないhtmlとJavascriptをつくってみました。
こんな動きをします。
テキストボックスがあるだけの画面。ここに文字を入力します。
するとアラート画面を（わざわざ）3回表示させて
そのあと赤字で入力されたのと同じ字を表示させています。
こちらがHTMLファイル
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>文字が赤色になるテスト</title> <link type="text/css" rel="stylesheet" href="test01.css" /> <script type="text/javascript" src="../jquery-3.3.1.min.js"></script> <script type="text/javascript" src="test01.js"></script> </head> <body> <input id="id_textbox" type="text" value="" /> <div id="str-red"></div> </body> </html>
inputタグのところがユーザーに入力をさせるテキストボックスです。
id=”str-red”のdivタグは初期状態では何も表示しませんけど、Javascriptによってここに文字を表示させるような動きにします。
こちらがJavascrptファイル。
$(function() {
$('#id_textbox').on('input', function(e) {
window.alert('1');
window.alert('2');
window.alert('3');
$('#str-red').text($('#id_textbox').val());
});
});
やってることは単純です。idが#id_textboxのテキストボックスでinputイベントを受け取ったら、
window.alert(‘1’);というところでアラート画面を1回だして、同様にwindow.alert(‘2’)、window.alert(‘3’)と表示します。
その後、#str-redのdivタグにtextメソッドで、#id_textboxに入力された文字を表示させるという処理にしています。
ちなみにCSSは
#str-red {
color:#f00;
font-size:20px;
}
これだけ。フォントサイズ20ピクセルで赤字を指定しています。
このような流れのHTMLとJavascriptファイルを事例としています。
もし動作がおかしかったり、挙動を見たい場合にChromeのデベロッパーツールを使ってみます。
ローカル環境でデベロッパーツール
ブラウザにhtmlファイルをドラッグ＆ドロップで放り込んで、HTMLを表示させたら、デベロッパーツールを起動します。（右クリック＞要素を検証）
デベロッパーツールの上部タブから「Sources」を選択します。
左側にファイル階層が出てくるので該当のファイル（この場合はtest01.js）を選択しました。
すると右側にファイルの中身が表示されます。
ソースの左側に行番号が書かれているので、止めたいところをクリックしてブレークポイントを設定。
以下の図では4行目のwindow.alertに設定しています。
ここでテキストボックスに適当に1文字入力してみます。
するとブレークポイントの手前で停止します。window.alertはまだ出ていません。
画面右側の「Step Into」のボタンをクリックすると次の処理へ1つだけ進みます。
そうするとここで始めてwindow.alert(‘1’)の処理が動いて、ダイアログが表示されます。
Step Intoをすると次の行、次の行と進んでいくのでどこの処理が動いているのか一目でわかりますね。
つぎに「Step Over」のボタンを見てみましょう。
下の図はStep Intoで1行ずつ進めていき、
$(‘#str-red’).text($(‘#id_textbox’).val());
の手前でとまっているんですけど、
ここでStep Intoをすると中の関数の中にまで入っていってしまいます。こんなときはStep Overをクリックして。
関数の中を通り過ぎて次の処理まで進んでくれます。
Javascriptの7行目でdivタグの中身に赤文字を設定しているので、このタイミングで表示がされましたね。
と、このようにして処理の流れを追うことができました。
Cloud9でデベロッパーツールを使ってみる
問題はCloud9でJavascriptを動かしたときに、ちょっと画面がおかしいんですよねぇ。
こちらがCloud9でtest01.htmlをPreviewで開き、その画面上でデベロッパーツールを起動した直後の画面です。
Cloud9のソースコードが出ちゃってるようで、test01.htmlのソースコードとかが出てこない。
Sourcesを開いて、左下の画面の階層をみるとtest01.htmlがあったので、その下の階層を見ていきます。
階層を下っていくと見つけました。これでローカル環境と同じようにJavascriptのデバッグが出来そうです。
