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
- 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,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.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.
Geliştirici Araçları'nı kurma
Yerel olarak barındırılan demo sayfasında DevTools'u açın.
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.
En üstteki istemde, Geliştirici Araçları'na dizinde okuma ve yazma izni vermek için İzin ver'i tıklayın.
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.
2. Adım: CSS değişikliğini diske kaydedin
/devtools-workspace-demo/styles.css
dosyasını bir metin düzenleyicide aç.h1
öğelerinincolor
özelliğininfuchsia
olarak ayarlandığına dikkat edin.Metin düzenleyiciyi kapatın.
Geliştirici Araçları'na geri dönün ve Öğeler 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, favori kuralınıza göre değiştirin. Bu örnekte renk yeşil olarak ayarlanmıştır.
Stiller bölmesinde
styles.css:1
öğesinin 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.- DOM Ağacı'nda
/devtools-workspace-demo/styles.css
dosyasını bir metin düzenleyicide tekrar açın.color
özelliği en sevdiğiniz renge ayarlandı.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
- Öğeler sekmesini açın.
h1
öğesininWorkspaces Demo
yazan metin içeriğini çift tıklayıpI ❤️ Cake
ile değiştirin./devtools-workspace-demo/index.html
dosyasını bir metin düzenleyicide aç. 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ış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.
- Kaynaklar > Sayfa'ya gidin.
- (dizin) öğesini tıklayın. Sayfanın HTML'si açılır.
<h1>Workspaces Demo</h1>
yerine<h1>I ❤️ Cake</h1>
kullanı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: 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.
- Öğeler 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 Hızlı Kaynak sekmesi yer alır.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.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ın, ardından devtools-workspace-demo/script.js öğesini seçin.Demodaki
Edit and save files in a workspace
bağlantısına dikkat edin. Stili düzenli olarak belirlenir.Aşağıdaki kodu, Hızlı Kaynak sekmesinde script.js dosyasının altı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 > Ç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.