microsoft edge f12 開発者ツール
TRANSCRIPT
![Page 1: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/1.jpg)
Windows 10 時代のWeb 開発者デバッグ手法
- Microsoft EdgeF12 Developer Tools -
尾崎 義尚株式会社ネクストスケープ
![Page 2: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/2.jpg)
尾崎 義尚• 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
![Page 3: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/3.jpg)
http://bit.ly/EdgeF12Dev
![Page 4: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/4.jpg)
Windows 10 Build 1012210130 (2015/5/2030) 時点の情報で記載しています。
製品リリースまで、またはリリース後に変更される可能性があります。
![Page 5: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/5.jpg)
![Page 6: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/6.jpg)
The Road Ahead
Tools for IE11 on Win10+ are frozen
Full steam ahead for Microsoft Edge
![Page 7: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/7.jpg)
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
![Page 8: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/8.jpg)
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…
![Page 9: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/9.jpg)
Localhost にアクセスするには• Loopback を許可する
• 将来的には 「 about:flags 」で設定可能にする予定
CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy
http://dev.modern.ie/platform/faq/how-can-i-debug-localhost/
![Page 10: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/10.jpg)
DOM Explorer
![Page 11: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/11.jpg)
DOM Explorer
F12 での変更箇所ノードにバインドされたイベント
Margin 、 Padding など
最終的に適用されたスタイル
ノードに適用されているスタイル
疑似状態
![Page 12: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/12.jpg)
DOM Explorer
• LESS 、 SASS をサポート
ソース切り替え
![Page 13: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/13.jpg)
DOM Explorer
![Page 14: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/14.jpg)
Web Essentials
F12 開発者ツールで変更した内容を Visual Studio に反映
![Page 15: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/15.jpg)
コンソール
![Page 16: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/16.jpg)
コンソール
フィルター
![Page 17: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/17.jpg)
デバッガー
![Page 18: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/18.jpg)
デバッガー
• マイコードのみをデバッグ (Just My Code)• デバッグ済みのライブラリー コードにス
テップインしない• jQuery, Bootstrap, 社内共通ライブラリーなど
![Page 19: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/19.jpg)
デバッガー
• 後続のブレークポイントで止まらないようにする
デバッガーのデタッチ
![Page 20: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/20.jpg)
デバッガー
• 整形出力 (Prettify)• 右端で折り返す• ライブラリー コードとしてマークする• ソースの切り替え
![Page 21: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/21.jpg)
デバッガー• TypeScript, CoffeeScript のデバッグが可能
マップファイルを使って元のファイルを読み込み
![Page 22: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/22.jpg)
デバッガー
関数、オブジェクトを参照しているソースを表示
関数、オブジェクトの定義に移動
![Page 23: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/23.jpg)
デバッガー
処理を止めることなく、コンソールに状態を出力
![Page 24: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/24.jpg)
デバッガー (そのうち)
• 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
![Page 25: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/25.jpg)
ネットワーク
タブの切り替えが不要に
![Page 26: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/26.jpg)
ネットワーク
![Page 27: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/27.jpg)
ネットワーク• デフォルト オン
![Page 28: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/28.jpg)
ネットワーク
![Page 29: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/29.jpg)
ネットワーク
HTTP ヘッダー
レスポンス ボディー
整形も可能
![Page 30: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/30.jpg)
ネットワーク
![Page 31: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/31.jpg)
ネットワーク
リクエスト パラメータ Cookie
リクエストからレスポンスまでの時間
遅い場合はチューニングを検討する• サーバーサイド処理• CDN を検討
![Page 32: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/32.jpg)
パフォーマンス
「 UI の応答」と「プロファイラー」が統合
![Page 33: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/33.jpg)
パフォーマンスイベント
CPU 使用率
FPS
タイムライン
タイムライン詳細
![Page 34: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/34.jpg)
パフォーマンス空白の時間がある
処理がブロックされているように見える
![Page 35: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/35.jpg)
パフォーマンス
イベントの詳細を見ると、 Facebook プラグインのダウンロードから、読み込みまでの時間が空いていることがわかる
![Page 36: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/36.jpg)
パフォーマンス
読み込みに時間がかかって、後続の処理まで待っていた
![Page 37: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/37.jpg)
処理時間の配分詳細まで切り分け可能
![Page 38: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/38.jpg)
パフォーマンス
描画に時間がかかっているエレメントを選択して、ハイライト
右クリックで DOM Explorer に切り替え
![Page 39: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/39.jpg)
パフォーマンス 範囲内で実行された JavaScript コードを表示
![Page 40: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/40.jpg)
メモリ
![Page 41: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/41.jpg)
メモリ
スナップショット作成時のメモリ状態を取得• 使用量• オブジェクト数• 差分
![Page 42: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/42.jpg)
メモリ
![Page 43: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/43.jpg)
2 点間の比較
オブジェクトを参照しているオブジェクト→ 参照されているということは、 GC で回収されない
オブジェクト名をクリックすると「デバッガー」のソースに切り替わる
![Page 44: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/44.jpg)
エミュレーションドキュメント モードの切り替えが消滅
![Page 45: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/45.jpg)
エミュレーション
緯度・経度、 GPS なしをシミュレート
![Page 46: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/46.jpg)
Remote.modern.ie
![Page 47: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/47.jpg)
![Page 48: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/48.jpg)
![Page 49: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/49.jpg)
![Page 50: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/50.jpg)
![Page 51: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/51.jpg)
IE Diagnostics Adapter
![Page 52: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/52.jpg)
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 はまだ
![Page 53: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/53.jpg)
IE Diagnostics Adapter
![Page 54: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/54.jpg)
IE Diagnostics Adapter
![Page 55: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/55.jpg)
VORLON.JS
![Page 56: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/56.jpg)
Vorlon.js
• http://vorlonjs.com/• オープンソース• 拡張可能プラグイン アーキテクチャ• Node.js と Socket.io を利用• リモート デバッグ可能なマルチ プラットフォーム開発者ツール
![Page 57: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/57.jpg)
Vorlon.js
![Page 58: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/58.jpg)
Vorlon.js
• Vorlon.js サーバーのセットアップ、実行
$ npm i –g vorlon$ vorlon
<script src=“http://localhost:1337/vorlon.js”></script>
• アプリで Vorlon.js を有効に
![Page 59: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/59.jpg)
Vorlon.js
ダッシュボード サイドは、送られてきた情報でコマンド パネルを生成する
クライアント サイドは、デバイスの情報を送信する
![Page 60: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/60.jpg)
Vorlon.js
• デフォルト プラグイン• Console• Modernizr• DOM Explorer• Object Explorer
• サンプル プラグイン• https://
github.com/MicrosoftDX/Vorlonjs/tree/master/Plugins/Vorlon/plugins/sample
![Page 61: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/61.jpg)
これから
![Page 62: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/62.jpg)
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
![Page 63: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/63.jpg)
UserVoice
• https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/category/84475-f12-developer-tools
![Page 64: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/64.jpg)
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
![Page 65: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/65.jpg)
Show syntax errors in debugger
• 117 votes• JavaScript ファイルにシンタックス エラーがあったとき、赤
の波線でエラーを表示して欲しい。
>>> Backlog に登録しました。• そのうち実装します。
![Page 66: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/66.jpg)
Edit and Continue
• 98 votes• デバッガーで JavaScript をデバッグ中にコードを変更したら、
その場で反映して、実行を継続して欲しい。
>>> 実装中•複雑な機能なので、ちょっと時間がかかります。
![Page 67: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/67.jpg)
developer tools - bring back css tab and put it into Sources tab like Chrome does
• 74 votes• Google のそれのように CSS や JS ファイルが開ける
Source タブが欲しい。
>>> 実装中• デバッガー ツールにファイル ピッカーを追加して CSS ファイ
ルを開けるようにします。
![Page 68: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/68.jpg)
Cookie inspection and editing
• 42 votes•ページの Cookie をグリッド表示して、編集できるようにして
欲しい。
>>> 実装中
![Page 69: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/69.jpg)
Debugging capabilities using the remote debugging protocol• 32 votes• Chrome で実装されているデバッグ プロトコル (https://
developer.chrome.com/devtools/docs/debugger-protocol) を使えるようにして欲しい。
>>> 作業中•早期プロトを公開中• https://github.com/Microsoft/IEDiagnosticsAdapter
![Page 70: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/70.jpg)
Make the Escape key open the console when using the F12 tools• 26 votes• Ctrl + ` でコンソール表示ってわかりにくい。 Chrome とか
Firefox みたいに Esc キーで表示してよ。
>>> 作業中• ガッテン
![Page 71: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/71.jpg)
Stop debugging
• 15 votes• [ デバッグの中止 ] できる機能が欲しい。デバッグを中止する
と、後続のブレークポイントで停止しないようにして欲しい。
>>> 作業中• デバッガーを切断 (Disconnected) できる機能を実装中です。
![Page 72: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/72.jpg)
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 の早期リリースが含まれています。
![Page 73: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/73.jpg)
F12Chooser.exe
![Page 74: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/74.jpg)
F12Chooser.exe
![Page 75: Microsoft Edge F12 開発者ツール](https://reader036.vdocuments.net/reader036/viewer/2022081419/55b92f69bb61ebe22a8b460a/html5/thumbnails/75.jpg)
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