Microsoft によるオープンなweb デバッグ環境 comm tech festival-
•
1 like•1,404 views
Microsoft が提供する Vorlon.js など、オープンな Web デバッグ環境をご紹介します。
More Related Content
What's hot
What's hot (20)
Similar to Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Similar to Microsoft によるオープンなweb デバッグ環境 comm tech festival- (20)
More from Yoshihisa Ozaki
More from Yoshihisa Ozaki (11)
Recently uploaded
Recently uploaded (12)
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
- 1. Microsoft によるオープンな Web デバッグ環境 尾崎 義尚 2015/9/26
- 2. 尾崎 義尚 Ozaki Yoshihisa • Microsoft MVP for Internet Explorer • @yoshioms • Web開発でよく使う、特に使えるChromeデベロッパー・ツー ルの機能 • http://www.buildinsider.net/web/chromedevtools/01 • Web制作で使いこなしたいIE開発者ツールの最新機能 • http://www.buildinsider.net/web/ief12devtools/01
- 6. VORLON.JS
- 7. Vorlon.js • http://vorlonjs.com/ • オープンソース • 拡張可能プラグイン アーキテクチャ • Node.js と Socket.io を利用 • リモート デバッグ可能なマルチ プラットフォーム開発者ツー ル
- 8. Vorlon.js • Vorlon.js サーバーのセットアップ、実行 $ npm i –g vorlon $ vorlon <script src=“http://localhost:1337/vorlon.js”></script> • アプリで Vorlon.js を有効に
- 9. Vorlon.js
- 11. Vorlon.js ダッシュボード サイドは、送られてき た情報でコマンド パネルを生成する クライアント サイドは、デバイスの 情報を送信する
- 12. Vorlon.js • デフォルト プラグイン • Console • Modernizr • DOM Explorer • Object Explorer • サンプル プラグイン • https://github.com/MicrosoftDX/Vorlonjs/tree/master/Plugins/Vorl on/plugins/sample • Console • Modernizr • DOM Explorer • Object Explorer • XHR Panel • ngInspector (Angular.js) • Network monitor • Resource Explorer
- 14. WebDriver
- 15. WebDriver • ブラウザ テストの自動化 • W3C WebDriver 標準 • https://w3c.github.io/webdriver/webdriver-spec.html • Microsoft WebDriver • http://www.microsoft.com/en-us/download/details.aspx?id=48212 • Borland Silk • http://online.borland.com/windows10
- 16. WebDriver Microsoft WebDriver のインストール http://www.microsoft.com/en-us/download/details.aspx?id=48212 1 Selenium のダウンロード http://docs.seleniumhq.org/download/ 2 Visual Studio コンソール アプリで、② を参照 3
- 17. WebDriver Status Status Count Complete 51 Partial 4 Not Yet 34 WebDriver Status https://dev.modern.ie/platform/status/webdriver/details/ Build 10532 時点 Build/Priority Count 10240 36 10532 18 Priority 1 8 Priority 2 9 Priority 3 15 Priority 4 2
- 18. WebDriver ドキュメント • Microsoft Edge 用 WebDriver • https://msdn.microsoft.com/ja-jp/library/mt188085(v=vs.85).aspx
- 19. dev.modern.ie
- 24. RemoteApp - HTML5TEST 環境 スコア IE11 (Windows 10) 348 IE11 with EdgeHTML(RemoteApp) 402 Edge (Windows 10 10547) 458 Chrome 45 526
- 25. 仮想マシン https://dev.modern.ie/tools/vms/windows/ XP_IE6 Vista_IE7 XP_IE8 Win7_IE8 Win7_IE9 Win7_IE10 Win8_IE10 Win8.1_IE11 Win7_IE11 Win10_Microsoft Edge それぞれサポートされている仮想 化環境が異なる VMWare Hyper-V 2008R2 Hyper-V 2012 VirtualBox VPC
- 29. デスクトップ IE 開発者ツールを使って Windows Phone の IE mobileをデバッグ • 412 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 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6510481-debug-for-ie-mobile-on-windows- phone-using-desktop
- 30. デバッガーでシンタックス エラーを表示 • 145 votes • JavaScript ファイルにシンタックス エラーがあったとき、赤の 波線でエラーを表示して欲しい。 >>> Backlog に登録しました。 • そのうち実装します。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6225699-show-syntax-errors-in-debugger
- 31. Edit and Continue • 122 votes • デバッガーで JavaScript をデバッグ中にコードを変更したら、 その場で反映して、実行を継続して欲しい。 >>> 実装中 • 複雑な機能なので、ちょっと時間がかかります。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6225599-edit-and-continue
- 32. 開発者ツールをドックできるように • 64 votes • 現在のウィンドウに開発者ツールをドックする機能が欲しい >>> 実装中 • Edge のアップデートに追加できるように作業中です。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9160582-dock-tools
- 33. [ESC] キーでコンソールを表示 • 26 votes • Ctrl + ` でコンソール表示ってわかりにくい。Chrome とか Firefox みたいに Esc キーで表示してよ。 >>> 作業中 • ガッテン 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6709603-make-the-escape-key-open-the-console- when-using-th
- 34. デバッグの中止 • 15 votes • [デバッグの中止] できる機能が欲しい。デバッグを中止すると、 後続のブレークポイントで停止しないようにして欲しい。 >>> 作業中 • デバッガーを切断 (Disconnected) できる機能を実装中です。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6225650-stop- debugging
- 35. Web View で F12 のサポート • 12 votes • Web View (ストア アプリ) や Web Browser (.NET) アプリケー ションをデバッグできるツールがない。JavaScript のメモリ リークや Hang、Crash のデバッグが可能になる機能が欲しい。 >>> 作業中 • Windows 10 の 1月プレビューで、組み込み Web コントロール にアタッチできる F12Chooser.exe の早期リリースが含まれて います。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6823388-f12-support-for-web-browser-and- web-view-controls
- 38. リモートデバッグ プロトコルを使ったデバッ グ機能 • 38 votes • Chrome で実装されているデバッグ プロトコル (https://developer.chrome.com/devtools/docs/debugger- protocol) を使えるようにして欲しい。 >>> 作業中 • 早期プロトを公開中 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6511301-debugging-capabilities-using-the-remote- debugging
- 39. 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 はまだ
- 43. Boom! It’s done（実装済み） 採用されたアイディア ネットワークの記録を自動的に開始してほしい Ctrl + R でリフレッシュ Chrome みたいにソースタブに CSS を Cookie の検証と編集を可能に Dart VM をサポートしないでほしい Boom! It’s done
- 44. Chrome みたいにソースタブに CSS を • JavaScript • CSS • ローカル ストレージ • セッション ストレージ • クッキー Boom! It’s done
- 45. Cookie の検証と編集を可能に Boom! It’s done Cookie、セッション ストレージ、ローカル ストレージ の値を参照、編集が可能に
- 47. F12 開発者ツール ドキュメントがオープンソースに （ただし英語だけ） https://github.com/MicrosoftEdge/MicrosoftEdge-Documentation
- 48. DOM Explorer
- 50. DOM Explorer • LESS、SASS をサポート ソース切り替え
- 51. Web Essentials F12 開発者ツールで変更した内容を Visual Studio に反映
- 52. コンソール
- 53. コンソール フィルター
- 54. デバッガー
- 55. デバッガー • JavaScript • CSS • ローカル ストレージ • セッション ストレージ • クッキー
- 56. デバッガー • Cookie • ローカル ストレージ • セッション ストレージ の内容確認・編集が可能
- 57. デバッガー • マイコードのみをデバッグ (Just My Code) • デバッグ済みのライブラリー コードにス テップインしない • jQuery, Bootstrap, 社内共通ライブラリーなど
- 59. デバッガー • 比較 • 保存 • 整形出力 (Prettify) • 右端で折り返す • ライブラリー コードとしてマークする • ソースの切り替え
- 60. デバッガー • TypeScript, CoffeeScript のデバッグが可能 マップファイルを使って 元のファイルを読み込み
- 63. デバッガー （そのうち） • 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
- 65. ネットワーク
- 67. ネットワーク
- 69. ネットワーク Cookie リクエストからレスポン スまでの時間 遅い場合はチューニング を検討する • サーバーサイド処理 • CDN を検討リクエスト パラメータ
- 78. メモリ
- 80. メモリ
- 84. 試験的機能
- 85. 試験的な JavaScript 機能を有効にする ES2015 Destructuring ES2016 Async Functions ES2016 Exponentiation operator