Chrome Geliştirici Araçları'nın Stiller panelindeki CSS değişiklikleri nasıl kaydedilir?

Nasıl CSS değişiklikleri kaydetmek için Stiller panelinde bir Google Chrome Geliştirici Araçları ?

Aracın web sitesinde , kaynak panelinde tüm değişiklikleri görebildiğimiz belirtiliyor

Ancak yerel olarak bir CSS dosyası üzerinde çalışıyorum ancak Kaynak panelinde değişiklikler görünmüyor

Bu arada, Chrome Geliştirici araçlarının css değişikliklerini kaydetmek için herhangi bir eklenti, araç biliyor musunuz? Firebug için birçok https://stackoverflow.com/search?q=firebug+CSS+changes+save olduğunu biliyorum

CSS değişikliklerinizi Chrome Geliştirme Araçları'nın kendisinden kaydedebilirsiniz. Chrome artık Çalışma Alanınıza yerel klasörler eklemenize izin veriyor. Chrome'un klasöre erişmesine izin verdikten ve klasörü yerel çalışma alanına ekledikten sonra, bir web kaynağını yerel bir kaynağa eşleyebilirsiniz.

• Geliştirici Araçlarının Kaynaklar paneline gidin , sol panelde sağ tıklayın (dosyaların listelendiği yer) ve Çalışma Alanına Klasör Ekle'yi seçin . Öğeler panelinde seçili bir öğe için her bir CSS kuralının sağ üstündeki stil sayfasını tıklatarak Kaynaklar panelinde bir stil sayfasına hızlı bir şekilde ulaşabilirsiniz.

• Klasörü ekledikten sonra, Chrome'a ​​klasöre erişim izni vermeniz gerekir.

• Ardından, ağ kaynağını yerel kaynağa eşlemeniz gerekir.

• Sayfayı yeniden yükledikten sonra Chrome, artık eşlenen dosyalar için yerel kaynakları yüklüyor. İşleri kolaylaştırmak için Chrome size yalnızca yerel kaynakları gösterir (böylece yerel veya ağ kaynağını düzenleyip düzenlemediğiniz konusunda kafanız karışmaz). Değişikliklerinizi kaydetmek için CTRL + Sdosyayı düzenlerken düğmesine basın .

ps

Chrome'un yerel sürümü (tarih 201604.12) uygulamasını sağlamak için eşlenen dosyaları açmanız ve düzenlemeye başlamanız gerekebilir.

DevTools teknoloji yazarı ve geliştiricisi burada savunuyor.

Chrome 65'den başlayarak, Yerel Geçersiz Kılmalar bunu yapmanın yeni ve hafif bir yoludur. Bu, Çalışma Alanlarından farklı bir özelliktir.

Geçersiz Kılma Ayarla

1. Git Kaynaklar panelinden.
2. Git geçersiz kılar sekmesi.
3. Geçersiz Kılmalar İçin Klasör Seç'i tıklayın .
4. Değişikliklerinizi kaydetmek istediğiniz dizini seçin.
5. Görünüm portunuzun üst kısmında DevTools'a dizine okuma ve yazma erişimi vermek için İzin Ver'i tıklayın .
6. Değişikliklerinizi yapın. Aşağıdaki GIF'te, background:rosybrowndeğişikliğin sayfa yüklemelerinde devam ettiğini görebilirsiniz .

Geçersiz kılmalar nasıl çalışır?

DevTools'ta bir değişiklik yaptığınızda, DevTools bu değişikliği bilgisayarınızdaki dosyanın değiştirilmiş bir kopyasına kaydeder. Sayfayı yeniden yüklediğinizde DevTools, ağ kaynağı yerine değiştirilmiş dosyayı sunar.

Geçersiz kılmalar ve çalışma alanları arasındaki fark

Çalışma Alanları, IDE'niz olarak DevTools'u kullanmanıza izin vermek için tasarlanmıştır. Kaynak kodlarınızı kullanarak havuz kodunuzu ağ koduyla eşler. Asıl fayda, kodunuzu küçültüyorsanız veya SCSS gibi aktarılması gereken kodu kullanıyorsanız, DevTools'ta (genellikle) yaptığınız değişiklikler orijinal kaynak kodunuzla eşleştirilir. Öte yandan, geçersiz kılmalar, web'deki herhangi bir dosyayı değiştirmenize ve kaydetmenize izin verir. Değişiklikleri hızlı bir şekilde denemek ve bu değişiklikleri sayfa yüklemelerinde kaydetmek istiyorsanız iyi bir çözümdür.

Chrome'un yeni sürümlerinde, bu sorunu ele alan çalışma alanları adı verilen bir özellik vardır. Web sunucunuzdaki hangi yolların sisteminizdeki hangi yollara karşılık geldiğini tanımlayabilir, ardından sadece ctrl-s ile düzenleyebilir ve kaydedebilirsiniz.

Bkz. Http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Eski bir yazı olduğunu biliyorum, ama bu şekilde saklıyorum:

1. Kaynaklar bölmesine gidin.
2. Gezgin'i Göster'e tıklayın (gezgin bölmesini solda göstermek için).
3. İstediğiniz CSS dosyasını tıklayın. (Yaptığınız tüm değişikliklerle editörde açılacaktır)
4. Editöre sağ tıklayın ve Değişikliklerinizi kaydedin.

Düzeltmelerinizi görmek için Yerel Değişiklikler'i de görebilirsiniz , çok ilginç bir özellik. Ayrıca komut dosyalarıyla çalışın.

"Kaynaklar" ın yanlış bölümüne bakıyorsunuz.

"Yerel Depolama" altında değil, "Çerçeveler" altında:

Yukarıdaki ekran görüntüsü, devtools'ta yapılan yeni değişikliklere karşı orijinal stillerin bir farkını gösterir. Sol bölmedeki öğeyi sağ tıklatıp diske geri kaydedebilirsiniz.

Tincr Chrome uzantısının kurulumu daha kolaydır (düğüm sunucusunu çalıştırmaya gerek yoktur) VE ayrıca kutudan çıktığı gibi LiveReload ile birlikte gelir! Çift yönlü düzenleme hakkında konuşun! :)

Tin.cr Web Sitesi

Chrome Web Mağazası Bağlantısı

Andy'nin Blog Yazısı

Chrome 18, geçen hafta gerekli API'lerle yayınlandığına göre, krom uzantımı Chrome web mağazasında yayınladım . Uzantı, Geliştirici araçlarındaki CSS veya JS'deki değişiklikleri otomatik olarak yerel diske kaydeder. Git kontrol et.

Bilginize, Satır içi stiller kullanıyorsanız veya DOM'u doğrudan değiştiriyorsanız (örneğin, bir öğe ekleme), çalışma alanları bu sorunu çözmez. Çünkü DOM bellekte yaşıyor ve DOM'un aktif durumu ile ilişkili gerçek bir dosya yok.

Bunun için konsoldan "önce" ve "sonra" anlık görüntüsünü almak istiyorum: copy(document.getElementsByTagName('html')[0].outerHTML)

Sonra değişikliklerimi görmek için farklı bir araca yerleştiriyorum.

Tam makale: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

Değişiklikleri kaydedebilecek uzantılarla ilgili sorunuzun son bölümünü yanıtlamak için düzeltme var

Değişiklikleri Chrome Geliştirme Araçları'ndan doğrudan GitHub'a kaydetmenize olanak tanır. Buradan, web sitenizi otomatik olarak güncellemek için GitHub'da bir alma sonrası kancası ayarlayabilirsiniz.

CSS'yi yapıştırmadığınız sürece element.style:

1. Eklediğiniz bir stile gidin. Müfettiş-stil sayfası yazan bir bağlantı olmalıdır:

2. Buna tıklayın, kaynaklar paneline eklediğiniz tüm CSS'leri açacaktır

3. Kopyalayın ve yapıştırın - yay!

Eğer varsa adres kullanıyorum element.style:

HTML öğenizi sağ tıklayabilir, HTML olarak Düzenle'yi tıklayabilir ve ardından HTML'yi satır içi stillere kopyalayıp yapıştırabilirsiniz.

GÜNCELLEME 2019: Diğer cevaplar biraz modası geçmiş olduğundan, burada güncellenmiş bir tane ekleyeceğim. En son sürümde chrome klasörünü dosya sistemine eşlemeye gerek yoktur.

Yani, chrome: =

1) Düğüm vb.Gibi çalışan bir yerel sunucuya ihtiyacınız olacaktır, alternatif olarak bu vscode uzantısı sizin için sunucuyu oluşturur: canlı sunucu VSCode uzantısı , yükleyin, sunucuyu çalıştırın.

2) html sayfasını yerel sunucu çalıştırarak kroma yükleyin.

3) devTools-> Kaynaklar-> Dosya Sistemi-> Çalışma alanına klasör ekle'yi açın

4) Yerel sunucuyu çalıştırırken kullanılan klasörü ekleyin. En son kromda ek haritalama gerekmez! Sürpriz!

Daha fazla bilgi Çalışma Alanları ile Dosyaları Düzenleme

Stiller sekmesinde yapılan değişikliklerin dosya sistemi dosyalarına yansıtmadığını unutmayın. Bunun yerine devtools-> source-> your_folder adresine gitmeniz ve ardından değişikliklerinizi orada yapmanız ve efekti görmek için sayfayı yeniden yüklemeniz gerekir.