Firebug adalah alat paling nyaman yang saya temukan untuk mengedit CSS - jadi mengapa tidak ada opsi "simpan" sederhana untuk CSS?

Saya selalu menemukan diri saya membuat tweak di Firebug, lalu kembali ke file .css asli saya dan mereplikasi tweak.

Adakah yang punya solusi yang lebih baik?

EDIT: Saya tahu kode ini disimpan di server (dalam banyak kasus bukan milik saya), tetapi saya menggunakannya ketika membangun situs web saya sendiri.

Firebug hanya menggunakan file .css Firefox yang diunduh dari server, ia tahu persis baris apa yang sedang diedit file. Saya tidak dapat melihat mengapa tidak ada opsi "ekspor" atau "simpan", yang memungkinkan Anda untuk menyimpan file .css baru. (Yang kemudian bisa saya ganti dengan yang jarak jauh).

Saya telah mencoba mencari di lokasi sementara, dan memilih File > Save ... dan bereksperimen dengan opsi output pada Firefox, tetapi saya masih belum menemukan cara.

EDIT 2: Grup diskusi resmi memiliki banyak pertanyaan , tetapi tidak ada jawaban.

Saya tiba di sini mencari persis fitur ini, yaitu, dapat menyimpan CSSproperti yang diedit kembali ke file asli (pada mesin pengembangan lokal saya). Sayangnya setelah mencari banyak dan tidak menemukan apa pun yang sesuai dengan kebutuhan saya (OK, ada CSS Updater tetapi Anda harus mendaftar dan ini adalah ekstensi berbayar ...) Saya menyerah pada Firefox + Firebug dan mencari sesuatu yang mirip untuk Google Chrome. Coba tebak ... Saya baru saja menemukan pos bagus ini yang menunjukkan cara yang bagus untuk membuatnya berfungsi (dibangun di Chrome - tidak perlu ekstensi tambahan):

Ubah CSS dan SIMPAN pada sistem file lokal menggunakan Alat Pengembang Chrome

Saya mencobanya sekarang dan berfungsi sangat baik menyoroti garis yang diubah. Cukup klik Simpan dan selesai! :)

Berikut video yang menjelaskan hal ini dan banyak lagi: Google I / O 2011: Tools Chrome Dev Reloaded

Saya harap ini membantu jika Anda tidak mengubah browser saat mengedit file CSS Anda. Saya sudah melakukan perubahan untuk saat ini, tapi saya benar-benar ingin memiliki fungsi ini dibangun ke Firebug. :)

[Perbarui 1]

Hari ini saya baru saja melihat video ini: Firefox CSS live edit di Sublimetext (sedang berlangsung) Terlihat menjanjikan.

[Perbarui 2]

Jika Anda menggunakan Visual Studio 2013 dengan Web Essentials, Anda akan dapat menyinkronkan CSS secara otomatis seperti yang ditunjukkan dalam video ini:

Esensi Web: Integrasi alat browser

Sudah bertanya-tanya hal yang sama untuk beberapa waktu sekarang, hanya nyali ketika Anda di-saat-freestyle-css'ing dengan pembakar akan hancur berkeping-keping oleh
reload tidak disengaja atau yang lainnya ....

Untuk maksud dan tujuan saya, saya akhirnya menemukan alat ....: FireDiff .

Ini memberi Anda tab baru, mungkin beberapa referensi aneh David Bowie, yang disebut "perubahan"; yang tidak hanya memungkinkan Anda untuk melihat / menyimpan apa yang telah dilakukan firebug, yaitu Anda,
tetapi juga secara opsional melacak perubahan yang dibuat oleh halaman itu sendiri .... jika itu dan / atau Anda memang cenderung.

Jadi bersyukur tidak harus mengetik ulang, atau membayangkan kembali dan kemudian mengetik ulang, setiap aturan css yang saya buat ...

Ini adalah tautan ke pengembang (jangan diremehkan oleh penampilan pertama, mungkin langsung menuju repositori Mozilla Add-On .

The Web Developer add-on membiarkan kau menyimpan suntingan Anda. Saya ingin menggabungkan pengeditan Firebug dengan fitur Simpan Pengembang Web.

Gunakan tombol " Simpan " (klik menu CSS -> Edit CSS) untuk menyimpan CSS yang dimodifikasi ke disk.

Rekomendasi : Gunakan tombol " Stick " untuk mencegah kehilangan perubahan saat Anda mengubah tab untuk melakukan penelusuran lainnya. Jika memungkinkan, gunakan hanya satu tab untuk melakukan pengeditan dan jendela firefox lainnya terkait pencarian, webmail, dll.

Saya baru saja merilis addon pembakar di kotak pasir addon mozilla yang mungkin cukup melakukan apa yang Anda inginkan: https://addons.mozilla.org/en/firefox/addon/52365/

Ini sebenarnya menyimpan file css "yang disentuh" ​​sesuai permintaan ke server web Anda (dengan komunikasi dengan skrip php layanan web satu-file).

Dokumentasi dapat ditemukan di beranda saya atau di halaman addon

Saya akan sangat menghargai pengujian, laporan bug, komentar, peringkat, diskusi tentang ini, karena masih dalam tahap beta awal, tetapi harus sudah berfungsi dengan baik.

CSS-X-Fire

Saya terkejut bahwa itu masih belum terdaftar untuk pertanyaan ini, tetapi mungkin karena ini baru dan penulis belum punya waktu untuk mempromosikannya.

Ini disebut CSS-X-Fire dan merupakan plugin untuk seri JetBrains IDE: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

Cara kerjanya: Anda menginstal salah satu IDE ini dan mengonfigurasi penyebaran (mendukung FTP dan SCP). Ini akan memungkinkan Anda untuk tetap sinkron dengan server.

Setelah ini, Anda menginstal plugin ini. Ketika mulai, ia akan meminta Anda untuk menginstal plugin untuk Firefox, untuk melakukan integrasi antara Firebug dan IDE. Jika gagal menginstal plugin, cukup gunakan teknik drag-n-drop untuk menginstalnya.

Setelah diinstal, itu akan melacak semua perubahan Anda dari Firebug dan Anda akan dapat menerapkannya dengan klik sederhana di dalam IDE.

FireFile

FireFile adalah alternatif yang mengharuskan Anda untuk menambahkan satu file php kecil ke sisi server agar dapat mengunggah css yang dimodifikasi.

Anda bisa menautkan firebug ke eclipse dengan fireclipse dan kemudian menyimpan file dari eclipse

Saya pikir yang paling dekat Anda akan dapatkan adalah dengan masuk ke mode Edit di Firebug dan menyalin dan menempelkan isi file CSS.

Kami baru saja memperkenalkan Backfire, mesin javascript open source yang memungkinkan Anda menyimpan perubahan CSS yang dibuat di Firebug dan inspektur Webkit ke server. Perpustakaan menyertakan contoh implementasi C # tentang bagaimana cara menyimpan perubahan yang masuk ke CSS Anda.

Berikut ini posting blog tentang cara kerjanya: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Dan inilah kode yang dihosting di Google Code: http://code.google.com/p/backfire/

Saya tahu ini tidak menjawab pertanyaan Anda, tetapi yang mengejutkan, Firebug clone "developer toolbar" klon Internet Explorer 8 (dapat diakses melalui F12) menawarkan opsi untuk "save html". Fungsi ini menyimpan DOM saat ini ke file lokal, yang berarti bahwa jika Anda mengedit DOM, misalnya, dengan menambahkan atribut gaya di suatu tempat, ini akan disimpan juga.

Tidak terlalu berguna jika Anda menggunakan Firebug untuk mengacaukan dengan CSS seperti yang dilakukan semua orang, tetapi langkah ke arah yang benar.

Saya mengusulkan solusi yang melibatkan kombinasi Firebug dan FireFTP serta kode yang secara langsung mengakses sistem file lokal ketika menjalankan situs web secara lokal.

Berikut beberapa skenarionya:

Bekerja di situs web yang di-host di mesin jarak jauh

Dalam hal ini Anda akan memberikan detail FTP dan lokasi CSS / HTML / Javascript dan Firebug kemudian akan memperbarui file-file ini ketika Anda menyimpan perubahan Anda. Bahkan mungkin dapat menemukan file itu sendiri dan kemudian meminta Anda untuk memverifikasi bahwa ia memiliki file yang benar. Jika nama file unik itu seharusnya tidak menjadi masalah.

Bekerja di situs web yang berjalan di mesin lokal Anda

Dalam hal ini Anda bisa memberikan Firebug dengan lokasi folder lokal situs web dan perilaku yang sama akan digunakan untuk mencocokkan dan memverifikasi file. Akses ke sistem file lokal dapat dilakukan melalui FireFTP jika perlu.

Bekerja di situs web yang di-host dari jarak jauh tanpa akses FTP

Dalam hal ini sesuatu seperti add-on FireFile harus diimplementasikan.

Fitur tambahan adalah kemampuan untuk menyimpan dan membuka file proyek yang menyimpan pemetaan antara file lokal dan URL yang terkait dengan serta menyimpan rincian FTP seperti yang sudah dilakukan FireFTP.

Saya adalah penulis CSS-X-Fire yang juga diposting oleh Sorin Sbarnea di utas ini. Kira saya agak terlambat;)

CSS-X-Fire memancarkan perubahan properti CSS dari Firebug ke IDE tempat perubahan dapat diterapkan atau dibuang.

Ada beberapa keuntungan dengan solusi ini dibandingkan sebagian besar alat lain yang ada yang hanya tahu tentang nama file dan konten yang diunduh oleh browser (lihat komentar NickFitz di posting asli).

Skenario 1: Anda memiliki situs web (proyek) yang memiliki beberapa tema yang dapat dipilih pengguna. Setiap tema memiliki file CSS sendiri tetapi hanya satu yang diketahui oleh Firebug, yang saat ini. CSS-X-Fire akan mendeteksi semua penyeleksi yang cocok dalam proyek dan memungkinkan Anda memutuskan mana yang harus dimodifikasi.

Skenario 2: Proyek web memiliki stylesheet yang dibuat waktu kompilasi atau selama penyebaran. Mereka mungkin digabungkan dari beberapa file dan nama file dapat berubah. CSS-X-Fire tidak peduli dengan nama file, hanya berurusan dengan nama pemilih CSS dan propertinya.

Di atas adalah contoh skenario di mana CSS-X-Fire unggul. Karena ini bekerja dengan file sumber, dan tahu tentang struktur bahasa, itu juga membantu untuk menemukan duplikat yang tidak diketahui Firebug, lompat-ke-kode, dan sebagainya.

CSS-X-Fire adalah open source di bawah lisensi Apache 2. Beranda proyek: http://code.google.com/p/css-x-fire/

FireFile

Firebug dibuat untuk mendeteksi masalah agar tidak menjadi debugger. tetapi Anda dapat menyimpan perubahan jika Anda menambahkan alat baru yang mengintegrasikan pembakar dengan menyimpan perubahan. itu adalah FireFile, klik di sini http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

FireFile menyediakan fungsionalitas yang diinginkan dengan menambahkan file PHP kecil ke sisi server.

Karena Firebug tidak bekerja di server Anda tetapi mengambil CSS dari situs dan menyimpannya secara lokal dan menunjukkan kepada Anda situs tersebut dengan perubahan-perubahan lokal tersebut.

Gunakan editor CSS di toolbar Pengembang Web Firefox:

http://chrispederick.com/work/web-developer/

Itu punya cukup banyak hal baik untuk digunakan bersama dengan Firebug, dan itu memungkinkan Anda menyimpan CSS Anda ke file teks.

Gunakan Bumerang.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Ini adalah solusi open source yang mengirimkan perubahan CSS kembali ke server dan menyimpannya.

Backfire menggunakan file javascript tunggal, dan paket sourcecode memiliki contoh implementasi .NET server yang bekerja dengan mudah dibawa ke platform lain.

Saya memiliki masalah ini selamanya, dan akhirnya memutuskan bahwa kita tidak boleh mengedit hal-hal di web inspektur dan membangun sesuatu untuk itu ( https://github.com/viatropos/design.io ).

Solusi yang lebih baik:

Browser secara otomatis mencerminkan perubahan CSS tanpa memuat ulang ketika Anda menekan simpan di editor teks Anda .

Alasan utama kami mengedit css di inspektur web (saya menggunakan webkit, tetapi FireBug ada di baris yang sama) adalah karena kami perlu melakukan penyesuaian kecil, dan butuh terlalu lama untuk memuat ulang halaman.

Ada 2 masalah utama dengan pendekatan ini. Pertama, Anda diizinkan mengedit elemen individual yang mungkin tidak memiliki idpemilih. Jadi, bahkan jika Anda dapat menyalin / menempelkan CSS yang dihasilkan dari inspektur web, itu harus menghasilkan sebuah iduntuk lingkup css. Sesuatu seperti:

#element-127 {
  background: red;
}

Itu akan mulai membuat css Anda berantakan.

Anda dapat menyiasatinya dengan hanya mengubah gaya untuk pemilih yang ada ( .spacepemilih kelas pada gambar inspektur webkit di bawah).

Meski begitu, masalah kedua. Antarmuka untuk hal itu cukup kasar, sulit untuk membuat perubahan besar - seperti jika Anda ingin mencoba cepat menyalin blok css ini ke tempat ini, atau apa pun.

Saya lebih suka tetap berpegang pada TextMate.

Idealnya adalah dengan hanya menulis CSS di editor teks Anda dan membuat browser mencerminkan perubahan tanpa memuat ulang halaman . Dengan cara ini Anda akan menulis css terakhir saat Anda membuat perubahan kecil.

Tingkat selanjutnya adalah menulis dalam bahasa CSS dinamis, seperti Stylus, Less, SCSS, dll, dan meminta pembaruan browser dengan CSS yang dihasilkan. Dengan cara ini Anda bisa mulai membuat mixin like box-shadow(), yang mengabstraksikan kompleksitas, yang pasti tidak bisa dilakukan oleh inspektur web.

Ada beberapa hal di luar sana yang melakukan hal ini, tetapi tidak ada yang benar-benar merampingkannya menurut saya.

• LiveReload : mendorong css ke browser tanpa menyegarkan saat Anda menekan save, tetapi ini adalah aplikasi mac , jadi akan sulit untuk menyesuaikan.
• CodeKit : juga aplikasi mac, tapi refresh browser setiap kali Anda menyimpan.

Tidak memiliki kemampuan untuk menyesuaikan cara kerja ini dengan mudah adalah alasan utama saya tidak menggunakannya.

Saya mengumpulkan https://github.com/viatropos/design.io khusus untuk menyelesaikan masalah ini, dan membuatnya menjadi:

1. Browser mencerminkan css / js / html / etc kapan saja Anda simpan, tanpa memuat ulang halaman
2. Ia dapat menangani semua templat / bahasa / kerangka kerja (Stylus, Less, CoffeeScript, Jade, Haml, dll.)
3. Ini ditulis dalam JavaScript, dan Anda dapat menyatukan ekstensi dengan cepat dalam JavaScript.

Dengan cara ini, ketika Anda perlu melakukan sedikit perubahan pada CSS, Anda dapat mengatakan, mengatur warna latar belakang, tekan simpan, lihat tidak, tidak cukup, sesuaikan rona dengan 10, simpan, tidak, sesuaikan dengan 5, simpan, terlihat bagus.

Cara kerjanya adalah dengan menonton setiap kali Anda menyimpan file (di tingkat os), memproses file (di sinilah ekstensi bekerja), dan mendorong data ke browser melalui soket web, yang kemudian ditangani (sisi klien dari ekstensi).

Bukan untuk plug atau apa pun, tapi aku kesulitan dengan masalah ini untuk waktu yang lama.

Semoga itu bisa membantu.

Firebug bekerja pada CSS yang dihitung (yang Anda dapatkan dengan mengambil CSS dalam file dan menerapkan warisan, dll. Plus perubahan yang dibuat dengan JavaScript). Ini berarti bahwa mungkin Anda tidak dapat menggunakannya secara langsung untuk dimasukkan dalam file HTML, yang merupakan browser / versi khusus (kecuali Anda hanya peduli dengan Firefox). Di sisi lain, ia melacak apa yang asli dan apa yang dihitung ... Saya pikir seharusnya tidak terlalu sulit untuk menambahkan beberapa JS ke Firebug untuk dapat mengekspor CSS itu ke file teks.

Saya bertanya-tanya mengapa saya tidak bisa memilih dan menyalin teks di depan mata saya. Terutama ketika orang lain mengatakan Anda bisa "memilih dan menyalin". Ternyata Anda bisa , Anda hanya perlu memulai tarik di luar teks apa pun (yaitu di selokan di atas atau di sebelah kiri teks) sebagai mousedown - apakah itu klik atau seret - pada teks apa pun segera memanggil properti editor. Anda juga dapat mengeklik teks luar untuk mendapatkan kursor (bahkan jika itu tidak selalu terlihat) yang kemudian Anda dapat bergerak dengan tombol panah dan memilih teks seperti itu.
Teks yang disalin ke clipboard sama sekali tidak ada indentasi, tapi setidaknya itu menyelamatkan Anda dari secara manual menyalin seluruh isi file CSS. Biarkan saja program diff Anda mengabaikan perubahan di spasi ketika membandingkan dengan yang asli.

Anda bisa menulis file skrip server Anda sendiri yang mengambil parameter nama file dan parameter konten.

Skrip server akan menemukan file yang diminta dan mengganti isinya dengan yang baru.

Menulis Javascript yang memanfaatkan info firebug dan mengambil data yang berguna akan menjadi bagian yang sulit.

Saya pribadi lebih suka meminta tim dev di firebug untuk memasok fungsi, seharusnya tidak terlalu sulit bagi mereka.

Akhirnya, Ajax mengirimkan pasangan nama file / konten ke file php yang Anda buat.

Dikutip dari FAQ Firebug :

Halaman Pengeditan

• Dapatkah saya menyimpan ke sumber perubahan yang saya buat pada halaman web yang saya lihat?

  Sekarang kamu tidak bisa. Seperti yang ditulis John J. Barton di newsgroup:

  Mengedit di Firebug seperti mengambil acar dari dan menambahkan mustard ke sandwich restoran: Anda dapat menikmati hasilnya, tetapi pelanggan berikutnya di restoran masih akan mendapatkan acar dan tidak ada mustard.

  Ini adalah fungsi yang lama diminta, jadi suatu hari nanti akan tersedia langsung dari Firebug. Sementara itu, Anda dapat mencoba Firediff , ekstensi untuk pembakar oleh Kevin Decker.

• Bagaimana saya bisa menampilkan semua perubahan yang telah dibuat ke CSS situs di dalam pembakar?

  Itu fitur yang diterapkan di Kevin Decker's Firediff .

Ini solusi parsial. Setelah Anda melakukan perubahan, klik salah satu tautan ke file yang relevan. Ini adalah file asli, jadi Anda harus me-refresh file, yang berada di bawah tombol menu pilihan di kanan atas panel pembakar. Sekarang Anda memiliki halaman css yang dimodifikasi, yang dapat Anda salin & tempel. Jelas, Anda harus melakukannya untuk setiap file css.

Sunting: sepertinya Mark Biek memiliki versi yang lebih cepat

Cara yang sangat mudah untuk "mengedit" halaman Anda adalah pergi ke situs melalui browser internet Anda. Simpan halaman sebagai html hanya ke desktop Anda. Pergi ke desktop Anda dan klik kanan pada file halaman web baru dan pilih buka dengan, pilih notepad dan edit halaman dari sana, jika Anda tahu html itu akan mudah. Setelah semua pengeditan selesai, simpan file dan buka kembali halaman web Anda, perubahan harus ada jika dilakukan dengan benar. Anda kemudian dapat menggunakan halaman yang baru diedit dan mengekspor atau menyalinnya ke lokasi jauh Anda

Sebenarnya Firebug adalah alat debug dan analisis: bukan editor dan jelas tidak dianggap satu. Alasan lain telah disebutkan: bagaimana Anda ingin mengubah CSS, disimpan di server saat men-debug halaman web?