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

Kayce Basques

Sofia Emelianova

Bu eğitim, bir çalışma alanı oluşturarak alıştırma yapma olanağı sunar. kendi projelerinizde kullanabilirsiniz. Workspace, Google Play Yardım Merkezi'nde yaptığınız değişiklikleri kaydetmenize olanak tanır. Geliştirici Araçları'nı kullanarak bilgisayarınızda depolanan kaynak koduna dönüştürebilirsiniz.

Dikkat: Bu eğitime başlamadan önce şunları nasıl yapacağınızı bilmeniz gerekir:

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

Genel Bakış

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

• Sitenizin kaynak kodu masaüstünüzde bulunuyor.
• Sitenin erişilebilir olması için kaynak kodu dizininden bir yerel web sunucusu çalıştırıyorsunuz Yer: localhost:8080.
• Google Chrome'da localhost:8080 açık ve sitenin CSS'ye dokunun.

Workspace etkinleştirildiğinde Geliştirici Araçları'nda yaptığınız CSS değişiklikleri kaynak koduna kaydedilir Google Drive'a ekleyin.

Sınırlamalar

Modern bir çerçeve kullanıyorsanız büyük olasılıkla kaynak kodunuzu gerçek boyuta sahip bir biçimden optimize edilmiş bir biçime dönüştürmenizi kolaylaştırır. Çalışma alanı genellikle optimize edilmiş kodu source'un yardımıyla orijinal kaynak kodunuzla yeniden eşleyebiliriz. Haritalar'ı tıklayın.

Geliştirici Araçları topluluğu, çeşitli çerçevelerde ve araçlarda kaynak haritalarının sağladığı özellikleri desteklemek için çalışır. Tercih ettiğiniz çerçeveye sahip bir çalışma alanını kullanırken sorunlarla karşılaşırsanız veya çalışır duruma gelirseniz Özel bir yapılandırmadan sonra posta listesinde bir ileti dizisi başlatın veya soru sorun Stack Overflow'da ziyaret edin.

İ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ğiyle taklit etmek veya arka uç değişikliklerini beklemeden üstbilgileri istemek için yerel geçersiz kılmaları kullanın. bir sayfadaki değişikliklerle deneme yapmak istiyorsanız ve bu değişiklikleri sayfanın ancak değişikliklerinizi sayfanın kaynak koduyla eşlemek sizin için önemli değildir.

1. adım: Kurulum

Çalışma alanıyla uygulamalı deneyim edinmek için bu eğiticiyi tamamlayın.

Demoyu oluşturma

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, Google Ads'i kullanmaya başlamak için SimpleHTTPServer'dir 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
   

   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. Şunları yapabileceksiniz: localhost:8000 gibi bir URL ile erişin. Tam bağlantı noktası numarası farklı olabilir.

   

Geliştirici Araçları'nı ayarlama

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

2. Kaynaklar'a gidin > Workspace'i tıklayın ve klonladığınız devtools-workspace-demo klasöründe bir çalışma alanı oluşturun. Bunu birkaç şekilde yapabilirsiniz:

   • Klasörü sürükleyip Kaynaklar'daki Düzenleyici'ye 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 Geliştirici Araçları'na dizini okuma ve yazma izni verin.

   

Çalışma Alanı sekmesinde artık index.html, script.js ve styles.css yanında yeşil bir nokta bulunuyor. 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 öğesinin color özelliğinin öğeleri fuchsia olarak ayarlandı.

   

2. Metin düzenleyiciyi kapatın.

3. Geliştirici Araçları'nda Elements 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 favoriniz olacak şekilde 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 renk.

6. Sayfayı yeniden yükleyin. <h1> öğesinin rengi hâlâ en sevdiğiniz renk olarak ayarlı. Bu komut çalışır Çünkü siz değişikliği yaptığınızda ve Geliştirici Araçları değişikliği diske kaydettiğinde Ardından, uygulamanızı yeniden sayfasında, yerel sunucunuz diskten dosyanın değiştirilmiş kopyasını 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. Şu anda onu deniyorsunuz ki neden işe yaramadığını anlamaya çalışarak zaman kaybetmeyin.

1. Elements sekmesini açın.

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

   

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

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.

• Elements 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 dönüştürür DOM düğümleri ağacına atar.
• Sayfada JavaScript varsa ilgili JavaScript, DOM düğümleri ekleyebilir, silebilir veya değiştirebilir. CSS; DOM'yi de content özelliği aracılığıyla değiştirebilirsiniz.
• 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, sayfanın görüntülendiği HTML'den çok farklı olabilir. getirildiğinden emin olun.
• Bu durum, Geliştirici Araçları'nın Elements panelinde yapılan bir değişikliğin yerini belirlemesini zorlaştırır. DOM HTML, JavaScript ve CSS'den etkilendiği için kaydedilmelidir.

Kısacası, DOM Ağacı !== HTML'si.

Kaynaklar panelinden HTML'yi değiştirme

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

1. Kaynaklar'a gidin > Sayfa.
2. (dizin) öğesini 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: Bir JavaScript değişikliğini diske kaydedin

Kaynaklar paneli, JavaScript'te değişiklik yapabileceğiniz yerdir. Ancak bazen daha etkili Değişiklik yaparken Elements paneli veya Elements paneli gibi diğer panellere erişme hale getirir. Kaynaklar panelini, diğer panellerle birlikte açmanın bir yolu vardır.

1. Elements 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 artık Hızlı Kaynak sekmesi.

   

   Sekmede index.html içeriği gösteriliyor. Bu, Kaynaklar panelinde düzenlediğiniz dosyayı. Hızlı Kaynak sekmesi, Kaynaklar panelini kullanarak 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ıp devtools-workspace-demo/script.js'yi seçin.

   

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

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

Sonraki adımlar

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

Bir çalışma alanında birden fazla klasör oluşturabilirsiniz. Bu tür klasörlerin tümü Ayarlar > Workspace'i seçin.

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.