developer tools で Ajax デバッグ

developer tools で Ajax デバッグ

参考サイトはドットインストールの
Ajaxのデバッグをしてみよう
http://dotinstall.com/lessons/basic_chrome_dev/7112

そして、実践するには
http://samples.dotinstall.com/basic_jquery/522/
を利用

これを使い、デバッグの練習

ajax はバックグラウンドで動くので動きが見えにくい

そんなときには
developer tools の network タブを使う

そうすると
HTML
jQuery が使われているのがわかる

そして、この状態で
Ajax ボタンをおすと
check.php が呼ばれるため
Networks タブのところに check.php が追加表示される

表示された　check.php をクリックすると
さらに詳細をみることができ
Headers タブをみると
どのようなデータをわたしたのかをみることができる

今回の場合なら
Form Data のところになる

このとき返された結果が
Response タブのところに表示される

何を渡したのかというのが
Headers

返したものは
Response

というように調べることが可能

また
source タブで
jquery 圧縮版
つまり min.js のほうをつかっていると
見えにくいソースで表示される




これは、圧縮版がコードを少なくするため
改行などをしていないため

これをみやすくしたいのなら
画面左下にある
{}
というマークをクリックすると
コードが整理され、とても見やすくなる




ただし、見る専用になるため
この状態のときには編集ができないので注意

Chrome Developer Tools の設定変更

Chrome Developer Tools の設定変更

Ctrl + Shuft + i でツールを起動して
画面の一番右下にある歯車マークをクリックすると
Chrome Develoepr Tools の設定変更が可能

おそらく
この中で一番つかうのが
Override 項目の
User Agent

これを変更すると
いろいろなブラウザのテストをすることができる

例えば
User Agent を
iPhone ----iOS 5
にすれば
スマートフォンをもっていなくても
スマートフォンのブラウザ表示でみることが可能

これにより、PCでWeb アプリを開発するときに
スマートフォン対応の検証ができるようになる

また。
Shuft + / をおすと
ショートカットキー一覧をみることができる

http://dotinstall.com/lessons/basic_chrome_dev/7111
の解説をみると動画解説されているので
とてもわかりやすい

browser パフォーマンス調査

browser パフォーマンス調査

TimeLines
Profiles
Audits
はパフォーマンス調査
遅いときとかに調べるのに使う

Timelines は
どのタイミングでどの処理が行われているかみれる
あとメモリ状態なども見れる

Profiles は
CPUの状態調査に使う

Auditsは
webサイトに関する改善提案などがでる

基本動作に関しては
http://dotinstall.com/lessons/basic_chrome_dev/7109
の動画を参照

なお
TimelineパネルではEventsなどで右クリックするとデータの保存、読み込みができ
他の人のデータを読み込んで解析する、といった使い方が可能とのことです

テストユーザがいるなら使えるかも

chrome と break point

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

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

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

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

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

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

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

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

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

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

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

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

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


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

chrome で java script デバッグ

chrome で java script デバッグ

chromeを開いている状態で
Ctrl + Shift + i
でDeveloper Tools を起動できるので
今回は
その中にある
Sourceタブを使って
java script のデバッグ

今回の実践に使わせてもらったのは
http://dotinstall.com/lessons/basic_chrome_dev/7107
の動画

そして
実際にデバッグを行うのは
http://samples.dotinstall.com/basic_chrome_dev/7102/
です

動画を見ながら実際におこなうことができるので
実戦形式で覚えることができます

以下は、実際にやったときのメモ

java script でエラーが起きているときには
developer tools の画面の一番右下に
エラーの個数がでるのでそれをクリックすれば
エラーが表示されます

scriptタグの中の java script は編集できるので
修正し、保存します

保存とはいっても一時保存みたいなもので
実際のソースコードそのものは保存はされません

とりあえず
document.getElementbyId('result').innerHTML = omikuji;
を
document.getElementById('result').innerHTML = omikuji;
に編集したら

Ctrl +s で保存して
ブラウザで
おみくじをひく
をクリックすれば

あなたの今日の運勢は大吉！！！！！
というように
反応するようになります

ちなみに、編集前は
あなたの今日の運勢は...！
のまま変わりません

実際にソースを書き換えたのを保存したいなら
右クリックして
Save As
を選択して保存するようにします

また
Cmd+L:行番号でジャンプ
Cmd+O:ファイルの一覧を表示
Cmd+Shift+O:関数やセレクタの一覧を表示
というショートカットキーですが

ubuntu の場合なら
Cmd ではなく Ctrl キーとなります