今回はブレークポイントの使い方
http://dotinstall.com/lessons/basic_chrome_dev/7108
の動画解説を使って実戦開始
動画では、クリックすれば
ブレークポイントが設置されているみたいだけど
行数のところを右クリックして
Add Breakpoint を選択してもOK
実際に前回と同じように
Developer Tools を起動して
Sources タブで
13行目を修正して保存
そして９行目にブレークポイントを設置した状態で
おみくじをひく
をクリックすると、ブレークポイントの効果で
止まります
Sourceタブの中で、変数の上にマウスをもっていけば
中身をみることができるので
8行目の
var omikuji をみると
”” という中身がない状態になっています
今回は、関数の中身の確認ということで１つずつみたいので
↓のアイコンをクリック
これは
Step into next function というアイコン
これをおすことで、ブレークポイントから
次の処理へすすめていくことができます
結論から言えば単純なのですが
if (omikuji = “大吉”)
で代入となっているからですが
これも意外に気づかなかったりします
こんなときにマウスオーバーすることで
値がなにか変だと気づくことができ、
原因が分かったりします
ブレークポイントは、異常がおきている周辺で設置し
あとは１ステップごとにみていくことで
原因解明に役立てることができるというものです
このように、便利なツールですが
残念なことにタブレットやスマートフォン版の
chrome では使えないということです
あと、java script のソースに
debugger;
と記述すると、ブレークポイントを設置する
ということもできます