Bu kılavuzda, Chrome Geliştirici Araçları'nı kullanarak orijinal kodu değiştirmeden stilleri ve betikleri nasıl uyarlayabileceğinizi öğreneceksiniz. Chrome'un Overrides ve Çalışma Alanı yardımıyla web sitenizde kapsamlı testler yapabilir ve değişiklikler yapabilirsiniz, böylece orijinal sunucu dosyasına dokunmanıza gerek kalmaz.
En Önemli Bulgular
- Overrides kullanarak dosyaları yerel olarak geçersiz kılabilir ve testler yapabilirsiniz.
- Çalışma Alanı, yerel geliştirme klasörünüzü Chrome Geliştirici Araçlarıyla bağlamanıza ve değişiklikleri doğrudan yapmanıza olanak tanır.
- Bu iki fonksiyon, orijinal sunucu kodunu etkilemeden üretim ortamındaki sorunları gidermek için son derece faydalıdır.
Adım Adım Kılavuz
Chrome Geliştirici Araçlarını etkili bir şekilde kullanmak için bu adımları izleyin:
1. Overrides Kullanımı
Öncelikle Chrome'un Overrides işlevini kullanmak istiyoruz. Örneğin, sunucudan yüklenen main.js gibi bir JavaScript dosyası seçin.
Dosyaya sağ tıklayın ve bağlam menüsünden "İçeriği Geçersiz Kıl"ı seçin.
Yerel dosya için saklanacak konumu seçebileceğiniz bir iletişim kutusu açılır. Üzerine yazmak istediğiniz dosyaları saklamak için zaten bir klasör oluşturduğunuzdan emin olun.
İstediğiniz klasörü seçin ve "Klasörü Seç"e tıklayın. Bu, orijinal dosya ile yerel dosyanız arasındaki bağlantıyı oluşturacaktır.
Şimdi tarayıcıya bu dizine erişim izni vermeniz gerekmektedir. Yeniden Overrides menüsüne tıklayın ve istenen dizine erişim izninin etkinleştirildiğinden emin olun.
2. Yerel Bir Dosya Oluşturma
Şimdi Override klasöründe yeni bir dosya oluşturabilirsiniz. Dosyayı açın ve içine örneğin basit bir alert()-betiği yazın.
İçeriği kendi ihtiyaçlarınıza göre özelleştirebilirsiniz. Dosyayı kaydedin ve sayfayı yenileyin, artık sayfanın orijinal olarak sunucudan yüklenen dosya yerine Alert penceresinin göründüğünü göreceksiniz.
3. Ağ Etkinliğini Kontrol Etme
Sunucudan dosyanın artık yüklenmediğinden emin olmak için Geliştirici Araçlar'da Ağ sekmesini açın. Artık main.js dosyasının sunucudan değil, yerel olarak geçersiz kılınmış içeriklerle yüklendiğini görmelisiniz.
Daha fazla Override eklemek veya mevcut olanları silmek istiyorsanız, tüm etkin Override'ları görüntüleyebileceğiniz Override bölümüne gidin.
4. Çalışma Alanıyla Çalışma
Son olarak, Çalışma Alanı'nı kurmak istiyoruz. Bu sayede yerel geliştirme klasörünüzü Geliştirici Araçlarıyla bağlayabilirsiniz. Geliştirici Araçlar'ın ayarlarına gidin ve "Workspace" seçeneğini arayın.
Projelerinizin bulunduğu klasörü seçin. Chrome'un bu klasöre erişim iznine ihtiyacı olduğunu unutmayın, bu nedenle ilgili izinleri verdiğinizden emin olun.
5. Kod ile Çalışma
Şimdi Workspace'de doğrudan çalışabilirsin. Örneğin main.js dosyanı aç, değişiklikler yap ve dosyayı kaydet. Kod otomatik olarak sunucudan yeniden yüklenir ve ayarlamaların web sitende nasıl etkilediğini hemen görebilirsin.
6. Workspace'de Hata Ayıklama
Workspace'nin pratik bir avantajı, kodunu hızlı bir şekilde hata ayıklamak için kırılma noktaları koyabilmen. Kod satırlarına kırılma noktaları koy ve sayfayı yeniden yükle, işlemi duraklatıp değişkenlerin geçerli durumunu kontrol etmek için.
7. Avantajlar ve Dezavantajlar
Workspace'in faydalı olmasına rağmen, birçok geliştirici değişikliklerin doğrudan bir kod düzenleyicide, örneğin Visual Studio Code'da yapılmasını ve dosyaların orada kaydedilmesini öneriyor. Bu şekilde hangi dosya sürümünün kullanıldığını daha iyi görebilirsin. Workspace'i kullanırken özellikle orijinal dosyalara olan bağlantı net değilse karışık hale gelebilir.
Buna rağmen, yalnızca basit CSS dosyaları veya dönüştürülmemiş kodlar üzerinde çalışıyorsan, Workspace iyi bir seçenek olabilir.
Özet
Bu kılavuzda, Chrome Developer Araçları'ndaki Override'lar ve Workspace ile nasıl çalışabileceğini öğrendin ve orijinal Sunucu dosyalarını değiştirmeden stilleri ve betikleri özelleştirebileceksin. Override'lar hızlı değişiklikler yapmana izin verirken, Workspace doğrudan Geliştirme klasörünle çalışmana olanak tanır.
Sık Sorulan Sorular
Override'ları CSS dosyaları için de kullanabilir miyim?Evet, Override'ları CSS dosyaları için de kullanabilirsin. Sadece istediğin CSS dosyasını seç ve Override'ı etkinleştir.
Override'ları nasıl devre dışı bırakabilirim?Override'ları Developer Araçları'ndan Override'lara giderek devre dışı bırakabilir veya silebilirsin.
Workspace için kısıtlamalar var mı?Evet, bazen transpile edilmiş Kod gibi, doğru Workspace'i tanımlamak sorunlu olabilir.
Neden Workspace yerine Override'ları kullanmalıyım?Override'lar, farklı dosya sürümleriyle karışıklığa düşmeden değişiklik yapmanın daha açık bir yolunu sunar. Orijinal dosyaları doğrudan değiştirmek istemediğinde genellikle daha kolaydırlar.
