Microsoft Edge F12 開発者ツール
•Download as PPTX, PDF•
11 likes•19,108 views
Microsoft Edge F12 開発者ツールとデバッグツールのご紹介
![Stop debugging
• 15 votes
• [デバッグの中止] できる機能が欲しい。デバッグを中止すると、
後続のブレークポイントで停止しないようにして欲しい。
>>> 作業中
• デバッガーを切断 (Disconnected) できる機能を実装中です。](https://image.slidesharecdn.com/microsoftedgef12devtools-150531112924-lva1-app6892/85/Microsoft-Edge-F12-71-320.jpg)
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
- 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
- 12. DOM Explorer • LESS、SASS をサポート ソース切り替え
- 13. DOM Explorer
- 14. Web Essentials F12 開発者ツールで変更した内容を Visual Studio に反映
- 15. コンソール
- 16. コンソール フィルター
- 17. デバッガー
- 18. デバッガー • マイコードのみをデバッグ (Just My Code) • デバッグ済みのライブラリー コードにス テップインしない • jQuery, Bootstrap, 社内共通ライブラリーなど
- 20. デバッガー • 整形出力 (Prettify) • 右端で折り返す • ライブラリー コードとしてマークする • ソースの切り替え
- 21. デバッガー • TypeScript, CoffeeScript のデバッグが可能 マップファイルを使って 元のファイルを読み込み
- 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
- 26. ネットワーク
- 28. ネットワーク
- 30. ネットワーク
- 31. ネットワーク リクエスト パラメータ Cookie リクエストからレスポン スまでの時間 遅い場合はチューニング を検討する • サーバーサイド処理 • CDN を検討
- 39. パフォーマンス 範囲内で実行された JavaScript コー ドを表示
- 40. メモリ
- 42. メモリ
- 46. Remote.modern.ie
- 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 はまだ
- 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
- 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