Çalışma alanında dosya düzenleme ve kaydetme

Kayce Basques

Sofia Emelianova

Bu eğitimde, kendi projelerinizde kullanabileceğiniz bir Workspace ayarlayarak alıştırma yapma fırsatı sunulur. Workspace, DevTools'da yaptığınız değişiklikleri bilgisayarınızda depolanan kaynak koda kaydetmenize olanak tanır.

Dikkat: Bu eğitime başlamadan önce şunları bilmeniz gerekir:

• Web sayfası oluşturmak için HTML, CSS ve JavaScript'i kullanın.
• CSS'de temel değişiklikler yapmak için Geliştirme Araçları'nı kullanın.
• Yerel bir HTTP web sunucusu çalıştırın.

Genel Bakış

Çalışma alanı, 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:

• Sitenizin kaynak kodu masaüstünüzde olmalıdır.
• Siteye localhost:8080 adresinden erişilebilmesi için kaynak kod dizininden yerel bir web sunucusu çalıştırıyorsanız.
• Google Chrome'da localhost:8080'ü açtınız ve sitenin CSS'sini değiştirmek için Geliştirici Araçları'nı kullanıyorsunuz.

Workspace etkinleştirildiğinde, DevTools'ta yaptığınız CSS değişiklikleri masaüstünüzdeki kaynak koda kaydedilir.

Sınırlamalar

Modern bir çerçeve kullanıyorsanız bu çerçeve, kaynak kodunuzu muhtemelen bakımını yapmanızı kolaylaştıran bir biçimden, mümkün olduğunca hızlı çalışacak şekilde optimize edilmiş bir biçime dönüştürür. Workspace, genellikle kaynak eşlemelerinin yardımıyla optimize edilmiş kodu orijinal kaynak kodunuzla eşleyebilir.

Geliştirici Araçları topluluğu, çeşitli çerçeve ve araçlarda kaynak haritalarının sağladığı özellikleri desteklemek için çalışır. Tercih ettiğiniz çerçeveyle bir çalışma alanını kullanırken sorunla karşılaşırsanız veya bazı özel yapılandırmalardan sonra çalışma alanını çalıştırırsanız posta listesinde bir ileti dizisi başlatın ya da Stack Overflow'da soru sorun. Böylece, bilginizi DevTools topluluğunun geri kalanıyla paylaşabilirsiniz.

İlgili özellik: Yerel Geçersiz Kılmalar

Yerel geçersiz kılma, Workspace'e benzer başka bir Geliştirici Araçları özelliğidir. Web içeriğini veya istek üstbilgilerini yerel olarak geçersiz kılarak arka uç değişikliklerini beklemeden veya bir sayfada değişiklik denemek istediğinizde ve bu değişiklikleri sayfa yüklemelerinde görmeniz gerektiğinde ancak değişikliklerinizi sayfanın kaynak koduyla eşleştirmeniz gerekmediğinde yerel geçersiz kılma işlemlerini kullanın.

1. Adım: Kurulum

Workspace ile ilgili uygulamalı deneyim kazanmak için bu eğitimi tamamlayın.

Demoyu ayarlama

1. Bu demo deposunu bilgisayarınızdaki bir dizine klonlayın. Örneğin, ~/Desktop.

2. ~/Desktop/devtools-workspace-demo'te yerel bir web sunucusu başlatın. Aşağıda, SimpleHTTPServer'ü başlatmak için bazı örnek kodlar verilmiştir ancak dilediğiniz sunucuyu kullanabilirsiniz.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   Bu eğitimdeki geri kalan kısımlarda bu dizin /devtools-workspace-demo olarak anılacaktır.

3. Google Chrome'da bir sekme açın ve sitenin yerel olarak barındırılan sürümüne gidin. localhost:8000 gibi bir URL üzerinden erişebilirsiniz. Tam bağlantı noktası numarası farklı olabilir.

   

DevTools'u ayarlama

1. Yerel olarak barındırılan demo sayfasında Geliştirici Araçları'nı açın.

2. Kaynaklar > Çalışma alanı'na gidin ve kopyaladığınız devtools-workspace-demo klasöründe bir çalışma alanı oluşturun. Bunu birkaç şekilde yapabilirsiniz:

   • Klasörü Kaynaklar'daki Düzenleyici'ye sürükleyip bırakın.
   • Klasör seç bağlantısını tıklayın ve klasörü seçin.
   • Klasör ekle'yi tıklayın ve klasörü seçin.

3. Üstteki istemde İzin ver'i tıklayarak DevTools'a dizinde okuma ve yazma izni verin.

   

Çalışma Alanı sekmesinde index.html, script.js ve styles.css öğelerinin yanında artık yeşil bir nokta var. Bu yeşil noktalar, DevTools'un sayfanın ağ kaynakları ile devtools-workspace-demo içindeki dosyalar arasında bir eşleme oluşturduğu anlamına gelir.

2. Adım: CSS değişikliğini diske kaydedin

1. /devtools-workspace-demo/styles.css dosyasını bir metin düzenleyicide açın. h1 öğelerinin color özelliğinin fuchsia olarak ayarlandığını fark edin.

   

2. Metin düzenleyiciyi kapatın.

3. Geliştirici Araçları'na geri dönüp Öğeler sekmesini tıklayın.

4. <h1> öğesinin color özelliğinin değerini en sevdiğiniz renge değiştirin. Bunu yapmak için:

   1. DOM Ağacı'nda <h1> öğesini tıklayın.
   2. Stiller bölmesinde h1 { color: fuchsia } CSS kuralını bulun ve rengi en sevdiğiniz renge değiştirin. Bu örnekte renk yeşil olarak ayarlanmıştır.

   

   Stiller bölmesinde styles.css:1'un yanındaki yeşil nokta , yaptığınız tüm değişikliklerin /devtools-workspace-demo/styles.css ile eşlendiği anlamına gelir.

5. /devtools-workspace-demo/styles.css dosyasını bir metin düzenleyicide tekrar açın. color mülkü artık en sevdiğiniz renge ayarlandı.

6. Sayfayı yeniden yükleyin. <h1> öğesinin rengi hâlâ en sevdiğiniz renge ayarlıdır. Bu, değişikliği yaptığınızda ve DevTools değişikliği diske kaydettiğinde işe yarar. Ardından sayfayı yeniden yüklediğinizde yerel sunucunuz, dosyanın değiştirilmiş kopyasını diskten sundu.

3. adım: HTML değişikliğini diske kaydedin

Öğeler panelinden HTML'yi değiştirmeyi deneyin

Uyarı: Denemek üzere olduğunuz iş akışı çalışmıyor. Daha sonra neden çalışmadığını anlamaya çalışmak için zaman kaybetmemek için şimdi deneyebilirsiniz.

1. Öğeler sekmesini açın.

2. h1 öğesinin metin içeriğini (Workspaces Demo) çift tıklayın ve I ❤️ Cake ile değiştirin.

   

3. /devtools-workspace-demo/index.html dosyasını bir metin düzenleyicide açın. Az önce yaptığınız değişiklik görünmüyor.

4. Sayfayı yeniden yükleyin. Sayfa, orijinal başlığına geri döner.

İsteğe bağlı: Neden çalışmıyor?

Not: Bu bölümde, Öğeler panelinden HTML'yi değiştirmeyi deneyin başlıklı makaledeki iş akışının neden çalışmadığı açıklanmaktadır. Nedenini öğrenmek istemiyorsanız bu bölümü atlayabilirsiniz.

• Öğ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üğümleri ağacına dönüştürür.
• Sayfada JavaScript varsa bu JavaScript, DOM düğümleri ekleyebilir, silebilir veya değiştirebilir. CSS, content özelliği aracılığıyla DOM'u da değiştirebilir.
• Tarayıcı, tarayıcı kullanıcılarına hangi içeriği sunacağını belirlemek için DOM'u kullanır.
• Bu nedenle, kullanıcıların gördüğü sayfanın nihai durumu, tarayıcının getirdiği HTML'den çok farklı olabilir.
• DOM, HTML, JavaScript ve CSS'den etkilendiğinden, Öğeler panelinde yapılan bir değişikliğin DevTools tarafından nereye kaydedileceği belirlenemez.

Kısacası, DOM ağacı !== HTML'dir.

Kaynaklar panelinden HTML'yi değiştirme

Sayfanın HTML'sinde yaptığınız bir değişikliği kaydetmek istiyorsanız bunu Kaynaklar panelinde yapın.

1. Kaynaklar > Sayfa'ya gidin.
2. (dizin)'i tıklayın. Sayfanın HTML'si açılır.
3. <h1>Workspaces Demo</h1> yerine <h1>I ❤️ Cake</h1> yazın.
4. Değişikliği kaydetmek için Command+S (Mac) veya Control+S (Windows, Linux, ChromeOS) tuşlarına basın.

5. Sayfayı yeniden yükleyin. <h1> öğesi hâlâ yeni metni gösteriyor.

   

6. /devtools-workspace-demo/index.html adlı kişiyi aç. <h1> öğesi yeni metni içerir.

4. Adım: JavaScript değişikliğini diske kaydedin

Kaynaklar panelinde JavaScript'te değişiklik de yapabilirsiniz. Ancak bazen sitenizde değişiklik yaparken Öğeler paneli veya Konsol paneli gibi diğer panellere erişmeniz gerekir. Kaynaklar panelini diğer panellerle birlikte açık tutabilirsiniz.

1. Öğeler sekmesini açın.
2. Command+Shift+P (Mac) veya Control+Shift+P (Windows, Linux, ChromeOS) tuşlarına basın. Komut menüsü açılır.

3. QS yazın ve ardından Hızlı Kaynağı Göster'i seçin. DevTools pencerenizin alt kısmında artık bir Hızlı Kaynak sekmesi bulunuyor.

   

   Sekmede, Kaynaklar panelinde düzenlediğiniz son dosya olan index.html dosyasının içeriği gösterilir. Hızlı Kaynak sekmesi, Kaynaklar panelindeki düzenleyiciyi sunar. Böylece, diğer paneller açıkken dosyaları düzenleyebilirsiniz.

4. Dosya Aç iletişim kutusunu açmak için Command+P (Mac) veya Control+P (Windows, Linux, ChromeOS) tuşlarına basın.

5. script yazın ve ardından devtools-workspace-demo/script.js dosyasını seçin.

   

6. Demodaki Edit and save files in a workspace bağlantısına dikkat edin. Düzenli olarak stilize edilir.

7. Hızlı Kaynak sekmesinde script.js dosyasının en altına aşağıdaki kodu ekleyin.

   document.querySelector('a').style = 'font-style:italic';
   

8. Değişikliği kaydetmek için Command+S (Mac) veya Control+S (Windows, Linux, ChromeOS) tuşlarına basın.

9. Sayfayı yeniden yükleyin. Sayfadaki bağlantı artık italik.

Sonraki adımlar

Başarılı: Tebrikler. Artık Geliştirici Araçları'nda yaptığınız değişiklikleri yerel olarak barındırılan web sitenize nasıl kaydedeceğinizi biliyorsunuz.

Çalışma alanında birden fazla klasör oluşturabilirsiniz. Bu tür tüm klasörler Ayarlar > Workspace bölümünde listelenir.

Ardından, CSS'yi değiştirmek ve JavaScript'de hata ayıklama için Geliştirme Araçları'nı nasıl kullanacağınızı öğrenin.