動的に読み込まれるjavascriptをデバッグする方法

動的に読み込まれるjavascriptをデバッグする方法
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

最近のブラウザ(IE,Chrome,Safari,Firefox)は便利になってきて、今やAjaxの動作をデバッグできる様になりました。

また、Firefox JavaScript Debugger等もとても便利です。オプション設定を行うことにより、様々な場面で、処理を停止して、ステップ実行することができて、早期バグ発見につながります。

今回はブラウザの開発ツールを使う場合と、javascriptのソースコードで編集してデバッグする場合の2つを紹介します。

Chromeで基本のデバッグ方法(ツールを使う場合)

javascriptのデバッグを行う際 Developer Toolを利用して、デバッグを行いますが、

image25

Chromeの右上のボタン、

image21 [その他ツール] ⇒ [デベロッパーツール] ⇒ デベロッパーツール起動
image15

デベロッパーツールの上部タブ [Sources] を選択して、プログラムソースの部分の行番号をクリックすると、ブレークポイントを貼ることができ、そこで、ページのクリック処理、スクロール処理等をチェックすることができます。

また、ページロードした時に、処理をステップ実行したい等、様々なイベントハンドル時に処理を止める場合は、下図の部分を任意に選択して、チェックしていくことができます。

コンテンツがロード完了した時に処理を止める

[Event Listener Breakpoints] ⇒ [DOM Mutation] ⇒ [DOMContentLoaded]

image14

この状態で実行!

image22

処理が止まりましたね。ここからステップ実行して処理を追うことができます。

このようにいろんな場面での処理のデバッグが可能になっています。

javascriptに明示的にブレークポイントを貼る

がしかし、今回のタイトルにもあるように、プログラムがキャッシュ対策されていた場合、処理を止めても、次に実行した時は新しいファイルとして、読み込みなおすので、止めることができません。いろいろ調べましたが、特に見つかりませんでした。(※もしかしたらあるかも)

なので、javascriptファイルの中で明示的にブレークポイントを貼る方法を今回紹介したいと思います。

どんな場面で使うのかは、私の分かる範囲で以下になります。

  • javascriptファイルをキャッシュしないようにした場合
  • ブックマークレットで即実行を行っている場合

上記は、読み込み後ブレークポイントを貼ってもリロードすると、再度読み込なおすまたは、違うファイルとして扱われるので、止めることができません。

そんな時は、”debugger;”をコードの一旦止めたい部分に記載します。

するとそこで処理を止めてくれます。

実際にやってみます。

testdebug.jsを作成し、alert(“Helo Debug”);を実行させる処理を作ります。

image23

alertが出る前に処理を止めたいとすると。

image03

alertの前に”debugger;”と記載する。

実行すると。
1.”debugger;”記載していない場合

image16

2.”debugger;”記載している場合

image20
ブレークポイントをデベロッパーツール上で付けなくても、止まりましたね!

実行できるブラウザ

実際どこまで使えるか、検証したところ、

  • IE8、9、10、11
  • Chrome
  • Safari
  • Firefox
  • Opera

上記ブラウザでは実行可能でした。

まとめ

クオリティ担保という意味では、デバッグは大切です。
必ず、ちゃんと動いているかは、細かなところまでチェックしておくことが一番のクオリティ担保といえるでしょう!

簡単な処理だから、動くだろうという油断は禁物です。必ず2度3度と処理を一つ一つ確認していくようにしましょう。

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。