Ekspor perubahan CSS dari inspektur (webkit, firebug, dll)

Saat saya bekerja dengan CSS, saya akan sering menguji di browser - katakanlah, Chrome - klik kanan sebuah elemen, klik Inspect Element, dan edit CSS di sana. Penggunaan tombol panah untuk mengubah hal-hal seperti margin dan padding membuat pengaturan menjadi sangat mudah.

Tidak terlalu sulit untuk mengambil perubahan tersebut dan menerapkannya ke file CSS, tetapi alangkah baiknya jika saya dapat mengklik kanan selektor di inspektur dan memilih "ekspor" atau "salin", dan isinya tersedia di papan klip.

Apakah ada yang seperti ini?

Saya telah menemukan jawabannya, setidaknya pada Chrome v14.

Sementara di bagian Elements, cukup klik link "filename: linenumber" di sebelah aturan CSS. File CSS yang muncul akan berisi semua modifikasi.

Tempat ini tepatnya:

Di Chrome, Anda dapat mengklik kanan file CSS di tab Sumber dan mengklik "Modifikasi Lokal"

Ini menunjukkan semua perubahan lokal Anda. Setiap revisi diberi stempel waktu dan Anda dapat melakukan rollback ke revisi sebelumnya.

Lihat bagian Pengeditan Langsung dan Riwayat Revisi dari tutorial ini.

Firediff adalah add-on Firebug yang melacak perubahan yang dilakukan di Firebug. Ini mencatat semua yang akan Anda lakukan di panel HTML (hebat) tetapi juga penggunaan singkat ekstensi Toolbar Pengembang Web (tidak terlalu bagus), katakan Shift-Ctrl-F untuk mendapatkan informasi ukuran font dalam piksel.

Saya telah melihat ekstensi Firebug di Chrome tetapi tidak mengujinya, saya menggunakan Firediff dengan Firefox.

Saya membuat ekstensi Chrome yang melakukan hal ini.

Ini disebut StyleURL - ini mengambil perubahan CSS apa pun yang Anda buat di Chrome Inspector dan mengeluarkan CSS yang valid sebagai perbedaan: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Berikut adalah contoh ketika saya menambahkan "padding-bottom: 50px" ke halaman ini:

Ini open-source dan di GitHub juga: https://github.com/Jarred-Sumner/styleurl-extension

Di Chrome juga ada tab Perubahan di laci konsol yang menampilkan semua modifikasi CSS. Ini bukan ekspor, tetapi paling tidak sangat nyaman untuk segera memahami apa yang telah berubah.

Saya telah menyarankan produk ini di SO sebelumnya (saya tidak berafiliasi dengan mereka dengan cara apa pun).

http://www.skybound.ca/

Produk unggulan. Kedengarannya persis seperti yang Anda cari dan banyak lagi.

EDIT: Beberapa jawaban lain di sini telah menyebutkan kemampuan Google Chrome untuk menautkan ke file lokal Anda (yang sangat keren). Lihat jawaban lainnya!

Jika Anda mengedit CSS eksternal, Anda dapat menarik revisi terbarunya keluar dari panel Resources ke editor teks mana pun yang mendukung DnD (lihat http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , bagian "Perubahan yang Tetap" untuk detail selengkapnya.) Anda juga dapat mengembalikan perubahan CSS ke versi sebelumnya dari sumber daya lembar gaya (di menu munculan klik kanan dari revisi lembar gaya apa pun.)

Seperti yang disebutkan oleh cloudworks, jawabannya telah berubah. Ini sekarang dapat diselesaikan dengan cukup baik oleh ekstensi Chrome DevTools Autosave . Alat ini melacak perubahan CSS dan JavaScript yang dibuat dalam konsol Alat Pengembang Chrome, dan menyimpannya kembali ke file lokal. Untuk instruksi untuk menginstal dan mengatur ekstensi, silakan merujuk ke panduan yang ditulis oleh @addyosmani di blognya, di sini .

Ada juga screencast praktis yang merinci ekstensi dengan cukup baik.

Dengan Workspaces Anda dapat menyimpan CSS saat Anda mengetiknya di inspektur Anda (di Chrome). Masalahnya adalah setiap perubahan disimpan secara otomatis dan tidak ada cara untuk menonaktifkan fitur ini, seperti yang ditunjukkan di http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ dan Nonaktifkan penyimpanan otomatis perubahan CSS di Alat Pengembang Chrome .

Baik Firefox dan Chrome mendukung fitur ini sekarang, tetapi perlu dicatat bahwa di beberapa platform jika tidak semua Chrome tidak menampilkannya secara default, Anda perlu mengaktifkan tampilan "Perubahan" untuk melihatnya (di Kubuntu Linux 20.04 saya, ini bukan secara default), berikut cara mengaktifkannya: buka tombol "Sesuaikan dan Kontrol DevTools" di bilah Alat Pengembang> "Alat lainnya"> "Perubahan" , lalu tab akan muncul di tombol:

Di Firefox memang tidak perlu mengaktifkannya, namun jika Anda berasal dari dunia Chrom * mungkin akan sulit menemukannya. Cukup periksa bagian terakhir di sebelah kanan pada tab "Inspektur":

Jika Anda menggunakan alat pengembang saham Firefox, Anda dapat mengedit css langsung di dialog alat - klik tombol area pandang CSS (tombol di bagian atas dengan {}simbol) dan edit css Anda secara langsung. Ini akan diperbarui secara realtime di browser dan ketika Anda selesai cukup salin-tempel langsung ke file css Anda. Bagus!

Untuk menambahkan jawaban untuk Safari secara khusus - itu mungkin.

Saat Anda mengedit CSS di bagian Styles di Inspector untuk file CSS yang ada, Anda dapat menekan Cmd-S untuk menyimpan ulang seluruh file dengan perubahan. Namun, jika Anda menggunakan bahasa meta seperti Sass / preprocessor / membuat CSS Anda dengan bundling dll, menurut saya ini tidak benar-benar menyelesaikan masalah itu, meskipun mungkin dengan peta sumber CSS.

Saat Anda mengedit CSS di bagian atas bagian Gaya, di bawah Style Attributeuntuk menambahkan gaya sebaris (tidak terikat ke file CSS yang ada), tampaknya tidak mungkin untuk mengekspor semua perubahan tersebut dengan mudah. Untuk saat ini, saya hanya menyalin dan menempelkan timpaan secara manual untuk setiap elemen.

Dokumen resmi Apple sedikit kuno tetapi ditemukan di sini: Tutorial Inspektur Web - Mengedit Kode untuk Mengubah Halaman Web Anda .

Di Chrome, di css inspector Anda dapat mengklik dan menahan tombol +, lalu memilih untuk menambahkan perubahan Anda ke inspector-stylesheet. Ini tidak semudah mengedit langsung di selektor-css Anda, tetapi apa yang Anda tulis semuanya akan ada di inspector-stylesheet.css

LIVEditor produk saya dalam-beta-segera melakukan ini dengan tepat.

Agar Anda dapat memahaminya dengan mudah, Anda dapat menganggap inspektur Firebug disematkan ke editor teks Anda.

Dengan begitu Anda tidak perlu melakukan perubahan secara manual lagi di editor kode Anda setelah Anda mengubahnya menggunakan Firebug atau alat pengembang Webkit.