ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch