webdevqa.jp.net

ChromeデベロッパーツールのスタイルパネルのCSSの変更を保存するにはどうすればいいですか?

スタイルパネル of Google Chromeデベロッパーツール のCSSの変更を保存するにはどうすればいいですか?

ツールのWebサイトでは、それが言及されています 私たちはすべての変更をリソースパネルで確認できます

enter image description here

しかし、私はローカルでCSSファイルに取り組んでいますが、変更がリソースパネルに表示されません。

enter image description here

enter image description here

ところで、Chrome DeveloperツールのCSS変更を保存するためのアドオン、ツールはありますか?Firebugにはたくさんのものがあります https://stackoverflow.com/search?q=firebug+CSS+changes+save

180
Jitendra Vyas

CSSの変更はChrome Dev Tools自体から保存できます。 Chromeでは、ローカルフォルダをワークスペースに追加できるようになりました。 Chromeにそのフォルダへのアクセスを許可し、そのフォルダをローカルワークスペースに追加したら、Webリソースをローカルリソースにマッピングできます。

  • 開発者ツールの[ソース]パネルに移動し、左側のパネル(ファイルが一覧表示されている場所)の右クリックを選択して、ワークスペースへのフォルダの追加を選択します。 [要素]パネルで選択した要素の各CSSルールの右上にあるスタイルシートをクリックすると、[ソース]パネルのスタイルシートにすばやく移動できます。

enter image description here

  • フォルダを追加したら、Chromeにそのフォルダへのアクセス権を付与する必要があります。 Allow chrome access

  • 次に、ネットワークリソースをローカルリソースにマッピングする必要があります。

enter image description here

  • ページを再読み込みした後、Chromeはマップされたファイルのローカルリソースを読み込みます。物事を簡単にするために、Chromeはあなたにローカルリソースのみを表示します(それであなたがあなたがローカルまたはネットワークリソースを編集しているかどうかに関して混乱しないでください)。変更を保存するには、ファイルを編集するときにCTRL + Sを押します。

pS.

マッピングされたファイルを開いて編集を開始し、Chromeがローカルバージョンを適用するようにする必要があるかもしれません(日付201604.12)。

135
Philip Ramirez

DevToolsのテクニカルライターおよび開発者がここに提唱します。

Chrome 65以降、 Local Overrides がこれを実現するための新しい軽量な方法です。これはワークスペースとは異なる機能です。

上書きを設定する

  1. Sourcesパネルに行きます。
  2. Overridesタブに進んでください。
  3. 上書きするフォルダを選択をクリックします。
  4. 変更を保存したいディレクトリを選択してください。
  5. ビューポートの上部で、許可をクリックして、DevToolsにディレクトリへの読み書きアクセスを許可します。
  6. 変更を加えます。以下のGIFを見ると、background:rosybrownの変更がページをロードしても持続することがわかります。

overrides demo

オーバーライドのしくみ

DevToolsで変更を加えると、DevToolsは変更をコンピュータ上のファイルの修正コピーに保存します。ページをリロードすると、DevToolsはネットワークリソースではなく、変更されたファイルを配信します。

オーバーライドとワークスペースの違い

ワークスペースは、DevToolsをIDEとして使用できるように設計されています。ソースマップを使用して、リポジトリコードをネットワークコードにマッピングします。真の利点は、コードを縮小している場合、またはSCSSのように変換する必要があるコードを使用している場合、DevToolsで行った変更は(通常)元のソースコードに再度マッピングされることです。一方、上書きを使用すると、Web上のファイルを変更して保存できます。変更をすぐに試して、ページをロードしても変更を保存したいだけの場合は、良い解決策です。

20
Kayce Basques

Chromeの新しいバージョンには、この問題に対処するワークスペースという機能があります。 Webサーバー上のどのパスがシステム上のどのパスに対応するかを定義してから、ctrl-sだけで編集して保存することができます。

参照してください: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

20
rjmunro

私はそれが古い投稿であることを知っています、しかし私はそれをこのように保存します:

  1. ソースペインに移動します。
  2. [ナビゲーターを表示]をクリックします(ナビゲーターペインを左側に表示する)。
  3. 必要なCSSファイルをクリックしてください。 (変更した内容がすべてエディタに表示されます)
  4. エディタを右クリックして変更を保存します。

また、 Local Modifications を見れば、あなたのリビジョンを見ることができ、とても面白い機能です。スクリプトでも動作します。

あなたは「リソース」の間違ったセクションを見ています。

「ローカルストレージ」の下ではなく、「フレーム」の下にあります。

上のスクリーンショットは、開発ツールで行われた新しい修正に対する元のスタイルの差分を示しています。左ペインのアイテムを右クリックしてディスクに保存することができます。

11
thirtydot

Tincr Chromeエクステンションはインストールが簡単で(ノードサーバーを実行する必要はありません)そしてLiveReloadのような機能がそのまま使えるのです!双方向編集について話しましょう! :)

Tin.crウェブサイト

Chromeウェブストアリンク

Andyのブログ記事

10
Jose Browne

先週Chrome 18が必要なAPIとともにリリースされたので、私は chrome extension をChromeウェブストアに公開しました。この拡張機能は、開発者ツールのCSSまたはJSの変更をローカルディスクに自動的に保存します。ぜひチェックしてください。

8
Tomi Mickelsson

参考までに、インラインスタイルを使用している場合やDOMを直接変更する場合(たとえば要素を追加する場合)、ワークスペースでこの問題を解決することはできません。これは、DOMがメモリ内に存在し、DOMのアクティブ状態に関連付けられた実際のファイルがないためです。

そのためには、コンソールからdomの "前"と "後"のスナップショットを撮るのが好きです。copy(document.getElementsByTagName('html')[0].outerHTML)

それから私は自分の変更を見るために差分ツールにそれを置きます。

Diff tool image

全文: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

3
RoccoB

変更を保存できる拡張子についての質問の最後の部分に答えるには、 hotfix があります。

Chrome Dev Toolsからの変更を直接GitHubに保存することができます。そこからGitHubに受信後フックを設定して自動的にあなたのウェブサイトを更新することができます。

2
FajitaNachos

CSSをelement.styleに固執していない限り:

  1. 追加したスタイルに移動します。 Inspector-stylesheetというリンクがあるはずです。

enter image description here

  1. それをクリックすると、ソースパネルに追加したすべてのCSSが開きます。

  2. それをコピーして貼り付けなさい - うん!

あなたelement.styleを使っていたなら:

HTML要素を右クリックし、[HTMLとして編集]をクリックして、インラインスタイルでHTMLをコピーして貼り付けるだけです。

0
Ethan