http://w.atwiki.jp/ndruger/ ndruger @ ウィキ ja 2012-10-26T09:48:05+09:00 1351212485 https://w.atwiki.jp/ndruger/pages/1.html [[Webアプリ開発に利用するデバッグ機能等まとめ(仮)]] -[[メニュー]] 2012-10-26T09:48:05+09:00 1351212485 https://w.atwiki.jp/ndruger/pages/2.html **メニュー -[[トップページ]] 2012-10-26T09:47:50+09:00 1351212470 https://w.atwiki.jp/ndruger/pages/14.html Webアプリ開発に利用するデバッグ機能等まとめ(仮)。まずFirefoxとChromeのみ記述。後で他の奴も書く。~ 分類が適当なので後で開発環境という形でまとめなおす。 #contents * ブレークポイントの設定 ** ソースコードの特定の行 Firefox, Chrome共に条件付きのブレークポイントが指定可能 *** FX - Firebug *** Chrome - Chrome Developer Tools *** ソースコード debuggerステートメントを書くと開発ツールを開いているときはそこで止まる function a() { debugger; // ここで止まる } a(); ** DOMツリーの変更 Firebug, Chrome共にツリーの操作、属性の変更に対してBPの指定が可能。 *** FX - Firebug -- https://getfirebug.com/doc/breakpoints/demo.html#html *** Chrome - Chrome Developer Tools -- https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#dom ** JavaScriptオブジェクトプロパティアクセス 値の変更時のBPはFirefox, Chromeともに指定可能。取得時のBPに関してはソースコードを修正する必要がある。 *** Firefox - Firebug -- 値の変更時に可能 *** Chrome - Chrome Developer Tools -- 値の変更時に可能 *** ソースコード - 対象のプロパティの___defineGetter__, __defineSetter__を定義して、それらの関数にdebuggerステートメントを記述する ** XHR Firefox, Chromeともに可能。 *** Firefox - Firebug -- https://getfirebug.com/doc/breakpoints/demo.html#net *** Chrome - Chrome Developer Tools -- https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints?hl=ja#xhr *** ソースコード(todo) ** 例外(todo: Firebug) Firefoxだとリロードしても有効な例外でのブレークポイントが張れない？もう少し調査。 *** Chrome - Chrome Developer Tools -- https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints?hl=ja#js_uncaught ** DOMイベント *** Chrome - Chrome Developer Tools -- https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints?hl=ja#listeners * 再描画の範囲・回数の確認 パフォーマンスに影響するリフローやリドローが、期待の範囲・回数になっているかどうか確認するために利用する。 *** Firefox 拡張機能の[[Firebug Paint Events:https://addons.mozilla.org/ja/firefox/addon/firebug-paint-events/]]を入れて、about:configでdom.send_after_paint_to_contentを有効にするとFirebugのPaintsタブで確認することが出来る。 *** Chrome - Chrome Developer Tools -- TimelineタブでRecordをして記憶した後で、Eventsのラインをクリックするとイベントが一覧で表示される。Paintイベントにマウスをホバーすると描画領域が視覚的に表示される。 * ページ読み込み時間のチューニング(todo: タイムラインの説明を追記) Firefox, Chrome共にPage Speed Insights(Google), YSlowが拡張機能にある。 *** ソースコード(todo: w3cのNavigation Timingの動作確認) * 圧縮されたJavaScriptの整形(Pretty Print) *** Firefox - 拡張機能の[[Javascript Deminifier:https://addons.mozilla.org/ja/firefox/addon/javascript-deminifier/]]を入れて、ステータスバーの"JSD OFF"をクリックして"JSD ON"にしてリロードすると、Firebugのスクリプトタブで表示するJavaScriptが整形される *** Chrome - Chrome Developer Tools -- Sourcesタブの{}をクリック。リロードしても有効 * CPUプロファイラ Firebug, Chrom Developer Tools共に開発ツールでプロファイルが可能。 *** ソースコード - console.profile()とconsole.profileEnd()を使って、ソースコードから特定の間のプロファイルを取ることが出来る。 function some(a) { return a + a^2 - a*2; } console.profile(); // プロファイル開始 var sum = 0; for (var i = 0; i < 100000; i++) { sum = some(sum); } console.profileEnd(); // プロファイル終了 * DOMツリーの特定の要素を見つける ** Firefox - Firebug -- マウスのクリックで要素を見つける --- 省略 -- CSSセレクタで要素を見つける --- コンソールから$$('セレクタ') $$('#a') - 拡張機能の[[Tilt:https://addons.mozilla.org/ja/firefox/addon/tilt/]]を利用すると3Dで要素を見つけられる ** Chrome - Chrome Developer Tools -- マウスのクリックで要素を見つける --- 省略 -- CSSセレクタで要素を見つける --- コンソールからinspect($('セレクタ')) inspect($('セレクタ')) * ページのメモリ利用量やリークのチェック *** Firefox 簡単にはできないっぽい。 about:memoryではタブごとではなく全体のメモリ利用量が表示される。Firebugのメモリプロファイラも1.10.3の時点で動かない。 *** Chrome - about:memoryでタブごとの利用量の確認が可能 - Developer ToolsのTimelineタブでメモリ利用量・リスナーの数・要素の数の時系列のグラフを取得可能 - Developer ToolsのProfileタブのTake Heap Snapshotにてより詳細な情報を取得可能 -- 要素をDOMツリーからremoveしたが、意図せずにJavaScriptの変数が参照を持ってしまう場合のリークなどは、メインのDOM Treeに繋がってない要素の一覧が"Detached DOM tree / 2 entries"に現れるので、そこから発見できる。 (function() { var ele = document.createElement('div'); document.body.appendChild(ele); document.body.removeChild(ele); window.globalLeakMaker = ele; // 意図せぬ要素の参照保持による要素のリーク })(); - –enable-memory-infoのオプション(todo: 記述) *** ソースコード(todo: オブジェクトリークチェッカーの実装を記述) * スタックトーレスの確認 *** ソースコード - console.trace() - 例外.stack - arguments.callee.callerからcallerで辿る(todo: コードを記述) * ブラウザのキャッシュの無効化 ちなみにリロードボタンをクリックする時はShiftキーを押しながらクリックするとスーパーリロードになり、HTTPリクエストヘッダーから"If-Modified-Since"などが外されるため304が返らなくなり、ページを確実に更新ができる可能性が高くなる。 *** Firefox 拡張機能の[[Web Developer Toolbar:https://addons.mozilla.org/ja/firefox/addon/web-developer/]]で無効化できる。 *** Chrome Developer Toolsの設定の"Disable cache"で無効化できる。 * ToDo(書く予定) ASSRET(), DP(), リモートデバッガ + dyndns, Proxy(cocproxy等), IDE + jslint, scrict mode, テスト用smtpサーバー, クエリでの動作変更, FPSカウンタ, アニメーション動作のスケールベース化、クラス名の取得、watchの活用~ 2012-09-25T07:25:40+09:00 1348525540 https://w.atwiki.jp/ndruger/pages/3.html **更新履歴 #recent(20) &link_editmenu2(text=ここを編集) 2010-04-04T07:50:53+09:00 1270335053 https://w.atwiki.jp/ndruger/pages/4.html * ニュース @wikiのwikiモードでは #news(興味のある単語) と入力することで、あるキーワードに関連するニュース一覧を表示することができます 詳しくはこちらをご覧ください。 ＝＞http://atwiki.jp/guide/17_174_ja.html ----- たとえば、#news(wiki)と入力すると以下のように表示されます。 #news(wiki) 2010-04-04T07:50:53+09:00 1270335053 https://w.atwiki.jp/ndruger/pages/5.html * まとめサイト作成支援ツールについて @wikiには[[まとめサイト作成を支援するツール>>http://atwiki.jp/matome/]]があります。 また、 #matome_list と入力することで、注目の掲示板が一覧表示されます。 利用例）#matome_listと入力すると下記のように表示されます #matome_list 2010-04-04T07:50:53+09:00 1270335053 https://w.atwiki.jp/ndruger/pages/6.html * 更新履歴 @wikiのwikiモードでは #recent(数字) と入力することで、wikiのページ更新履歴を表示することができます。 詳しくはこちらをご覧ください。 ＝＞http://atwiki.jp/guide/17_117_ja.html ----- たとえば、#recent(20)と入力すると以下のように表示されます。 #recent(20) 2010-04-04T07:50:53+09:00 1270335053 https://w.atwiki.jp/ndruger/pages/7.html * アーカイブ @wikiのwikiモードでは #archive_log() と入力することで、特定のウェブページを保存しておくことができます。 詳しくはこちらをご覧ください。 ＝＞http://atwiki.jp/guide/25_171_ja.html ----- たとえば、#archive_log()と入力すると以下のように表示されます。 保存したいURLとサイト名を入力して"アーカイブログ"をクリックしてみよう #archive_log() 2010-04-04T07:50:53+09:00 1270335053 https://w.atwiki.jp/ndruger/pages/8.html * 動画(youtube) @wikiのwikiモードでは #video(動画のURL) と入力することで、動画を貼り付けることが出来ます。 詳しくはこちらをご覧ください。 ＝＞http://atwiki.jp/guide/17_209_ja.html また動画のURLはYoutubeのURLをご利用ください。 ＝＞http://www.youtube.com/ ----- たとえば、#video(http://youtube.com/watch?v=kTV1CcS53JQ)と入力すると以下のように表示されます。 #video(http://youtube.com/watch?v=kTV1CcS53JQ) 2010-04-04T07:50:53+09:00 1270335053 https://w.atwiki.jp/ndruger/pages/10.html * 関連ブログ @wikiのwikiモードでは #bf(興味のある単語) と入力することで、あるキーワードに関連するブログ一覧を表示することができます 詳しくはこちらをご覧ください。 ＝＞http://atwiki.jp/guide/17_161_ja.html ----- たとえば、#bf(ゲーム)と入力すると以下のように表示されます。 #bf(ゲーム) 2010-04-04T07:50:53+09:00 1270335053