Ajaxのデバッグを簡単に実行したい!!
ブログの更新を頑張っています。ぽんてです。
最近Ajaxの非同期通信を利用したシステム開発をしているのですが、
とにかくデバッグがしにくい!
僕は普段、PHPを使うときは「var_dump()」を利用して配列やオブジェクトの中身を確認しながら、
コーディングをしています。
ところがどっこい、Ajaxを利用した非同期通信では、PHP側で「var_dump()」をしても画面に何も出力されない!
ということで、自分なりに見つけたデバッグ方法を紹介したいと思います。
まずは前提です。
前提
1.使用ブラウザはChrome
2.実際にブラウザに描画されているソースの中に、下記のようにAjaxの記述してあるとする。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> $(function(){ $('button').click(function(){ $.ajax({ url: '/demo/ajaxTest/', type: 'POST', dataType:'json', data: { 'demo': $('#demo').val(), }, success: function(result){ alert(console.dir(result)); }, error:function(exception){ alert('Exeption:'+exception); } }); }); }); </script> |
※画面のどこかに、
1 2 |
<button>ボタン</button> <input type="text" id="demo"/> |
のような記述がすでにある前提です。
では次はデバッグのための準備です。
準備
1.Ajax非同期通信の飛び先である、/demo/ajaxTest/ファイルに下記のように記述
1 2 |
$data['debug'] = var_export($_POST, true); echo json_encode($data); |
これで準備OKです。
では早速デバッグを行うために、前提のとこで用意した、「」をクリックしてみましょう。
確認
1.Chromeをデベロッパーツールを立ち上げます。(Ctr+Shift+I)
2.Consoleタグをクリック
はい、ここで$_POSTの中身が確認できたと思います。
どうでしょうか。
ディスカッション
コメント一覧
まだ、コメントがありません