FC2ブログ

chrome と break point


今回はブレークポイントの使い方

http://dotinstall.com/lessons/basic_chrome_dev/7108
の動画解説を使って実戦開始

動画では、クリックすれば
ブレークポイントが設置されているみたいだけど

行数のところを右クリックして
Add Breakpoint を選択してもOK

実際に前回と同じように
Developer Tools を起動して
Sources タブで
13行目を修正して保存
そして9行目にブレークポイントを設置した状態で
おみくじをひく
をクリックすると、ブレークポイントの効果で
止まります

Sourceタブの中で、変数の上にマウスをもっていけば
中身をみることができるので
8行目の
var omikuji をみると
”” という中身がない状態になっています

今回は、関数の中身の確認ということで1つずつみたいので
↓のアイコンをクリック

これは
Step into next function というアイコン

これをおすことで、ブレークポイントから
次の処理へすすめていくことができます

結論から言えば単純なのですが
if (omikuji = "大吉")
で代入となっているからですが

これも意外に気づかなかったりします
こんなときにマウスオーバーすることで
値がなにか変だと気づくことができ、
原因が分かったりします

ブレークポイントは、異常がおきている周辺で設置し
あとは1ステップごとにみていくことで
原因解明に役立てることができるというものです

このように、便利なツールですが
残念なことにタブレットやスマートフォン版の
chrome では使えないということです


あと、java script のソースに
debugger;
と記述すると、ブレークポイントを設置する
ということもできます
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック