Microsoft Edge F12 開発者ツールとデバッグツールのご紹介

1. Windows 10 時代の
Web 開発者デバッグ手法
- Microsoft Edge
F12 Developer Tools -
尾崎 義尚
株式会社ネクストスケープ

2. 尾崎 義尚
• 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

3. http://bit.ly/EdgeF12Dev

4. Windows 10 Build 1012210130
(2015/5/2030) 時点の情報で記載し
ています。
製品リリースまで、またはリリー
ス後に変更される可能性がありま
す。

6. The Road Ahead
Tools for IE11 on Win10+ are frozen Full steam ahead for Microsoft Edge

7. Browser Tools – A lot in common
DOM Inspection
Style Tracing
Computed Properties
Layout View
Color Picker
Debugger
Breakpoints
Watches
Console
Console API
CPU profiling
Style profiling
Network tracing
Heap snapshots
Snapshot diffing
Auto completion
Inspect element
Pretty printing
So, so many tools in the tool box
*Not to scale or remotely mathematically sound!
The 80%
Case

8. Browser Tools – A little unique
TracePoints
Statement level JS
Just my code
Find references
Set next statement
Track changes
TypeScript colouring
3D view
Web audio editor
Animation
Shader editor
Reflow event logging
Responsive design mode
Lots of extensions
Network throttling
Device emulation
Pseudo elements
Edit and continue
Paint correlation
CSS animation
Animation scrubbing
More…
More…
More…

9. Localhost にアクセスするには
• Loopback を許可する
• 将来的には 「about:flags」で設定可能にする予定
CheckNetIsolation LoopbackExempt -a -
n=Microsoft.Windows.Spartan_cw5n1h2txyewy
http://dev.modern.ie/platform/faq/how-can-i-debug-localhost/

10. DOM Explorer

11. DOM Explorer
F12 での変更箇所
ノードにバインドさ
れたイベント
Margin、Paddingなど
最終的に適用された
スタイル
ノードに適用されて
いるスタイル
疑似状態

12. DOM Explorer
• LESS、SASS をサポート
ソース切り替え

13. DOM Explorer

14. Web Essentials
F12 開発者ツールで変更した内容を Visual Studio に反映

15. コンソール

16. コンソール
フィルター

17. デバッガー

18. デバッガー
• マイコードのみをデバッグ (Just My Code)
• デバッグ済みのライブラリー コードにス
テップインしない
• jQuery, Bootstrap, 社内共通ライブラリーなど

19. デバッガー
• 後続のブレークポイントで止まらないようにする
デバッガーのデタッチ

20. デバッガー
• 整形出力 (Prettify)
• 右端で折り返す
• ライブラリー コードとしてマークする
• ソースの切り替え

21. デバッガー
• TypeScript, CoffeeScript のデバッグが可能
マップファイルを使って
元のファイルを読み込み

22. デバッガー
関数、オブジェクトを
参照しているソースを表示
関数、オブジェクトの
定義に移動

23. デバッガー
処理を止めることなく、コンソールに
状態を出力

24. デバッガー （そのうち）
• Time Travel Debugging
• Visual Studio にある Intellitrace みたいなもの
• 実行状態を記録
• たとえば、例外が発生したときに発生前の状態まで戻る
• MSR の研究結果
ステップバック
http://channel9.msdn.com/Events/WebPlatformSummit/2015/Whats-new-in-the-F12-Developer-Tools
http://channel9.msdn.com/blogs/Marron/Time-Travel-Debugging-for-JavaScriptHTML

25. ネットワーク
タブの切り替えが不要に

26. ネットワーク

27. ネットワーク
• デフォルト オン

28. ネットワーク

29. ネットワーク
HTTP ヘッダー
レスポンス ボディー
整形も可能

30. ネットワーク

31. ネットワーク
リクエスト パラメータ Cookie
リクエストからレスポン
スまでの時間
遅い場合はチューニング
を検討する
• サーバーサイド処理
• CDN を検討

32. パフォーマンス
「UI の応答」と「プロファイラー」が統合

33. パフォーマンス
イベント
CPU 使用率
FPS
タイムライン
タイムライン詳細

34. パフォーマンス
空白の時間がある
処理がブロックされている
ように見える

35. パフォーマンス
イベントの詳細を見ると、Facebook プラグインのダウンロードから、
読み込みまでの時間が空いていることがわかる

36. パフォーマンス
読み込みに時間がかかって、
後続の処理まで待っていた

37. 処理時間の配分
詳細まで切り分け可能

38. パフォーマンス
描画に時間がかかっているエレメントを
選択して、ハイライト
右クリックで DOM Explorer に切り替え

39. パフォーマンス 範囲内で実行された JavaScript コー
ドを表示

40. メモリ

41. メモリ
スナップショット作成時のメモリ状態を取得
• 使用量
• オブジェクト数
• 差分

42. メモリ

43. 2 点間の比較
オブジェクトを参照しているオブジェクト
→参照されているということは、GC で回収されない
オブジェクト名をクリックすると
「デバッガー」のソースに切り替わる

44. エミュレーション
ドキュメント モードの切り替えが消滅

45. エミュレーション
緯度・経度、GPS なしをシミュレート

46. Remote.modern.ie

51. IE Diagnostics Adapter

52. 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 はまだ

53. IE Diagnostics Adapter

54. IE Diagnostics Adapter

55. VORLON.JS

56. Vorlon.js
• http://vorlonjs.com/
• オープンソース
• 拡張可能プラグイン アーキテクチャ
• Node.js と Socket.io を利用
• リモート デバッグ可能なマルチ プラットフォーム開発者ツー
ル

57. Vorlon.js

58. Vorlon.js
• Vorlon.js サーバーのセットアップ、実行
$ npm i –g vorlon
$ vorlon
<script src=“http://localhost:1337/vorlon.js”></script>
• アプリで Vorlon.js を有効に

59. Vorlon.js
ダッシュボード サイドは、送られてき
た情報でコマンド パネルを生成する
クライアント サイドは、デバイスの情
報を送信する

60. Vorlon.js
• デフォルト プラグイン
• Console
• Modernizr
• DOM Explorer
• Object Explorer
• サンプル プラグイン
• https://github.com/MicrosoftDX/Vorlonjs/tree/master/Plugins/Vorlon/plugin
s/sample

61. これから

62. 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

63. UserVoice
• https://wpdev.uservoice.com/forums/257854-internet-explorer-
platform/category/84475-f12-developer-tools

64. 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/diagn
osing-mobile-website-issues-on-windows-phone-8-1-with-visual-
studio.aspx

65. Show syntax errors in debugger
• 117 votes
• JavaScript ファイルにシンタックス エラーがあったとき、赤の
波線でエラーを表示して欲しい。
>>> Backlog に登録しました。
• そのうち実装します。

66. Edit and Continue
• 98 votes
• デバッガーで JavaScript をデバッグ中にコードを変更したら、
その場で反映して、実行を継続して欲しい。
>>> 実装中
• 複雑な機能なので、ちょっと時間がかかります。

67. developer tools - bring back css tab and put it into
Sources tab like Chrome does
• 74 votes
• Google のそれのように CSS や JS ファイルが開ける Source タブ
が欲しい。
>>> 実装中
• デバッガー ツールにファイル ピッカーを追加して CSS ファイル
を開けるようにします。

68. Cookie inspection and editing
• 42 votes
• ページの Cookie をグリッド表示して、編集できるようにして欲
しい。
>>>実装中

69. Debugging capabilities using the remote
debugging protocol
• 32 votes
• Chrome で実装されているデバッグ プロトコル
(https://developer.chrome.com/devtools/docs/debugger-protocol) を
使えるようにして欲しい。
>>> 作業中
• 早期プロトを公開中
• https://github.com/Microsoft/IEDiagnosticsAdapter

70. Make the Escape key open the console when using
the F12 tools
• 26 votes
• Ctrl + ` でコンソール表示ってわかりにくい。Chrome とか Firefox
みたいに Esc キーで表示してよ。
>>> 作業中
• ガッテン

71. Stop debugging
• 15 votes
• [デバッグの中止] できる機能が欲しい。デバッグを中止すると、
後続のブレークポイントで停止しないようにして欲しい。
>>> 作業中
• デバッガーを切断 (Disconnected) できる機能を実装中です。

72. 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 の早期リリースが含まれていま
す。

73. F12Chooser.exe

74. F12Chooser.exe

75. 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