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.
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
- Bu demo deposunu bilgisayarınızdaki bir dizine klonlayın. Örneğin,
~/Desktop
. ~/Desktop/devtools-workspace-demo
bölgesinde yerel bir web sunucusu başlatın. Aşağıda, Google Ads'i kullanmaya başlamak içinSimpleHTTPServer
'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.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
Yerel olarak barındırılan demo sayfasında Geliştirici Araçları'nı açın.
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.
Ü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
/devtools-workspace-demo/styles.css
dosyasını bir metin düzenleyicide açın.h1
öğesinincolor
özelliğinin öğelerifuchsia
olarak ayarlandı.Metin düzenleyiciyi kapatın.
Geliştirici Araçları'nda Elements sekmesini tıklayın.
<h1>
öğesinincolor
özelliğinin değerini en sevdiğiniz renkle değiştirin. Bunu yapmak için:- DOM Ağacı'nda
<h1>
öğesini tıklayın. - 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.- DOM Ağacı'nda
/devtools-workspace-demo/styles.css
dosyasını bir metin düzenleyicide tekrar açın.color
özelliği artık favori renk.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
- Elements sekmesini açın.
h1
öğesininWorkspaces Demo
yazan metin içeriğini çift tıklayın ve değiştirinI ❤️ Cake
ile./devtools-workspace-demo/index.html
dosyasını bir metin düzenleyicide açın. Az önce yaptığınız değişiklik mevcut değil.Sayfayı yeniden yükleyin. Sayfa orijinal başlığına geri döner.
İsteğe bağlı: Neden çalışmıyor?
- 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.
- Kaynaklar'a gidin > Sayfa.
- (dizin) öğesini tıklayın. Sayfanın HTML'si açılır.
<h1>Workspaces Demo</h1>
yerine<h1>I ❤️ Cake</h1>
yazın.- Değişikliği kaydetmek için Command+S (Mac) veya Control+S (Windows, Linux, ChromeOS) tuşlarına basın.
Sayfayı yeniden yükleyin.
<h1>
öğesi hâlâ yeni metni gösteriyor./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.
- Elements sekmesini açın.
- Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basın. Komut Menüsü açılır.
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.Dosya Aç iletişim kutusunu açmak için Command+P (Mac) veya Control+P (Windows, Linux, ChromeOS) tuşlarına basın.
script
yazıp devtools-workspace-demo/script.js'yi seçin.Demodaki
Edit and save files in a workspace
bağlantısına dikkat edin. Düzenli olarak stilize ediliyor.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';
Değişikliği kaydetmek için Command+S (Mac) veya Control+S (Windows, Linux, ChromeOS) tuşlarına basın.
Sayfayı yeniden yükleyin. 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 > 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.