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

104

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?

ketagihan
sumber
Seharusnya tidak sulit untuk menulis ekstensi Safari / Chrome untuk ini. Gunakan menu konteks untuk memungkinkan pengguna mengklik kanan sebuah elemen, lalu ambil properti currentStyle dari objek tersebut, mungkin kirim ke clipboard?
tbeseda
Mungkin saya harus pergi mencari sebelum berkomentar di sini. Kemungkinan duplikat stackoverflow.com/questions/162644/…
MiffTheFox
Ah bagus. Saya ingin melihat beberapa jawaban untuk chrome / web-kit, tetapi itu adalah jawaban yang bagus di sana. Terima kasih @MiffTheFox
hookedonwinter
Lihat Backfire: blog.quplo.com/2010/08/… Belum mencobanya, tapi kedengarannya menjanjikan.
Bryan Downing
1
@BryanDowning Selesai! Itu sangat luar biasa. Terima kasih atas pingnya.
hookedonwinter

Jawaban:

77

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:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Nicholas Zographos
sumber
4
perhatikan bahwa ini juga berfungsi untuk pemilih CSS baru yang ditambahkan di Inspektur melalui +ikon
Hari Jonathan
1
Ini hanya akan bekerja untuk perubahan yang telah ditambahkan ke stylesheet inspektur. Ini tidak akan berfungsi untuk perubahan yang dilakukan pada kumpulan aturan untuk pemilih kelas yang ada.
ian.pvd
49

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.

Chris MacDonald
sumber
1
Sepertinya Anda hanya dapat melakukan rollback sejauh referensi terakhir Anda. Jadi, Anda akan kehilangan perubahan jika Anda tidak sengaja menyegarkan / menutup tab dll.
tomblah
Bagaimana cara kerjanya dengan bundler modern seperti webpack di mana semua css Anda digabungkan menjadi satu file?
mattgabor
Saya tidak melihat "Modifikasi Lokal" ini, apakah jawaban ini sudah ketinggalan zaman?
Luke Pighetti
@ LukePighetti Saya melihatnya di v79 (12/2019) jika saya membuka file sumber yang saya minati> klik kanan> modifikasi lokal. Itu membuka tab di "laci konsol" berjudul "perubahan" yang memiliki menu kiri dengan semua file saya yang diubah. Anda juga dapat mengaksesnya dengan mengklik menu elipsis> alat lainnya> perubahan.
xr280xr
11

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.

FelipeAls
sumber
Plugin keren. Pasti membuat saya lebih dekat ke tempat yang saya inginkan. Akan menunggu dan melihat apakah ada yang lebih baik datang (lengkap pada salinan diformat css ke clipboard, misalnya).
hookedonwinter
7

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: Perbedaan contoh StyleURL

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

Jarred Sumner
sumber
Alat yang sangat berguna!
DanTheMann
2
Semua tautan tidak berfungsi, terima github. Harap perbarui, kedengarannya menjanjikan
Mirosław
Proyek ini sekarang ditinggalkan. Sayang sekali :-(
Damon Hill
6

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.

Tangkapan layar tab Perubahan di alat pengembang Chrome

Adrian B
sumber
1
Jawaban ini memberikan solusi browser built-in untuk melihat perubahan tanpa ekstensi tambahan yang perlu diinstal. Ini melacak perubahan yang dibuat pada stylesheet (atau JS) apa pun sebagai diff terperinci dengan file terpisah, dan menunjukkan penambahan baris demi baris, penghapusan & perubahan karakter individu. Meskipun tidak ada ekspor, sekarang ini adalah solusi yang lebih baik daripada jawaban terbaik saat ini dari tahun 2011.
ian.pvd
Ada banyak suara dalam jawaban ini setelah 9 tahun, tapi ini adalah jawaban terbaik. Satu-satunya hal yang hilang adalah cara cepat untuk mengekspor diff sehingga Anda dapat memproses perubahan secara otomatis dalam skrip atau IDE daripada harus melakukan side-by-side dan mengubah style sheet secara manual.
Sami Fouad
5

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!

Bryan Downing
sumber
Terlihat sangat mengagumkan. Sayang sekali itu $ 80. Terima kasih @ Bryan, penemuan bagus
hookedonwinter
2
Jawabannya di sini telah berubah dalam beberapa tahun terakhir. Chrome DevTools sekarang memungkinkan Anda untuk menulis perubahan Anda kembali ke file . Waktu yang menyenangkan!
cloudworks
4

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.)

Alexander Pavlov
sumber
4

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 .

masukkan deskripsi gambar di sini

Ada juga screencast praktis yang merinci ekstensi dengan cukup baik.

Andrew Craswell
sumber
1

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:

masukkan deskripsi gambar di sini

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":

masukkan deskripsi gambar di sini

Mariano Ruiz
sumber
0

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!

Abraham Brookes
sumber
0

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 .

Taylor Edmiston
sumber
0

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

Frazer Kirkman
sumber
-1

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.

Edwin Yip
sumber
8
Kedengarannya bagus. Sayang sekali itu untuk Windows.
KPM