CSS ile çalışırken, genellikle bir tarayıcıda test ederim - örneğin, Chrome - bir öğeyi sağ tıklayın, Öğeyi İncele'yi tıklayın ve CSS'yi orada düzenleyin. Kenar boşluğu ve dolgu gibi şeyleri değiştirmek için ok tuşlarının kullanılması, işleri sıraya koymayı çok kolaylaştırır.
O zaman bu değişiklikleri alıp CSS dosyasına uygulamak çok zor değil, ancak denetçideki seçiciye sağ tıklayıp "dışa aktar" veya "kopyala" yı seçip içeriğin benim pano.
Böyle bir şey var mı?
Yanıtlar:
Bunun cevabını en azından Chrome v14'te buldum.
Öğeler bölümündeyken, CSS kurallarının yanındaki "dosya adı: keten numarası" bağlantısını tıklamanız yeterlidir. Görünen CSS dosyası tüm değişiklikleri içerecektir.
Burası tam olarak:
+simge aracılığıyla eklenen yeni CSS seçiciler için de işe yaradığını unutmayın
Chrome'da Kaynaklar sekmesindeki bir CSS dosyasını sağ tıklayıp "Yerel Değişiklikler" i tıklayabilirsiniz.
Bu size tüm yerel değişikliklerinizi gösterir. Her bir revizyon zaman damgalıdır ve önceki herhangi bir revizyona geri dönebilirsiniz.
Bu eğiticinin Canlı Düzenleme ve Revizyon Geçmişi bölümüne bakın.
Firediff , Firebug'da yapılan değişiklikleri izleyen bir Firebug eklentisidir . HTML bölmesinde yapacağınız her şeyi (harika) ve aynı zamanda Web Developer Araç Çubuğu uzantısını (o kadar da iyi değil) kısa kullanımınızı günlüğe kaydeder, piksel cinsinden yazı tipi boyutu bilgisi almak için Shift-Ctrl-F deyin.
Chrome'da bir Firebug eklentisi gördüm ancak test etmedim, Firefox ile Firediff kullanıyorum.
Tam olarak bunu yapan bir Chrome uzantısı oluşturdum.
Adı StyleURL - Chrome Inspector'da yaptığınız tüm CSS değişikliklerini alır ve fark olarak geçerli CSS'yi verir: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
İşte bu sayfaya "padding-bottom: 50px" eklediğim bir örnek:
Açık kaynak kodlu ve GitHub'da da: https://github.com/Jarred-Sumner/styleurl-extension
Chrome'da , konsol çekmecesinde tüm CSS değişikliklerini gösteren Değişiklikler sekmesi de vardır . Bu bir ihracat değil, ama en azından neyin değiştiğini hızlıca kavramak çok uygun.
Bu ürünü daha önce SO'da önerdim (onlarla hiçbir şekilde bağlantılı değilim).
Mükemmel ürün. Tam olarak aradığınız şeye benziyor ve çok daha fazlası.
DÜZENLE: Buradaki diğer birkaç cevap, Google Chrome'un yerel dosyalarınıza bağlanma yeteneğinden bahsetti (ki bu çok harika). Diğer cevaplara göz atın!
Harici CSS'yi düzenlerseniz, en son revizyonunu Kaynaklar panelinden DnD'yi destekleyen herhangi bir metin düzenleyicisine sürükleyebilirsiniz (bkz. Http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , Daha fazla ayrıntı için "Kalıcı Değişiklikler" bölümü.) Ayrıca CSS değişikliklerinizi, stil sayfası kaynağının herhangi bir önceki sürümüne geri döndürebilirsiniz (herhangi bir stil sayfası revizyonunun sağ tıklama açılır menüsünde).
Cloudworks tarafından belirtildiği gibi, bunun cevabı değişti. Bu, artık Chrome DevTools Otomatik Kaydetme uzantısı ile oldukça iyi bir şekilde gerçekleştirilebilir . Bu araç, Chrome Geliştirici Araçları konsolunda yapılan CSS ve JavaScript değişikliklerini izler ve bunları yerel dosyalara geri kaydeder. Uzantıyı yükleme ve kurma talimatları için lütfen @addyosmani tarafından blogunda burada yazılan kılavuza bakın .
Uzantıyı oldukça iyi detaylandıran kullanışlı bir ekran yayını da var.
Çalışma Alanları ile , CSS'nizi denetçinize (Chrome'da) yazarken kaydedebilirsiniz. Sorun, her değişikliğin otomatik olarak kaydedilmesi ve http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ ve Chrome Geliştirici Araçlarında CSS değişikliklerinin otomatik olarak kaydedilmesini devre dışı bırakmada belirtildiği gibi bu özelliği devre dışı bırakmanın bir yolu olmamasıdır. .
Hem Firefox hem de Chrome şu anda bu özelliği destekliyor, ancak bazı platformlarda tüm Chrome varsayılan olarak göstermiyorsa, görmek için "Değişiklikler" görünümünü etkinleştirmeniz gerektiğini unutmayın (Kubuntu Linux 20.04'ümde varsayılan olarak), bunu şu şekilde etkinleştirebilirsiniz: Geliştirici Araçları çubuğundaki "Geliştirme Araçlarını Özelleştir ve Kontrol Et" düğmesine gidin> "Diğer araçlar"> "Değişiklikler" , ardından sekme düğmede görünecektir:
Firefox'ta onu etkinleştirmeye gerek yoktur, ancak Chrom * dünyasından geliyorsanız bulmak zor olabilir. Sağdaki son bölümü "Denetçi" sekmesinde kontrol etmeniz yeterlidir:
Firefox stok geliştirme araçlarını kullanıyorsanız, css'yi doğrudan araçlar iletişim kutusunda düzenleyebilirsiniz - CSS görünüm düğmesini tıklayın (bu, {}sembolün bulunduğu en üstteki düğmedir ) ve doğrudan css'nizi düzenleyin. Tarayıcıda gerçek zamanlı olarak güncellenir ve işiniz bittiğinde sadece kopyalayıp doğrudan css dosyanıza yapıştırın. Güzel!
Safari'ye özel olarak bir cevap eklemek için - bu mümkün.
Varolan bir CSS dosyası için Inspector'daki Stiller bölümünde CSS'yi düzenlediğinizde Cmd-S, tüm dosyayı değişikliklerle yeniden kaydetmek için tuşuna basabilirsiniz . Bununla birlikte, Sass / önişlemci / paket oluşturma ile CSS'nizi oluşturma vb. Gibi bir meta dil kullanıyorsanız, CSS kaynak haritaları ile mümkün olsa da, bunun bu sorunu gerçekten çözeceğini düşünmüyorum.
Stiller bölümünün üst kısmındaki CSS'yi düzenlediğinizde, Style Attributesatır içi stiller eklemek için (mevcut bir CSS dosyasına bağlı değil) altında, tüm bu değişiklikleri kolayca dışa aktarmak mümkün görünmüyor. Şimdilik, her öğe için geçersiz kılmaları manuel olarak kopyalayıp yapıştırıyorum.
Resmi Apple belgeleri biraz tarihlidir, ancak burada bulunur: Web Denetçisi Eğitimi - Web Sayfanızı Değiştirmek için Kodu Düzenleme .
Chrome'da, css denetçisinde + düğmesini tıklayıp basılı tutabilir, ardından değişikliklerinizi denetçi stil sayfasına eklemeyi seçebilirsiniz. Doğrudan css seçicilerinizde düzenleme yapmak kadar kullanışlı değildir, ancak yazdıklarınızın tümü inspector-stylesheet.css içinde olacaktır.
Beta yakında ürünüm LIVEditor bunu tam olarak yapıyor.
Kolayca anlamanıza izin vermek için, Firebug'ın denetçisinin metin düzenleyicinize gömülü olduğunu düşünebilirsiniz .
Bu şekilde değişiklik yapmak gerekmez elle Peşinde kod editörü tekrar verdiği Firebug'ın veya WebKit'in geliştirici araçlarını kullanarak.