Windows 10 時代のWeb 開発者デバッグ手法

- Microsoft EdgeF12 Developer Tools -

尾崎　義尚株式会社ネクストスケープ

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

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

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…

Localhost にアクセスするには• Loopback を許可する

• 将来的には 「 about:flags 」で設定可能にする予定

CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy

http://dev.modern.ie/platform/faq/how-can-i-debug-localhost/

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://channel9.msdn.com/Events/WebPlatformSummit/2015/Whats-new-in-the-F12-Developer-Toolshttp://channel9.msdn.com/blogs/Marron/Time-Travel-Debugging-for-JavaScriptHTML

ネットワーク

タブの切り替えが不要に

ネットワーク

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

ネットワーク

ネットワーク

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 (https://

developer.chrome.com/devtools/docs/debugger-protocol) を使ったデバッグ• Pre Alpha• DOM と基本的なスクリプト デバッグのみ

• Microsoft Edge はまだ

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

ダッシュボード サイドは、送られてきた情報でコマンド パネルを生成する

クライアント サイドは、デバイスの情報を送信する

Vorlon.js

• デフォルト プラグイン• Console• Modernizr• DOM Explorer• Object Explorer

• サンプル プラグイン• https://

github.com/MicrosoftDX/Vorlonjs/tree/master/Plugins/Vorlon/plugins/sample

これから

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

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

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 ファイルが開ける

Source タブが欲しい。

>>> 実装中• デバッガー ツールにファイル ピッカーを追加して CSS ファイ

ルを開けるようにします。

Cookie inspection and editing

• 42 votes•ページの Cookie をグリッド表示して、編集できるようにして

欲しい。

>>> 実装中

Debugging capabilities using the remote debugging protocol• 32 votes• Chrome で実装されているデバッグ プロトコル (https://

developer.chrome.com/devtools/docs/debugger-protocol) を使えるようにして欲しい。

>>> 作業中•早期プロトを公開中• https://github.com/Microsoft/IEDiagnosticsAdapter

Make the Escape key open the console when using the F12 tools• 26 votes• Ctrl + ` でコンソール表示ってわかりにくい。 Chrome とか

Firefox みたいに Esc キーで表示してよ。

>>> 作業中• ガッテン

Stop debugging

• 15 votes• [ デバッグの中止 ] できる機能が欲しい。デバッグを中止する

と、後続のブレークポイントで停止しないようにして欲しい。

>>> 作業中• デバッガーを切断 (Disconnected) できる機能を実装中です。

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

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