Rails アプリケーション開発で役に立ったJavaScript デバッグの小技

Chrome devtools でイベント監視

いろいろなJavaScriptプラグインを使っていると
イベントの伝播を止めてしまうような動作をするものを使ってしまうことがあります。
function を割り当てたいイベントが止められていると厄介です。
代用できるイベントが生き残っていればそちらを使ってしまいたいです。
そんな時、どんなイベントが発生しているのかは Chrome devtools のmonitorEvents で確認することができます。
https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events

第一引数で監視対象、第二引数でイベントを指定します。

monitorEvents(window, "resize");

イベントの指定はイベント名だけでなく、”mouse” でマウス系のイベントを”key” でキーボード入力系のイベントを指定できます。
配列にして渡せば複数のイベントを確認できます。
省略した場合は全てのイベントが対象になりますが、プラグイン側で独自に定義したイベントは拾えないようです。

イベント監視の解除は

unmonitorEvents(window)

引数は同じです。

Better Errors でエラー確認

link_to :remote 等を使ってAjax 処理を行っていると
例外が発生してもエラーの内容をブラウザで確認できないので
development.log を開いて確認していたのですが、
Better Errors を使っているなら
/__better_errors
にアクセスするだけで簡単にエラーが確認できます。
Better Errors を使うようになって暫くたつのですが、最近までこの機能を知りませんでした。
/__better_errors では直前のエラーを確認することが出来るようです。
https://github.com/charliesome/better_errors/wiki#view-last-error

Better Errors なしだと devtools でエラーが起こったことだけしかわからないですが。

この後はdevelopment.log を確認したりコードを見なおしたり。

Better Errors を入れておけばこのようにエラーの詳細が確認できます。
ajax_better_errors

binding_of_caller も合わせてインストールしておけば、@users が空だということがすぐに確認できます。

これを知ってからAjax処理中に起きたエラーの確認がとても楽になりました。
この機能、README ではなくWiki の方に記載されているのですが、これはREADME にも記載しておいて欲しいですね。

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

tsunekawa

tsunekawaの書いた記事

開発
Vim部活動日誌

2014年06月20日

週刊Railsウォッチ

インフラ

Rubyスタイルガイドを読む

BigBinary記事より

ActiveSupport探訪シリーズ