本日も Google Developer Tools で変数をチェックしたりしつつ、上機嫌で JavaScript と戯れていたところ、突然なんだかわからないモードに陥いりました。




下がその Google Developer Tools の画面なのですが、これを開いたまま対象のWebページを再読み込みをしたところ・・・

 
下のように突然画面が暗転して”Paused in debugger”の表示が出たのです。

Developer Tools の画面を見ると、jQuery を読み込んだところでエンジ色の右矢印が出て止まっています。

これはプログラムにブレークポイントを設定したときの状態です。ブレークポイントとはパラメータやオブジェクトの中身をチェックするために印をつけたポイントでいったんプログラムを停止する機能です。

実際ここで、下の図の通りコンテキストメニュー(右クリックメニュー)から「Continue to here」をクリックすると…

このように普通にページが表示されます。くだんの箇所で、ブレークポイントを設定したかのような動作です。

問題は、ブレークポイントを設定した覚えがない、ということです。実際、チェックしてみてもブレークポイントなど設定していません。IE や Firefox で同じページを開くと、もちろん普通に表示されます。ところが Dev Toolsを開いて自分のページ以外の適当な外部サイトを開いても、”Paused in debugger”が出てやはりいったん止まってしまいます。たいていは自分のページ同様、jQuery読み込みの行で止まります。




症状から判断して、Google Developer Tools で何か設定してしまったことは間違いありません。今日が仕事初めということもあり、必死であちこちメニューを開いたり、怪しいそうなところをクリックしたり、ネットで検索しまくっても原因がわからない!

嗚呼、いったいなにが起こつているのだらう。なにがなんだかさつぱりわからないぞ。いや、実は上の画像にすでに答えは示されているのでした。

Developer Tools を使いこんでる人は、おそらくこれを読みながらにやにやしていることでしょう。そうです、犯人はコレ↓でした。

このボタン、たんに飾りではなかったんですね。もちろん飾りボタンがついてるとは思っていませんが、この Google Developer Tools、機能が豊富すぎて、そこそこ使ってるつもりでも全然触ったことのないメニューやボタンがあるものなのです。いや単に自分の勉強不足なんですが…。

このボタン(正式名称不明)は三段階のトグルボタンになっています。クリックするたびに、プログラム内部で例外(エラー)が発生したときの動作がかわるようになっていました。以下、簡単に説明します。

[I]標準モード。”Don’t pause on exceptsions”。例外が発生しても何もしないモード。デフォルトではこの状態です。

[II]青色モード。 “Pause on all exceptions”。つまり例外が発生すると無条件にそこで必ず停止する。今回がこの状態でした。

[III]紫モード。 “Pause on uncaught exceptsion”。つまりキャッチしていない例外(プログラム的に処理していない例外)が発生した場合のみ停止する

何かのはずみでこのボタンをクリックしていて、知らない間に確変モードに突入していたわけです。そして jQueryが発生させた例外のところで停止したのでした。もちろん意図的に例外を発生させることもあるのでこれがjQueryのバグというわけではありません。ソースはおっかけていないですが、どこかで try~catchを使っているのでしょう。

新年早々、つまらないことで時間を無駄にしましたが、まぁおかげで役に立つ機能を一つ覚えたと思うことにして自分を慰めることにします。

(2013/01/04 22:49 投稿)