Chrome デベロッパー ツールのワークスペース マッピング 質問する

Chrome デベロッパー ツールのワークスペース マッピング 質問する

Chrome 開発者ツールのワークスペース マッピングがどのように機能するかを教えていただけますか。現時点では Canary でのみ利用可能だと思います。

Google IO 2013 で Paul Irish が実演したように、要素ビューで CSS ルールを変更し、それをローカル ファイルに自動的に保存できるはずだと思っていました。この機能が動作しません。

https://developers.google.com/events/io/sessions/325206725

ベストアンサー1

現時点ではカナリアでのみ動作します。

編集: Chrome で利用可能 (バージョン 30 以降)

1) devtools 設定パネルを開く必要があります。そこには「ワークスペース」セクションがあります。

設定ページのスクリーンショット

2) このセクションでは、「フォルダーの追加」項目をクリックする必要があります。フォルダー選択ダイアログが表示されます。

3) フォルダーを選択すると、そのフォルダーのアクセス権に関する情報バーが表示されます。

アクセス権情報バーのスクリーンショット

4) その結果、ソース パネルのファイル セレクター ペインに 2 つのトップ レベル要素が表示されます。私の場合は、localhost:9080 サイトと devtools ローカル ファイル システム フォルダーでした。この時点で、サイト ファイルとローカル ファイル間のマッピングを作成する必要があります。これは、ファイルのコンテキスト メニューから実行できます。

マッピングのスクリーンショット

マップするファイルがローカル ファイルかサイト ファイルかは関係ありません。

5) その時点で、devtools は再起動について尋ねます。スクリーンショットを再開

再起動後、devtools はファイル ペインに単一のフォルダー エントリを表示し、Ctrl + S または Mac で Cmd + S を押すたびに、ローカル ファイルに加えたすべての変更を適用します。

おすすめ記事