Bir çalışma alanı oluşturarak Geliştirici Araçları'nda yaptığınız değişiklikleri bilgisayarınızdaki kaynak dosyalara kaydedin. Bir yapılandırma dosyası sunarak çalışma alanı klasörünü Geliştirici Araçları'na otomatik olarak bağlayabilir veya Kaynaklar panelinde manuel olarak çalışma alanı konumu ekleyebilirsiniz.
Genel Bakış
Bir çalışma alanı klasörüne otomatik (veya manuel) bağlantı, Geliştirici Araçları'nda yaptığınız bir değişikliği bilgisayarınızdaki aynı dosyanın yerel kopyasına kaydetmenize olanak tanır. Örneğin, şu senaryoyu ele alalım:
- Sitenizin kaynak kodu masaüstünüzde bulunuyorsa.
- Sitenin
localhost:PORTadresinden erişilebilir olması için kaynak kodu dizininden yerel bir web sunucusu çalıştırıyorsunuz. Bu sunucu, meta veriler içeren basit bir JSON dosyası da sunuyor (daha sonra açıklanacak). - Google Chrome'da
localhost:PORTaçık ve sitenin CSS'sini değiştirmek için Geliştirici Araçları'nı kullanıyorsunuz.
Bir çalışma alanı klasörü bağlıyken Kaynaklar panelinde CSS, HTML ve JavaScript dosyalarında yaptığınız değişiklikler bilgisayarınızdaki kaynak koduna kaydedilir. Ancak Geliştirici Araçları, Öğeler panelinde DOM'da yaptığınız değişiklikleri kaydetmez.
Ayrıca Geliştirici Araçları, kaynak eşlemeleri yardımıyla optimize edilmiş kodu genellikle orijinal kaynak kodunuzla eşleyebilir.
Bağlantı için meta veri oluşturma
Geliştirici Araçları'nın çalışma alanı klasörünüzü otomatik olarak keşfetmesini sağlamak için rastgele bir sürüm 4 UUID oluşturun ve aşağıdaki JSON dosyasına yerleştirin:
{
"workspace": {
"uuid": "UUID",
"root": "path/to/project/root/folder"
}
}
Ardından JSON dosyasını path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json dizinine yerleştirin.
Son olarak, yerel HTTP sunucunuzu çalıştırın ve JSON dosyasını da sunduğunuzdan emin olun.
Alternatif olarak, bu adımı atlayıp klasör bağlantısını manuel olarak ayarlayabilirsiniz.
Çalışma alanı klasörü bağlama
Bir klasörü bağlamak için:
- Chrome'da yerel olarak barındırılan sayfanıza (bu örnekte
localhost:8000) gidin ve Geliştirici Araçları'nı açın. Kaynaklar > Workspace'te, klasörünüzün yanındaki Bağla'yı tıklayın.
İstendiğinde, Geliştirici Araçları'nın klasörünüze erişmesine izin vermek için Dosyaları düzenle'yi tıklayın.
Bağlantı kurulduktan sonra klasörü Çalışma Alanları sekmesinde açabilirsiniz.
Çalışma alanı sekmesinde HTML, CSS ve JavaScript dosyalarının yanında yeşil bir nokta gösterilir. Bu yeşil noktalar, Geliştirici Araçları'nın sayfanın ağ kaynakları ile klasördeki dosyalar arasında bir eşleme oluşturduğunu gösterir.
Değişiklikleri kaynak klasöre kaydetme
Bağlı çalışma alanı klasöründeki tüm CSS, HTML ve JavaScript dosyalarında yapılan değişiklikleri kaydedebilirsiniz.
CSS'deki değişiklikleri kaydetme
CSS'deki değişiklikleri kaydetmek için:
- Kaynaklar > Çalışma Alanları'nda bağlı çalışma alanı klasörünüzden bir CSS dosyası açın.
CSS'nizde değişiklik yapın.
Değişikliği kaydedin (ör. Ctrl / Cmd + S tuşlarına basarak) ve uygulanan değişikliği kaynak dosyanızda görün. Sources (Kaynaklar) panelinde, dosya adının yanında yeşil bir nokta gösterilir.
İş akışını öğrenmek için videoyu izleyin:
Değişiklikleri HTML'ye kaydetme
Değişiklikleri HTML'ye kaydetmek için:
- Kaynaklar > Çalışma Alanları'nda bağlı çalışma alanı klasörünüzden bir HTML dosyası açın.
HTML'nizde değişiklik yapın.
Değişikliği kaydedin (ör. Ctrl / Cmd + S tuşlarına basarak) ve uygulanan değişikliği kaynak dosyanızda görün. Sources (Kaynaklar) panelinde, dosya adının yanında yeşil bir nokta gösterilir.
Değişikliğin geçerli olduğunu görmek için sayfayı yeniden yükleyin.
İş akışını öğrenmek için videoyu izleyin:
HTML'yi Öğeler panelinden neden değiştiremiyorsunuz?
- Öğeler panelinde gördüğünüz düğüm ağacı, sayfanın DOM'unu temsil eder.
- Tarayıcı, bir sayfayı görüntülemek için ağ üzerinden HTML'yi getirir, HTML'yi ayrıştırır ve ardından DOM düğümlerinden oluşan bir ağaca dönüştürür.
- Sayfada JavaScript varsa bu JavaScript, DOM düğümleri ekleyebilir, silebilir veya değiştirebilir. CSS,
contentözelliğiyle DOM'u da değiştirebilir. - Tarayıcı, kullanıcılara hangi içeriği sunması gerektiğini belirlemek için DOM'u kullanır.
- Bu nedenle, kullanıcıların gördüğü sayfanın son durumu, tarayıcının getirdiği HTML'den çok farklı olabilir.
- DOM; HTML, JavaScript ve CSS'den etkilendiği için Geliştirici Araçları'nın Öğeler panelinde yapılan bir değişikliğin nereye kaydedilmesi gerektiğini belirlemesi zorlaşır.
Kısaca DOM Ağacı !== HTML.
JavaScript'teki değişiklikleri kaydetme
JavaScript'te yapılan değişiklikleri kaydetmek için:
- Kaynaklar > Çalışma Alanları'nda bağlı çalışma alanı klasörünüzden bir JavaScript dosyası açın.
JavaScript'inizde değişiklik yapın.
Değişikliği kaydedin (ör. Ctrl / Cmd + S tuşlarına basarak) ve uygulanan değişikliği kaynak dosyanızda görün. Sources (Kaynaklar) panelinde, dosya adının yanında yeşil bir nokta gösterilir.
Yerel HTTP sunucunuz canlı kaynak dosya değişikliklerini dinliyor ve sayfayı otomatik olarak yeniden yüklüyorsa değişiklikleri Geliştirici Araçları'na kaydettiğinizde uygulandığını görürsünüz. Aksi takdirde yerel sunucunuzu yeniden dağıtın.
İş akışını öğrenmek için videoyu izleyin:
Çalışma alanı klasörü bağlantısını kaldırma
Çalışma alanı klasörü bağlantısını kaldırmak için Kaynaklar > Çalışma alanı'nda klasörü sağ tıklayın, açılır menüden Çalışma alanından kaldır'ı seçin ve Kaldır'ı tıklayın.
Çalışma alanı klasörünü manuel olarak bağlama
Yerel olarak barındırılan sayfanızda Geliştirici Araçları'nı açın.
Kaynaklar > Çalışma alanı'nda Klasörü manuel olarak ekle'yi tıklayın. Ardından kaynak dosyalarınızın bulunduğu klasörü seçin.
Ardından, Çalışma alanı klasörü bağlama bölümündeki 3. ve 4. adımları uygulayın.
Sınırlamalar
Modern bir çerçeve kullanıyorsanız kaynak kodunuzu, kolayca yönetebileceğiniz bir biçimden mümkün olduğunca hızlı çalışacak şekilde optimize edilmiş bir biçime dönüştürür. Çalışma alanı klasörü bağlantısı, genellikle kaynak haritaları yardımıyla optimize edilmiş kodu orijinal kaynak kodunuzla eşleyebilir.
Geliştirici Araçları topluluğu, kaynak haritaların sağladığı özellikleri çeşitli çerçeveler ve araçlar genelinde desteklemek için çalışır. Seçtiğiniz çerçeveyle bir çalışma alanı kullanırken sorun yaşarsanız veya özel yapılandırmadan sonra çalışmasını sağlarsanız bilgilerinizi DevTools topluluğunun geri kalanıyla paylaşmak için posta listesinde bir ileti dizisi başlatın veya Stack Overflow'da soru sorun.
Sonraki adımlar
Daha önce oluşturulmuş tüm klasörleri 
Ayarlar > Çalışma Alanı bölümünden yönetebilirsiniz.
Ardından, CSS'yi değiştirmek ve JavaScript'te hata ayıklamak için Geliştirici Araçları'nı nasıl kullanacağınızı öğrenin.
Aşağıdaki kaynakları da incelemenizi öneririz:
Yerel geçersiz kılmalar, web içeriğini veya istek başlıklarını taklit etmenize olanak tanıyan, Geliştirici Araçları'ndaki benzer bir özelliktir. Bu sayede, arka ucun yetişmesini beklemeden bir sayfadaki değişiklikleri dilediğiniz gibi deneyebilirsiniz. Yerel geçersiz kılmalar sayesinde değişiklikler sayfa yüklemeleri arasında kalıcı olur ancak sayfanızın kaynak koduyla eşlenmez.