Bagaimana cara menyimpan perubahan CSS pada panel Styles pada Alat Pengembang Chrome?

194

Bagaimana cara menyimpan perubahan CSS pada panel Styles pada Alat Pengembang Google Chrome ?

Di situs web tool disebutkan bahwa kita dapat melihat semua perubahan di panel sumber daya

masukkan deskripsi gambar di sini

Tapi saya bekerja secara lokal pada file CSS tetapi perubahan tidak muncul di panel Resource untuk saya

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Ngomong-ngomong Apakah Anda tahu add-on, alat untuk menyimpan perubahan css dari alat Pengembang Chrome? Saya tahu untuk Firebug ada banyak https://stackoverflow.com/search?q=firebug+CSS+changes+save

html css google-chrome google-chrome-extension google-chrome-devtools Jitendra Vyas
sumber
Sekarang ada API untuk ekstensi DevTools untuk menerima pemberitahuan tentang sumber daya yang diubah - sehingga Anda dapat membuat ekstensi yang akan diintegrasikan dengan IDE pilihan Anda atau hanya memposting konten sumber daya ke server WebDAV: developer.chrome.com/extensions/ ...
caseq
9
Saya yakin pertanyaan ini dan jawabannya sudah usang, karena Chrome sejak itu memindahkan fungsionalitas yang dimodifikasi-hemat CSS ke panel "Sumber" . Fungsionalitasnya cukup membingungkan, dan agak menyesatkan: Saya menjelajahi fungsionalitas Chrome yang dimodifikasi-hemat-CSS ini dalam beberapa detail dalam posting Stack Overflow terkait ini: stackoverflow.com/questions/16005435/…
ChaseMoskal
Kemungkinan duplikat perubahan Ekspor CSS dari inspektur (webkit, firebug, dll)
mems
Overrides Lokal adalah cara baru untuk melakukan ini, mulai dari Chrome 65. Overrides adalah fitur yang berbeda dari Workspaces.
Kayce Basques

Jawaban:

137

Anda dapat menyimpan perubahan CSS dari Alat Dev Chrome itu sendiri. Chrome sekarang memungkinkan Anda untuk menambahkan folder lokal ke Workspace Anda. Setelah mengizinkan Chrome mengakses folder dan menambahkan folder ke ruang kerja lokal, Anda dapat memetakan sumber daya web ke sumber daya lokal.

  • Arahkan ke panel Sumber Alat Pengembang, Klik kanan di panel kiri (tempat file terdaftar) dan pilih Tambahkan Folder ke Workspace . Anda bisa sampai ke stylesheet di panel Sumber dengan cepat dengan mengklik stylesheet di kanan atas setiap aturan CSS untuk elemen yang dipilih di panel Elemen.

masukkan deskripsi gambar di sini

  • Setelah menambahkan folder, Anda harus memberi Chrome akses ke folder tersebut. Izinkan akses chrome

  • Selanjutnya, Anda perlu memetakan sumber daya jaringan ke sumber daya lokal.

masukkan deskripsi gambar di sini

  • Setelah memuat ulang halaman, Chrome sekarang memuat sumber daya lokal untuk file yang dipetakan. Untuk mempermudah, Chrome hanya menunjukkan kepada Anda sumber daya lokal (jadi Anda tidak bingung apakah Anda mengedit sumber daya lokal atau jaringan). Untuk menyimpan perubahan Anda, tekan CTRL + Ssaat mengedit file.

ps

Anda mungkin harus membuka file yang dipetakan dan mulai mengedit agar Chrome menerapkan versi lokal (tanggal 201604.12).

Philip Ramirez
sumber
4
Saya hanya ingin menambahkan di bagian bawah stylesheet tema saya apa pun perbedaan CSS yang saya buat saat mengedit CSS saya. Itu dia. Apakah ada cara untuk menghasilkan 'diff' yang dapat saya salin dan tempel CSS? Lihat pertanyaan lain ini: stackoverflow.com/questions/21871535/... Kisah latar belakangnya adalah saya mengedit CSS yang merupakan tema, saya hanya bisa menambahkan CSS di bagian bawah stylesheet, bukan mengedit apa pun di atas. Hal yang sama berlaku jika seseorang hanya dapat menambahkan custom.css ke situs web dengan penggantian CSS-nya.
Caroline Schnapp
paul-irish, Tertarik pada cara membuat perbedaan / tambalan hanya perubahan lokal CSS (tanpa perubahan jarak jauh). SimpanSebelum benar-benar menyelesaikan masalah fleksibilitas dan akselerasi ...
Denis Denisov
Sekarang chrome menyimpan file lokal secara otomatis (tanpa menekan CTRL + S) bagaimana mencegahnya?
Uzair Ali
Tidak bekerja untuk saya. Setelah menyimpan file CSS di folder lokal, memetakan jarak jauh ke lokal dan memuat ulang, semua perubahan hilang. :( mengedit file lokal di panel Elemen dan menyimpan file dalam sumber juga tidak bertahan pada perubahan saya.
crispy
2
Tampaknya ada bug di inspektur Chrome 46 bahwa ketika memuat ulang halaman, file lokal yang dipetakan hanya diterapkan kembali ketika Anda mengubahnya di panel Sumber. Anda bahkan dapat mengubahnya di editor eksternal tetapi Anda harus membuka dan memfokuskannya di panel Sumber.
crispy
28

Penulis dan pengembang pengembang DevTools di sini.

Mulai di Chrome 65, Overrides Lokal adalah cara baru dan ringan untuk melakukan ini. Ini adalah fitur yang berbeda dari Workspaces.

Siapkan Override

  1. Buka panel Sumber .
  2. Buka tab Override .
  3. Klik Pilih Folder Untuk Ditimpa .
  4. Pilih direktori tempat Anda ingin menyimpan perubahan Anda.
  5. Di bagian atas viewport Anda, klik Izinkan untuk memberi DevTools akses baca dan tulis ke direktori.
  6. Buat perubahan Anda. Di GIF di bawah ini, Anda dapat melihat bahwa background:rosybrownperubahan tetap ada di seluruh pemuatan halaman.

menimpa demo

Cara menimpa bekerja

Saat Anda membuat perubahan di DevTools, DevTools menyimpan perubahan ke salinan file yang dimodifikasi di komputer Anda. Saat Anda memuat ulang halaman, DevTools menyajikan file yang dimodifikasi, bukan sumber daya jaringan.

Perbedaan antara override dan ruang kerja

Ruang kerja dirancang untuk memungkinkan Anda menggunakan DevTools sebagai IDE Anda. Ini memetakan kode repositori Anda ke kode jaringan, menggunakan peta sumber. Manfaat sebenarnya adalah jika Anda mengecilkan kode Anda, atau menggunakan kode yang perlu diubah, seperti SCSS, maka perubahan yang Anda buat di DevTools (biasanya) dipetakan kembali ke kode sumber asli Anda. Mengganti, di sisi lain, memungkinkan Anda memodifikasi dan menyimpan file apa pun di web. Ini solusi yang bagus jika Anda hanya ingin bereksperimen dengan cepat dengan perubahan, dan menyimpan perubahan itu di seluruh halaman.

Kayce Basques
sumber
5
ini bekerja, tetapi masih terlalu rumit. Saya lebih suka jika Anda hanya bisa mengaktifkan ini untuk sesi saat ini. IMHO, kotak centang seperti "Simpan perubahan sumber daya untuk sesi saat ini" akan lebih cocok dengan alur kerja pengembang web. Perubahan terus-menerus bukanlah sesuatu yang dibutuhkan pengembang web dalam bisnis hariannya dan bahkan dapat menyebabkan sakit kepala tambahan jika Anda lupa menghapus penggantian ini dan kembali beberapa minggu kemudian. Override baik untuk pengguna akhir - bukan untuk debugging. Masih terbalik.
Saya setuju dengan komentar lainnya. Sama sekali tidak intuitif dan tidak menyimpan semua perubahan, jadi tidak terlalu membantu. Akan lebih baik bagi kita untuk hanya menulis ekstensi krom kecil mendengarkan perubahan dan menyimpannya. Itu kalau ada API atau proses yang bisa kita hubungkan ... belum mencarinya.
Carles Alcolea
Maaf pak Bukankah liveSCSS sudah usang dan tidak dikembangkan lagi? lihat stackoverflow.com/a/57622797/10189759
Luk Aron
@Kayce Basques bagaimana dengan mengembangkan ekstensi chrome? Saat Anda menyuntikkan stylesheet (dan js), semua fitur ini tidak berfungsi, bukan? Solusi apa pun untuk pengembangan semacam itu (untuk mempercepat pembaruan css / js dari alat dev chrome ke file sumber ekstensi lokal). Terima kasih
Andrew
19

Versi baru Chrome memiliki fitur yang disebut ruang kerja yang membahas masalah ini. Anda dapat menentukan jalur mana di server web Anda yang sesuai dengan jalur mana di sistem Anda, lalu edit dan simpan hanya dengan ctrl-s.

Lihat: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

rjmunro
sumber
Saya pikir OP ingin melihat perubahan yang dia buat di tab Styles di panel Elements. Perubahan ini tidak harus terikat pada file sumber tertentu.
Ron Inbar
13

Saya tahu ini adalah pos lama, tetapi saya simpan dengan cara ini:

  1. Buka panel Sumber.
  2. Klik Tampilkan Navigator (untuk menampilkan panel navigator di sebelah kiri).masukkan deskripsi gambar di sini
  3. Klik file CSS yang Anda inginkan. (Ini akan terbuka di editor, dengan semua perubahan yang Anda buat)
  4. Klik kanan pada editor dan Simpan perubahan Anda.

Anda juga dapat melihat Modifikasi Lokal untuk melihat revisi Anda, fitur yang sangat menarik. Juga bekerja dengan skrip.

Guilherme de Jesus Santos
sumber
Saya tidak dapat menemukan "Show Navigator"
NickyLarson
@NickyLarson, saya mengedit jawaban saya untuk memasukkan di mana tombol ini.
Guilherme de Jesus Santos
Baca lagi pertanyaan aslinya. Dia tidak mengedit file CSS. Dia membuat perubahan di tab Gaya pada panel Elemen.
Ron Inbar
11

Anda mencari di bagian "Sumber" yang salah.

Itu tidak di bawah "Penyimpanan Lokal", itu di bawah "Bingkai":

Tangkapan layar di atas menunjukkan perbedaan gaya asli terhadap modifikasi baru yang dibuat di devtools. Anda dapat mengklik kanan item di panel kiri dan menyimpannya kembali ke disk.

tigapuluh
sumber
Tidak ada di dalam Frames juga, bagi saya. Saya menambahkan satu tangkapan layar lagi dalam pertanyaan
Jitendra Vyas
Saya tidak yakin bagaimana "Bingkai" Anda dapat kosong. Kedengarannya rusak. Cobalah ini di build Canary (Anda dapat menginstalnya di samping versi Anda saat ini): tools.google.com/dlpage/chromesxs
fiftydot
Canary tidak dapat membuka. Saya juga menemukan solusi ini justin.my/2011/04/why-my-google-chrome-canary-cannot-run tetapi masih belum berfungsi. Saya mendapat pesan ini ketika instalasi selesai k.min.us/iefbE2.jpg
Jitendra Vyas
2
Sampai akhir pekan ini (21/5/2012), solusi ini tidak lagi berfungsi saya percaya. Dulu saya melakukan hal yang sama yang Anda tunjukkan untuk menulis potongan besar css baru (tidak lama, atau diedit). Tapi sekarang, setidaknya bagi saya, mengklik file HTML itu hanya menampilkan HTML mentah tanpa menunjukkan aturan CSS yang baru. Apakah masih bekerja untuk Anda, dan jika tidak, Anda punya solusi baru untuk mencapai ini?
Nucleon
ini juga tidak berfungsi untuk saya di Chrome 48. Lagi pula tetap melakukan ini?
DMTintner
10

Ekstensi Tincr Chrome lebih mudah dipasang (tidak perlu menjalankan server simpul) DAN juga dilengkapi dengan fungsi LiveReload seperti yang ada di luar kotak! Bicara tentang pengeditan dua arah! :)

Situs Web Tin.cr

Tautan Toko Web Chrome

Artikel Blog Andy

Jose Browne
sumber
Alat open-source seperti browsersync.io jauh lebih baik, mendukung semua browser modern dan menyediakan lebih banyak lagi
Gianfranco P.
8

Sekarang Chrome 18 dirilis minggu lalu dengan API yang diperlukan, saya menerbitkan ekstensi chrome saya di toko web Chrome. Ekstensi secara otomatis menyimpan perubahan dalam CSS atau JS di alat Pengembang ke disk lokal. Pergi memeriksanya.

Tomi Mickelsson
sumber
4

FYI, Jika Anda menggunakan gaya sebaris atau memodifikasi DOM secara langsung (misalnya menambahkan elemen), ruang kerja tidak menyelesaikan masalah ini. Itu karena DOM hidup dalam memori dan tidak ada file aktual yang terkait dengan keadaan aktif DOM.

Untuk itu, saya ingin mengambil snapshot "sebelum" dan "setelah" dom dari konsol: copy(document.getElementsByTagName('html')[0].outerHTML)

Lalu saya menempatkannya di alat diff untuk melihat perubahan saya.

Gambar alat Diff

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

RoccoB
sumber
1

Untuk menjawab bagian terakhir dari pertanyaan Anda tentang ekstensi yang dapat menyimpan perubahan, ada perbaikan terbaru

Ini memungkinkan Anda untuk menyimpan perubahan dari Alat Dev Chrome langsung ke GitHub. Dari sana Anda dapat mengatur kait pasca-terima di GitHub untuk secara otomatis memperbarui situs web Anda.

FajitaNachos
sumber
1

Selama Anda belum menempelkan CSS di element.style:

  1. Buka gaya yang telah Anda tambahkan. Seharusnya ada tautan yang mengatakan inspektur-stylesheet:

masukkan deskripsi gambar di sini

  1. Klik itu, dan itu akan membuka semua CSS yang telah Anda tambahkan di panel sumber

  2. Salin dan tempel - yay!

Jika Anda telah menggunakan element.style:

Anda bisa mengklik kanan pada elemen HTML Anda, klik Edit sebagai HTML dan kemudian salin dan tempel HTML dengan gaya inline.

Ethan
sumber
1
Dan jika Anda tidak dapat menemukan lembar inspektur-gaya karena Anda tersesat mencari melalui dom, cukup Ctrl + P (atau CMD + P) sementara DevTools fokus dan mulai menulis "inspec" ... itu akan muncul, dan kemudian masuk saja. i.imgur.com/WSWcbh8.png
Carles Alcolea
1

UPDATE 2019: Karena jawaban lain sedikit usang, saya akan menambahkan yang diperbarui di sini. Dalam versi terbaru tidak perlu memetakan folder chrome ke sistem file.

masukkan deskripsi gambar di sini

Jadi, misalkan saya memiliki folder web yang berisi file HTML, CSS, JS di desktop yang ingin saya perbarui ketika saya membuat perubahan di chrome: =

1) Anda memerlukan server lokal yang sedang berjalan seperti node dll. Atau, ekstensi vscode ini menciptakan server untuk Anda: ekstensi server VSCode langsung , instal, jalankan server.

2) memuat halaman html di chrome dari menjalankan server lokal.

3) Buka devTools-> Sumber-> Filesystem-> Tambah folder ke ruang kerja

masukkan deskripsi gambar di sini

4) Tambahkan folder yang digunakan dalam menjalankan server lokal. Tidak diperlukan pemetaan tambahan di chrome terbaru! Ta-da!

Lebih lanjut tentang itu Edit File Dengan Ruang Kerja

Perhatikan bahwa perubahan yang dilakukan pada tab gaya TIDAK akan mencerminkan file sistem file. Sebagai gantinya Anda perlu pergi ke devtools-> source-> your_folder dan kemudian buat perubahan di sana dan muat ulang halaman untuk melihat efeknya.
masukkan deskripsi gambar di sini

JerryGoyal
sumber
1
Tapi OP secara khusus bertanya tentang perubahan yang dibuat di tab Styles ...
Ron Inbar