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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Bu eğitim, kendi projelerinizde kullanabileceğiniz bir çalışma alanı oluşturarak alıştırma yapma imkanı sunar. Workspace, bilgisayarınızda depolanan kaynak kodda, Geliştirici Araçları'nda yaptığınız değişiklikleri kaydetmenize olanak tanır.

Genel bakış

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

  • Sitenizin kaynak kodu masaüstünüzde.
  • Kaynak kod dizininden yerel bir web sunucusu çalıştırıyorsunuz, böylece siteye localhost:8080 adresinden erişilebiliyor.
  • Google Chrome'da localhost:8080 açık ve sitenin CSS'sini değiştirmek için Geliştirici Araçları'nı kullanıyorsunuz.

Çalışma alanı 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 yapı, büyük olasılıkla kaynak kodunuzu kolayca koruyabileceğiniz bir biçimden mümkün olduğunca hızlı çalışacak şekilde optimize edilmiş bir biçime dönüştürür. Workspace, optimize edilen kodu genellikle kaynak eşlemelerinin yardımıyla orijinal kaynak kodunuzla eşleyebilir.

DevTools topluluğu, kaynak haritaların çeşitli çerçeve ve araçlarda sağladığı özellikleri desteklemek için çalışır. Çalışma alanını istediğiniz çerçeveyle kullanırken sorun yaşarsanız veya özel bir yapılandırmadan sonra çalışmaya baş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 bir soru sorun.

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

Yerel geçersiz kılmalar, çalışma alanına benzeyen başka bir Geliştirici Araçları özelliğidir. Arka uç değişikliklerini beklemeden veya istek başlıklarını taklit etmek için yerel geçersiz kılmaları kullanın. Bir sayfada yapılan değişikliklerle deneme yapmak istediğinizde ve sayfa yüklemeleri arasında bu değişiklikleri görmeniz gerektiğinde, ancak değişiklikleri sayfanın kaynak koduyla eşlemeniz önemli değildir.

1. Adım: Kurulum

Çalışma alanını uygulamalı olarak deneyimlemek 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 bölgesinde yerel bir web sunucusu başlatın. Aşağıda, SimpleHTTPServer hizmetini başlatmak için bazı örnek kodlar verilmiştir. Dilerseniz dilediğiniz sunucuyu da 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ğiticinin geri kalanında bu dizin /devtools-workspace-demo olarak adlandırılacaktır.

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

    Yerel olarak barındırılan demo sayfası Chrome'da açıldı.

Geliştirici Araçları'nı kurma

  1. Yerel olarak barındırılan demo sayfasında DevTools'u 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.
    • Ekle. Klasör ekle'yi tıklayın ve klasörü seçin. Kaynaklar'dan Workspace'e gidin.

  3. En üstteki istemde, Geliştirici Araçları'na dizinde okuma ve yazma izni vermek için İzin ver'i tıklayın.

    İstemdeki İzin Ver düğmesi.

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

Çalışma Alanı sekmesinde artık yerel dosyalar ile ağ dosyaları arasında bir eşleme gösterilmektedir.

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

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

    Stiller.css'yi bir metin düzenleyicide görüntüleme.

  2. Metin düzenleyiciyi kapatın.

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

  4. <h1> öğesinin color özelliğinin değerini en sevdiğiniz renkle 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, favori kuralınıza göre değiştirin. Bu örnekte renk yeşil olarak ayarlanmıştır.

    h1 öğesinin renk özelliği yeşil olarak ayarlanıyor.

    Stiller bölmesinde styles.css:1 öğesinin yanındaki yeşil nokta 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 özelliği en sevdiğiniz renge ayarlandı.

  6. Yeniden yükleyin. Sayfayı yeniden yükleyin. <h1> öğesinin rengi hâlâ en sevdiğiniz renge ayarlı. Bunun nedeni, siz değişikliği yaptığınızda ve Geliştirici Araçları bu değişikliği diske kaydetmesidir. Ardından sayfayı yeniden yüklediğinizde yerel sunucunuz dosyanın diskten değiştirilmiş kopyasını sunar.

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

Nesne panelinden HTML'yi değiştirmeyi deneyin

  1. Öğeler sekmesini açın.

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

    HTML, Öğeler panelinin DOM Ağacı&#39;ndan değiştirilmeye çalışılıyor.

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

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

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

  • Öğ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 ağ üzerinden HTML'yi getirir, ayrıştırır ve ardından bir DOM düğümleri ağacına dönüştürür.
  • Sayfada JavaScript varsa bu JavaScript DOM düğümlerini ekleyebilir, silebilir veya değiştirebilir. CSS de content özelliği aracılığıyla DOM'u değiştirebilir.
  • Tarayıcı, sonunda tarayıcı kullanıcılarına hangi içeriği sunacağını belirlemek için DOM'yi kullanır.
  • Bu nedenle, sayfanın kullanıcıların gördüğü son durumu, tarayıcının getirdiği HTML'den çok farklı olabilir.
  • DOM; HTML, JavaScript ve CSS'den etkilendiğinden, bu durum Geliştirici Araçları'nın Öğeler panelinde yapılan bir değişikliğin nereye kaydedilmesi gerektiğini çözmesini zorlaştırır.

Kısaca ifade etmek gerekirse DOM Ağacı !== HTML.

HTML'yi Kaynaklar panelinden değiştirme

Sayfanın HTML'sinde yapılan bir değişikliği kaydetmek isterseniz bunu Kaynaklar panelinde yapın.

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

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

    Kaynaklar panelinden HTML değiştirme.

  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 gerekebilir. Kaynaklar panelini diğer panellerin yanında açık tutmanın bir yolu da 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, ardından Hızlı Kaynağı Göster'i seçin. Geliştirici Araçları pencerenizin alt kısmında Hızlı Kaynak sekmesi yer alır.

    Komut Menüsünden Hızlı Kaynak sekmesi açılıyor.

    Sekmede, Kaynaklar panelinde son düzenlediğiniz dosya olan index.html dosyasının içeriği görüntülenir. Hızlı Kaynak sekmesi, size 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, ardından devtools-workspace-demo/script.js öğesini seçin.

    Komut dosyası, Dosya Aç iletişim kutusuyla açılıyor.

  6. Demodaki Edit and save files in a workspace bağlantısına dikkat edin. Stili düzenli olarak belirlenir.

  7. Aşağıdaki kodu, Hızlı Kaynak sekmesinde script.js dosyasının altına 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. Yeniden yükleyin. Sayfayı yeniden yükleyin. Sayfadaki bağlantı artık italiktir.

Sayfadaki bağlantı artık italiktir.

Sonraki adımlar

Bir çalışma alanında birden fazla klasör oluşturabilirsiniz. Bu tür klasörlerin tümü Ayarlar > Çalışma Alanı'nda listelenmiştir.

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.