Gerçek zamanlı önizleme ve seçici yerelleştirme özellikli CSS düzenleyici


9

Başlık, aradığım şey hakkında her şeyi anlatıyor. Temel olarak, bir web sitesinin tüm stillerini toplayan bir yazılım olmalıdır, böylece onları düzenleyebilir ve kaydedebilirim.

Lütfen soruyu dikkatlice okuyun, çünkü bahsi geçen tüm koşulların karşılanmasını istiyorum.

DÜZENLEME: Burada daha açık olmak veya daha çok istenen iş akışımı tanımlamak istiyorum. Başlangıç ​​durumu, yerel makinenizde web sitesinin kaynaklarına sahip olmanız olacaktır.
Şimdi düz kaynakları (HTML / CSS) editörümde / IDE / her neyse (WYSIWYG yok!) Açmak istiyorum. Ve hemen yanında ya da farklı bir pencerede (başka bir sekmede değil!) Canlı bir önizleme istiyorum, kaynağı düzenlerken görmek istiyorum. Önizleme otomatik olarak güncellenmelidir (veya dosyayı kaydettiğimde CTRL + S bir tür refleks: P olduğu için aslında aynı olurdu).
Ayrıca Firebug veya Chrom'da (e | ium) çalışan bir müfettiş olmalıdır. Bu denetçideki bir CSS seçicisine tıkladığımda, imleç ilgili kaynak dosyada sağa atlamalıdır.

BAŞKA BİR DÜZENLEME: Bunu https://stackoverflow.com/q/4680109/220652 buldum . Neredeyse aynı sorun.


2
Firebug ve Web geliştirici araç çubuğu CSS'yi doğrudan düzenleyebilir, ikincisi de kaydedebilir.
Lekensteyn

1
@Lekensteyn: Evet, ancak Firebug kaydedemiyor ve Web Geliştiricisi seçicileri bulamıyor. Yani aradığım şey onlar değil. Afedersiniz.
dAnjou

Yanıtlar:


12

Birkaç seçenek var.

Şu anda Google Chrome'un Geliştirici Araçlarını ( Action Video ) kullanıyorum çünkü çok çeşitli inceleme, ayrıntılı raporlama ve fazla sürüş sağlıyor. Değişikliklerimi yaptıktan sonra güncellenmiş CSS'yi kopyaladım ve CSS dosyasının ilgili bölümlerini yeniden yazıyorum, yenileyin, takmaya devam edin.

Burada Chrome'un Geliştirici Aracı'nda bir tanım düzenledim

resim açıklamasını buraya girin

Dosya adını ve satır numarasını takip edebilirim (değişiklikleri kopyaladıktan sonra) ve sadece editöre yapıştırabilirim

resim açıklamasını buraya girin

Bunun ötesinde, kısa süre önce açıklanan ve açıklanan sorunu hafifletmek için tasarlanmış WebPutty adlı bir araç var . Kişisel olarak kullanmamış olsam da, Joel Spolsky'nin şirketi Fog Creek Software (Joel aynı zamanda StackOverflow'un Kurucu Ortağı) tarafından geliştirildi.


CSS'yi tam olarak nasıl kopyalıyorsunuz? Ve dosya başına yapabilir misin? WebPutty yerel web sitelerini işleyemiyor gibi görünüyor, ancak ipucu için teşekkürler.
dAnjou

1
@jAnjou İş akışının nasıl olacağını size göstermek için birkaç ekran görüntüsü sağlamaya çalıştım.
Marco Ceppi

Ah tamam. Yani bu iş akışı Stylebot ile hemen hemen aynı. En büyük fark: Stylebot CSS'yi kaydeder, böylece sayfayı yeniden yükleyebilir veya o web sitesindeki diğer sayfalara gidebilirsiniz. Her neyse, bu bir upvote.
dAnjou

5

Bu soru zaten tartışılmış gibi görünüyor, ancak daha spesifik olarak bir CSS Editörü hakkında konuşuyorsunuz. Eminim bu yüzden sorunuzu kopya olarak işaretlememişlerdir.

Ancak, size önerebileceğim, şu gibi diğer sorulara cevap olarak gönderdiğim birkaç aracın kullanılmasıdır: Ubuntu'da Dreamweaver alternatifi? ve daha önce gördüğünüze göre bahse girebildiğimde bile, rahatınız için buraya kopyalarım:

Sorunuz biraz belirsiz görünüyor.

Her şeyden önce ve Dreamweaver'a alternatif ile ilgili olarak, diğer tüm cevapların tüm önerilerini mükemmel buldum, ancak Dreamweaver'a bir alternatif ararken, benim için en yakın uygulama Amaya Projesi'ydi. Diğer alternatiflerden daha zengin ve Kompozer'den biraz daha sofistike gibi görünüyor.

Resmi web'den bir ekran görüntüsü, onu iş başında görmeniz için burada:

resim açıklamasını buraya girin

Ek ekran görüntülerine bir sonraki bağlantıya tıklayarak erişilebilir: http://www.w3.org/Amaya/screenshots/Overview.html

Biraz dengesiz bulabilirsiniz, ya da en azından benim içindi, ama aynı zamanda ihtiyaçlarınıza da uygun olabilir.

WYSIWYG editörleriyle oynadıktan sonra, BlueFish ile doğrudan kodlamayı tercih ettim ama bir WYSIWYG editörü değil.

Ve kundakçı ile ilgili sorun için öneriler hakkında hiçbir şey söyleyemem, üzgünüm.

Amaya'ya bir şans verirseniz lütfen bize nasıl yaptığınızı bildirin.

İyi şanslar!

Edit == Amaya yükledikten sonra, henüz istikrarlı olmaktan uzak ama başka bir yazılım basit Metin Editörleri ve Amaya bir WYSIWYG editörü gibi olduğunu düşünüyorsanız, bir şekilde diğer uygulamalardan daha iyi özelliklere sahip gibi görünüyor.

Yorumunuzda söylediklerinizi test ettim ve Amaya'nın dosya / klasör yapısında / adında bir şeylerin değiştiğini bile fark etmedim. Bu, bununla ilgili ihtiyaçlarınızı karşılamayacaktır.

Bir sonraki ekran görüntüsünde "kaynaklar" klasörünü "resources1" olarak yeniden adlandırdığımı ve Amaya henüz "kaynaklar" olarak gösterildiğini ve yenilemeyi zorlamanın bir yolu olmadığını görebilirsiniz. Yazılımı yeniden başlattıktan ve projeyi tekrar yükledikten sonra bile Amaya bunu fark etmeyecek.

resim açıklamasını buraya girin

Birinin gelip iyi bir alternatif bırakmasını umarak sorunuzu yakından takip edeceğim.

İyi şanslar!

Ayrıca, diğer kullanıcıların aynı sorulara cevaplarında, gerçek zamanlı önizleme penceresine sahip tek kararlı web editörü gibi görünen " Blue Griffon Web Editor " u buldum, bu -btw- bölünmüş modda görülemez . Her ikisi de aynı anda değil, yalnızca kodu veya WYSIWYG önizlemesini görebilirsiniz.

Size kolaylık sağlamak için buraya yerleştirilmiş ekran görüntüleri:

Önizleme Ekranı: resim açıklamasını buraya girin

Kod Ekranı: resim açıklamasını buraya girin

Bu araç birçok yararlı araç içerir, ancak bazı eklentiler veya eklentiler ücretsiz olmayabilir (ücretli). Hangi cazibe azaltır.

Aptana Studio 3 Bu cevap tavsiye: Dreamweaver gibi temel Web Geliştirme IDE / Editör? benim için programlama için en iyi araçtır, çünkü çift görünümlü genişletilmiş masaüstümde bir web tarayıcısı kullanarak önizleme yapabilirim. Bu sizin durumunuz olmayabilir.

Bunu önerebilirim. Bu ihtiyaçlarınızı karşılamıyorsa üzgünüm ve ...

İyi şanslar!


5

Tamam, herkes dinlesin! Geany sadece harika! Tarayıcı önizlemesi ekleyen bir eklentiye sahiptir. Kenar çubuğuna, "alt çubuğa" veya fazladan bir pencereye yerleştirebilirsiniz. Ve şimdi iki ekstra bonus kötü eşek katili özellikleri. 1. Bu tarayıcı WebKit kullanıyor. Yani, müthiş bir müfettiş var! 2. Açık bir belgeyi kaydettiğinizde tarayıcı yeniden yüklenir.

Bunun yanı sıra birçok harika özelliği var ama kendiniz denemelisiniz. Ben sadece biri için aşık oldum. Burada bir ekran görüntünüz var:

Geany


Keşke tarayıcı penceresine yeni bir "Sekme" de izin vermesini diliyorum Bu, css olmayan test yolunu daha iyi hale getirir.
Nemo

Sizi anladığımdan emin değilim, ancak hemen hemen her diğer IDE'de başka bir sekmede bir tarayıcı önizlemesine sahip olabilirsiniz. Ama bu tam olarak, istemediğim şeydi.
dAnjou


Ah ... hmm. Ne yazık ki Geany'de, tarayıcı önizlemesinin (tam özellikli bir tarayıcı olan) editör sekmelerinin yanındaki bir sekmede olması mümkün değildir. Ama ek bir pencerede olabilir. Böylece birden çok monitörle veya geniş ekran monitörle (yarım tarayıcı, yarım düzenleyici) kullanabilirsiniz.
dAnjou

4

Üzgünüm arkadaşlar, ama kendi soruma cevap vereceğim. Stylebot'u yeni buldum . Neredeyse tüm koşulları karşılıyor. Otomatik tamamlama yok ama bununla yaşayabilirim.

İşte bir ekran görüntüsü. Kenar çubuğu Stylebot'tur. Bazı basit özellikleri hızlı bir şekilde düzenleyebileceğiniz temel bir düzenleme moduna, seçilen öğe için düz CSS'yi düzenleyebileceğiniz gelişmiş bir moda ve "CSS'yi Düzenle" ile sayfa için tüm CSS'yi düzenleyebilirsiniz.

resim açıklamasını buraya girin


2

Firefox eklentisi Firediff'i deneyin . Zen benzeri adın da belirttiği gibi CSS veya DOM'da yaptığınız değişiklikleri gösteren "Değişiklikler" sekmesini ekleyerek Firebug ile entegre olur.

Değişikliklerinizin farkını veya anlık görüntüsünü kaydetmek için "Değişiklikler" sekmesinde bir CSS değişikliğini sağ tıklayın.

firediff ekran görüntüsü

Ben kullanmadım ama cssUpdater de var.

"Seçici yerelleştirme" gelince, ne demek istediğini tam olarak bilmiyorum ama buradan indirebileceğiniz selectBug var .


Firediff burada Natty ve Fx 6.0.2 üzerinde çalışmıyor gibi görünüyor. Burada ve orada bazı değişiklikler yaptım ancak "Değişiklikler" sekmesinde değişiklik yok. CssUpdater'ın aradığım şey olacağından neredeyse eminim ama Linux için mevcut değil. "Seçici konumu" ile CSS seçicileri kastediyorum. Web sitesinde bir yere sağ tıklayıp "Elemanı Kontrol Et" i tıkladığımda, Firebug veya Chrom (e | ium) Müfettişi bana ilgili elemanı ve CSS'sini gösterir.
dAnjou

İşe yarıyor, şu anda Natty'de ve en son Firefox'ta kullanıyorum. Tüm değişikliklerin gösterildiğinden emin olun (değişiklikler sekmesindeki küçük aşağı oku tıklayın).
scottl

Tamam, şimdi Firediff aniden çalışıyor ama biraz dağınık ve onunla iş akışı gerçekten hoş değil.
dAnjou

0

Aptana Studio harika bir IDE'dir, ancak yanılmıyorsam Gerçek Zamanlı Önizlemesi yoktur. Her neyse, eğer ilgileniyorsanız: http://www.aptana.com/products/studio3

Not: Önizleme için bir Kısayol Tuşu ayarı olduğundan, bu kadar büyük bir anlaşma değil.


Aptana'nın herhangi bir koşulumu nasıl karşıladığını görmüyorum (?).
dAnjou

0

Yazılım kendi başına değil, şık eklenti (krom ve firefox) geçersiz kılma stil sayfasını kaydettiğinizde sayfayı otomatik olarak günceller. FireBug'dan farklı olarak, .cssmemnun kaldığınızda kopyalayıp uygun bir dosyaya yapıştırabilmeniz için kaydeder.


Anlamıyorum. Seçicileri bulabilir mi?
dAnjou

0

sadece birkaç hafta önce bu alanda yeni bir oyuncu ortaya çıktı. Adobe'nin açık kaynak kod editörü Parantezlerinden bahsediyorum. İhtiyacınız olan tüm bilgiler burada: https://github.com/adobe/brackets/wiki/Linux-Version

Spring30 sürümü sadece birkaç gün önce piyasaya sürüldü :) İyi şanslar!

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.