Bu problemi sonsuza kadar yaşadım ve nihayet web denetçisinde bir şeyler düzenlemememize ve bunun için bir şeyler inşa etmemeye karar verdim ( https://github.com/viatropos/design.io ).
Daha iyi bir çözüm:
Metin düzenleyicinizde kaydet düğmesine bastığınızda, tarayıcı yeniden yüklenmeden CSS değişikliklerini otomatik olarak yansıtır .
Web denetçisinde css'i düzenlememizin ana nedeni (webkit kullanıyorum, ancak FireBug aynı satırlar boyunca) küçük ayarlamalar yapmamız gerektiğinden ve sayfayı yeniden yüklemek çok uzun sürdüğü için.
Bu yaklaşımla ilgili 2 temel sorun vardır. İlk olarak, idseçici içermeyen tek bir öğeyi düzenlemenize izin verilir . Bu nedenle, oluşturulan CSS'yi web denetçisinden kopyalayabilir / yapıştırabilseniz bile, css'i kapsamak için bir oluşturmak gerekir id. Gibi bir şey:
#element-127 {
background: red;
}
Bu css bir karışıklık yapmak başlar.
Yalnızca mevcut bir seçicinin stillerini değiştirerek .spacebu sorunu çözebilirsiniz (aşağıdaki webkit denetçisi resmindeki sınıf seçici).
Yine de ikinci sorun. Bu şeyin arayüzü oldukça kaba, büyük değişiklikler yapmak zor - css'nin bu bloğunu bu yere ya da başka bir yere gerçekten hızlı bir şekilde kopyalamayı denemek istiyorsanız.
Sadece TextMate'e bağlı kalmayı tercih ederim.
İdeal olan, CSS'yi metin düzenleyicinize yazmak ve tarayıcının sayfayı yeniden yüklemeden değişiklikleri yansıtmasını sağlamaktır . Bu şekilde, küçük değişiklikler yaparken son css'nizi yazmış olursunuz.
Bir sonraki seviye, Stylus, Less, SCSS, vb.Gibi dinamik bir CSS dilinde yazmak ve tarayıcıyı oluşturulan CSS ile güncellemektir. Bu şekilde box-shadow(), web denetçisinin kesinlikle yapamadığı karmaşıklıkları ortadan kaldıran gibi karışımlar oluşturmaya başlayabilirsiniz .
Dışarıda bunu yapan birkaç şey var, ama bence hiçbir şey onu düzene sokmuyor.
Bu çalışma şeklini kolayca özelleştirme yeteneğine sahip olmama, onları kullanmadığım ana nedendir.
Bu sorunu çözmek için https://github.com/viatropos/design.io özel olarak bir araya getirmek ve bunu yapmak:
- Tarayıcı, sayfayı yeniden yüklemeden her kaydettiğinizde css / js / html / etc'yi yansıtır.
- Herhangi bir şablonu / dili / çerçeveyi (Stylus, Less, CoffeeScript, Jade, Haml, vb.) İşleyebilir
- JavaScript ile yazılmıştır ve JavaScript'te uzantıları gerçek hızlı bir şekilde çırpabilirsiniz.
Bu şekilde, CSS'de bu küçük değişiklikleri yapmanız gerektiğinde, arka plan rengini ayarlayabilir, kaydet'e basabilir, göremezsiniz, tam olarak değil, tonu 10'a ayarlar, kaydeder, hayır, 5'e göre ayarlar, kaydeder, iyi görünür.
Çalışma şekli, bir dosyayı kaydettiğinizde (işletim sistemi düzeyinde) izleyerek, dosyayı işlerken (bu, uzantıların çalıştığı yerdir) ve daha sonra ele alınan websockets aracılığıyla tarayıcıya veri itmektir ( uzantı).
Takmak ya da bir şey takmamak için, ama bu sorunla uzun bir süre mücadele ettim.
Umarım yardımcı olur.
