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

Kayce Basques

Sofia Emelianova

Bu eğitim, kendi projelerinizde kullanabilmeniz için bir çalışma alanı oluşturarak alıştırma yapma fırsatı sunar. 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 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ış

Workspace, Geliştirici Araçları'nda yaptığınız bir değişikliği bilgisayarınızda aynı dosyanın yerel bir kopyasına kaydetmenize olanak tanır. Örneğin:

• Sitenizin kaynak kodu masaüstünüzde bulunuyor.
• 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, Geliştirici Araçları'nda yaptığınız CSS değişiklikleri masaüstünüzdeki kaynak koduna 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 sorunlarla karşılaşırsanız veya bazı özel yapılandırmadan sonra çalışır duruma gelirseniz posta listesinde bir ileti dizisi başlatın veya bilgilerinizi Geliştirici Araçları topluluğunun geri kalanıyla paylaşmak için Stack Overflow'da soru sorun.

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

Yerel geçersiz kılmalar, Workspace'e benzeyen başka bir Geliştirici Araçları özelliğidir. Web içeriğini veya istek üstbilgilerini yerel olarak geçersiz kılmak için arka uç değişikliklerini beklemeden ya da 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

Çalışma alanıyla uygulamalı deneyim edinmek için bu eğiticiyi 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 klonladığı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, Geliştirici Araçları'nın sayfanın ağ kaynakları ile devtools-workspace-demo'deki dosyalar arasında bir eşleme oluşturduğu anlamına gelir.

2. Adım: Bir 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ığına dikkat edin.

   

2. Metin düzenleyiciyi kapatın.

3. Geliştirici Araçları'nda Öğ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 öğesinin yanında bulunan yeşil nokta , yaptığınız herhangi bir değişikliğin /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 özelliği artık favori renginize ayarlandı.

6. Sayfayı yeniden yükleyin. <h1> öğesinin rengi hâlâ en sevdiğiniz renk olarak ayarlı. 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 sunmuştur.

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

Nesne 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 üzere şimdi deneyebilirsiniz.

1. Öğeler sekmesini açın.

2. h1 öğesinin Workspaces Demo yazan metin içeriğini ç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 iş akışının neden çalışmadığı açıklanmaktadır. Nedenini ilgilenmiyorsanız bu bölümü atlayabilirsiniz.

• Öğeler panelinde gördüğünüz düğüm ağacı, sayfanın DOM'sini temsil eder.
• Tarayıcı, bir sayfayı görüntülemek için HTML'yi ağ üzerinden getirir, ayrıştırır ve ardından bunu bir DOM düğümleri ağacına dönüştürür.
• Sayfada JavaScript varsa ilgili 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ı, sonunda tarayıcı kullanıcılarına hangi içeriği sunması gerektiğini belirlemek için DOM'yi 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ğ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 paneli, JavaScript'te değişiklik yapabileceğiniz yerdir. 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çmanın bir yolu vardır.

1. Öğeler sekmesini açın.
2. Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+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. Geliştirici Araçları pencerenizin en altında 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 ediliyor.

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 italiktir.

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 klasörlerin tümü Ayarlar > Çalışma Alanı'nda listelenir.

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