Google ChromeのDevToolsはフロントエンド開発に欠かせない存在です。通常、表示されているHTMLとDevToolsはセットで使われますが、必ずしもそうなっていなければいけない訳ではありません。 その実証コードとして紹介したいのがDevTools Remoteです。DevToolsをリモートから操作できる、そんなGoogle Chrome機能拡張です。

DevTools Remoteの使い方

まずは機能拡張をインストールします。

そして任意のタブでDevTools Remoteを実行すると、リモートから開けるURIがクリップボードにコピーされます。これを別なウィンドウから開くとDevToolsが新しいウィンドウとして開きます。

ソースを見たり、コンソールも使えます。

HTMLも確認でき、編集も可能です。ただし、機能拡張が立ち上げているWebSocketサーバがあまり安定していない印象でした。

DevTools RemoteはGoogle Chromeの提供しているリモートデバッグのプロトコルを解釈して実行しています。DevTools Remoteを調べることで、Chrome DevToolsの新しい使い方が見つかるかも知れません。

DevTools RemoteはJavaScript製、Google Chrome用のオープンソース・ソフトウェア（MIT License）です。

DevTools Remote — Debug your browser tabs remotely via Chrome DevTools. auchenberg/devtools-remote - CSS