Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Windows 10 時代の
Web 開発者デバッグ手法
- Microsoft Edge
F12 Developer Tools -
尾崎 義尚
株式会社ネクストスケープ
尾崎 義尚
• Microsoft MVP for Internet Explorer
• Sitecore MVP
• 株式会社ネクストスケープ DMP 部
• @yoshioms
• Web開発でよく使う、特に使えるChromeデベロッパー...
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 Inspection
Style Tracing
Computed Properties
Layout View
Color Picker
Debugger
Breakpo...
Browser Tools – A little unique
TracePoints
Statement level JS
Just my code
Find references
Set next statement
Track chang...
Localhost にアクセスするには
• Loopback を許可する
• 将来的には 「about:flags」で設定可能にする予定
CheckNetIsolation LoopbackExempt -a -
n=Microsoft.Win...
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 ヘッダー
レスポンス ボディー
整形も可能
ネットワーク
ネットワーク
リクエスト パラメータ 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
(...
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
• デフォルト プラグイン
• Console
• Modernizr
• DOM Explorer
• Object Explorer
• サンプル プラグイン
• https://github.com/Microsoft...
これから
Experimental features (そのうち)
• JavaScript Editing
• CSS Editing
• Cookie inspection
• Local and Session Storage
http://cha...
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 Ph...
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 ファイ...
Cookie inspection and editing
• 42 votes
• ページの Cookie をグリッド表示して、編集できるようにして欲
しい。
>>>実装中
Debugging capabilities using the remote
debugging protocol
• 32 votes
• Chrome で実装されているデバッグ プロトコル
(https://developer.chrom...
Make the Escape key open the console when using
the F12 tools
• 26 votes
• Ctrl + ` でコンソール表示ってわかりにくい。Chrome とか Firefox
みたい...
Stop debugging
• 15 votes
• [デバッグの中止] できる機能が欲しい。デバッグを中止すると、
後続のブレークポイントで停止しないようにして欲しい。
>>> 作業中
• デバッガーを切断 (Disconnected) で...
F12 Support for web browser and web view
controls
• 12 votes
• Web View (ストア アプリ) や Web Browser (.NET) アプリケーショ
ンをデバッグできるツー...
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...
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Upcoming SlideShare
Loading in …5
×

Microsoft Edge F12 開発者ツール

13,304 views

Published on

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

Published in: Technology

Microsoft Edge F12 開発者ツール

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

×