microsoft edge f12 開発者ツール
Post on 30-Jul-2015
896 Views
Preview:
TRANSCRIPT
Windows 10 時代のWeb 開発者デバッグ手法
- Microsoft EdgeF12 Developer Tools -
尾崎 義尚株式会社ネクストスケープ
尾崎 義尚• Microsoft MVP for Internet Explorer• Sitecore MVP• 株式会社ネクストスケープ DMP 部• @yoshioms• Web 開発でよく使う、特に使える Chrome デベロッパー・ツー
ルの機能• http://www.buildinsider.net/web/chromedevtools/01
• Web 制作で使いこなしたい IE 開発者ツールの最新機能• http://www.buildinsider.net/web/ief12devtools/01
http://bit.ly/EdgeF12Dev
Windows 10 Build 1012210130 (2015/5/2030) 時点の情報で記載しています。
製品リリースまで、またはリリース後に変更される可能性があります。
The Road Ahead
Tools for IE11 on Win10+ are frozen
Full steam ahead for Microsoft Edge
Browser Tools – A lot in common
DOM InspectionStyle TracingComputed PropertiesLayout ViewColor PickerDebuggerBreakpointsWatchesConsoleConsole API
CPU profilingStyle profilingNetwork tracingHeap snapshotsSnapshot diffingAuto completionInspect elementPretty printing
So, so many tools in the tool box
*Not to scale or remotely mathematically sound!
The 80%Case
Browser Tools – A little unique
TracePointsStatement level JSJust my codeFind references
Set next statementTrack changesTypeScript colouring
3D viewWeb audio editorAnimationShader editor
Reflow event loggingResponsive design modeLots of extensions
Network throttlingDevice emulationPseudo elementsEdit and continue
Paint correlationCSS animationAnimation scrubbing
More…
More…
More…
Localhost にアクセスするには• Loopback を許可する
• 将来的には 「 about:flags 」で設定可能にする予定
CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy
http://dev.modern.ie/platform/faq/how-can-i-debug-localhost/
DOM Explorer
DOM Explorer
F12 での変更箇所ノードにバインドされたイベント
Margin 、 Padding など
最終的に適用されたスタイル
ノードに適用されているスタイル
疑似状態
DOM Explorer
• LESS 、 SASS をサポート
ソース切り替え
DOM Explorer
Web Essentials
F12 開発者ツールで変更した内容を Visual Studio に反映
コンソール
コンソール
フィルター
デバッガー
デバッガー
• マイコードのみをデバッグ (Just My Code)• デバッグ済みのライブラリー コードにス
テップインしない• jQuery, Bootstrap, 社内共通ライブラリーなど
デバッガー
• 後続のブレークポイントで止まらないようにする
デバッガーのデタッチ
デバッガー
• 整形出力 (Prettify)• 右端で折り返す• ライブラリー コードとしてマークする• ソースの切り替え
デバッガー• TypeScript, CoffeeScript のデバッグが可能
マップファイルを使って元のファイルを読み込み
デバッガー
関数、オブジェクトを参照しているソースを表示
関数、オブジェクトの定義に移動
デバッガー
処理を止めることなく、コンソールに状態を出力
デバッガー (そのうち)
• Time Travel Debugging• Visual Studio にある Intellitrace みたいなもの• 実行状態を記録 • たとえば、例外が発生したときに発生前の状態まで戻る• MSR の研究結果
ステップバック
http://channel9.msdn.com/Events/WebPlatformSummit/2015/Whats-new-in-the-F12-Developer-Toolshttp://channel9.msdn.com/blogs/Marron/Time-Travel-Debugging-for-JavaScriptHTML
ネットワーク
タブの切り替えが不要に
ネットワーク
ネットワーク• デフォルト オン
ネットワーク
ネットワーク
HTTP ヘッダー
レスポンス ボディー
整形も可能
ネットワーク
ネットワーク
リクエスト パラメータ Cookie
リクエストからレスポンスまでの時間
遅い場合はチューニングを検討する• サーバーサイド処理• CDN を検討
パフォーマンス
「 UI の応答」と「プロファイラー」が統合
パフォーマンスイベント
CPU 使用率
FPS
タイムライン
タイムライン詳細
パフォーマンス空白の時間がある
処理がブロックされているように見える
パフォーマンス
イベントの詳細を見ると、 Facebook プラグインのダウンロードから、読み込みまでの時間が空いていることがわかる
パフォーマンス
読み込みに時間がかかって、後続の処理まで待っていた
処理時間の配分詳細まで切り分け可能
パフォーマンス
描画に時間がかかっているエレメントを選択して、ハイライト
右クリックで DOM Explorer に切り替え
パフォーマンス 範囲内で実行された JavaScript コードを表示
メモリ
メモリ
スナップショット作成時のメモリ状態を取得• 使用量• オブジェクト数• 差分
メモリ
2 点間の比較
オブジェクトを参照しているオブジェクト→ 参照されているということは、 GC で回収されない
オブジェクト名をクリックすると「デバッガー」のソースに切り替わる
エミュレーションドキュメント モードの切り替えが消滅
エミュレーション
緯度・経度、 GPS なしをシミュレート
Remote.modern.ie
IE Diagnostics Adapter
IE Diagnostics Adapter
• https://github.com/Microsoft/IEDiagnosticsAdapter• MIT ライセンス• Chrome remote debugging protocol (https://
developer.chrome.com/devtools/docs/debugger-protocol) を使ったデバッグ• Pre Alpha• DOM と基本的なスクリプト デバッグのみ
• Microsoft Edge はまだ
IE Diagnostics Adapter
IE Diagnostics Adapter
VORLON.JS
Vorlon.js
• http://vorlonjs.com/• オープンソース• 拡張可能プラグイン アーキテクチャ• Node.js と Socket.io を利用• リモート デバッグ可能なマルチ プラットフォーム開発者ツール
Vorlon.js
Vorlon.js
• Vorlon.js サーバーのセットアップ、実行
$ npm i –g vorlon$ vorlon
<script src=“http://localhost:1337/vorlon.js”></script>
• アプリで Vorlon.js を有効に
Vorlon.js
ダッシュボード サイドは、送られてきた情報でコマンド パネルを生成する
クライアント サイドは、デバイスの情報を送信する
Vorlon.js
• デフォルト プラグイン• Console• Modernizr• DOM Explorer• Object Explorer
• サンプル プラグイン• https://
github.com/MicrosoftDX/Vorlonjs/tree/master/Plugins/Vorlon/plugins/sample
これから
Experimental features (そのうち)• JavaScript Editing• CSS Editing• Cookie inspection• Local and Session Storage
http://channel9.msdn.com/Events/WebPlatformSummit/2015/Whats-new-in-the-F12-Developer-Tools
UserVoice
• https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/category/84475-f12-developer-tools
Debug for IE mobile on Windows Phone using Desktop's IE developer tools
• 344 votes• MacOS / iOS の Safari みたいに Windows Phone の IE
mobile のデバッグができるようにして欲しい。
>>> VS できるよ。• http://
blogs.msdn.com/b/visualstudioalm/archive/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio.aspx
Show syntax errors in debugger
• 117 votes• JavaScript ファイルにシンタックス エラーがあったとき、赤
の波線でエラーを表示して欲しい。
>>> Backlog に登録しました。• そのうち実装します。
Edit and Continue
• 98 votes• デバッガーで JavaScript をデバッグ中にコードを変更したら、
その場で反映して、実行を継続して欲しい。
>>> 実装中•複雑な機能なので、ちょっと時間がかかります。
developer tools - bring back css tab and put it into Sources tab like Chrome does
• 74 votes• Google のそれのように CSS や JS ファイルが開ける
Source タブが欲しい。
>>> 実装中• デバッガー ツールにファイル ピッカーを追加して CSS ファイ
ルを開けるようにします。
Cookie inspection and editing
• 42 votes•ページの Cookie をグリッド表示して、編集できるようにして
欲しい。
>>> 実装中
Debugging capabilities using the remote debugging protocol• 32 votes• Chrome で実装されているデバッグ プロトコル (https://
developer.chrome.com/devtools/docs/debugger-protocol) を使えるようにして欲しい。
>>> 作業中•早期プロトを公開中• https://github.com/Microsoft/IEDiagnosticsAdapter
Make the Escape key open the console when using the F12 tools• 26 votes• Ctrl + ` でコンソール表示ってわかりにくい。 Chrome とか
Firefox みたいに Esc キーで表示してよ。
>>> 作業中• ガッテン
Stop debugging
• 15 votes• [ デバッグの中止 ] できる機能が欲しい。デバッグを中止する
と、後続のブレークポイントで停止しないようにして欲しい。
>>> 作業中• デバッガーを切断 (Disconnected) できる機能を実装中です。
F12 Support for web browser and web view controls• 12 votes• Web View ( ストア アプリ ) や Web Browser (.NET) アプリ
ケーションをデバッグできるツールがない。 JavaScript のメモリリークや Hang 、 Crash のデバッグが可能になる機能が欲しい。
>>> 作業中• Windows 10 の 1月プレビューで、組み込み Web コント
ロールにアタッチできる F12Chooser.exe の早期リリースが含まれています。
F12Chooser.exe
F12Chooser.exe
Resources
• What’s New in F12 for "Project Spartan“• http://channel9.msdn.com/Events/Build/2015/3-638
• What’s new in the F12 Developer Tools• http://
channel9.msdn.com/Events/WebPlatformSummit/2015/Whats-new-in-the-F12-Developer-Tools
• Time-Travel Debugging for JavaScript/HTML Applications• https://
channel9.msdn.com/blogs/Marron/Time-Travel-Debugging-for-JavaScriptHTML
• Internet Explorer F12 Developer Tools - Part 1• http://
channel9.msdn.com/Shows/Defrag-Tools/Defrag-Tools-126-Internet-Explorer-F12-Developer-Tools-Part-1
top related