Geliştirici Olmayanlar için Google Chrome Geliştirme Araçları

Google Chrome, dünya genelindeki kullanıcıların yaklaşık% 65'iyle en çok kullanılan tarayıcılar arasındadır. Ve bunun iyi bir nedeni var, iyi çalışıyor, bir ton web özelliğini destekliyor, Google'ın sağladığı her şeyle yerel olarak bütünleşiyor ve kullanımı kolay.

Ancak kullanıcı tarafından daha fazlası var. Geliştiriciler için de çok iyi inşa edilmiştir. Firefox, kullanıcı tabanı nispeten küçük olmasına rağmen, mükemmel geliştirme deneyimi sağlayan başka bir harika tarayıcıdır. Bu nedenle, Chrome'a ​​ve onun DevTools'a odaklanıyoruz, ancak şükürler olsun ki, çoğu tarayıcı arasındaki kullanıcı arayüzü çok benzer kalıyor, bu nedenle buradaki ipuçları Firefox, Safari, Edge ve diğer tarayıcılara iyi bir şekilde çevrilecek.

Chrome DevTools Nedir?

Chrome DevTools, doğrudan Google Chrome tarayıcısında yerleşik olarak bulunan bir dizi web geliştirici aracıdır. DevTools, sayfaları anında düzenlemenize ve sorunları hızlı bir şekilde teşhis etmenize yardımcı olabilir, bu da sonuç olarak daha iyi web sitelerini daha hızlı oluşturmanıza yardımcı olur.
Chrome DevTools belgeleri ana sayfası

DevTools, çoğu ön uç (ve genellikle arka uç) geliştiricilerin bir web sayfasının nasıl performans gösterdiğini, onu tanımlayan HTML etiketlerini ve en temel biçiminde uygulanan stilleri incelemek için kullandıkları şeydir. Geliştirici olmayanlar için de genel kullanım durumunda çalıştıkları sürece göz atacağımız bir sürü başka süper yararlı özellik sağlar.

Geliştirme araçları , kodun solunda ve çeşitli özelliklerin sağında bulunan yukarıdaki ekran görüntüsünde gördüğünüz şeydir. Command + Option + C (Mac) veya Control + Shift + C (Windows, Linux, Chrome OS) tuşlarına basarsanız göreceğiniz varsayılan görünüm budur.

DevTools birçok yetenek sunar, ancak daha dikkate değer olanlar şunlar olacaktır:

• Oluşturulan belge yapısı (HTML) sayfa yüklendiğinde ve yüklenirken.
• Hangi CSS, belirli HTML öğelerine ve üst öğelerden miras alınanlara uygulanır.
  Görüntü alanı boyutunu, öğe boyutlarını, dolguları, kenar boşluklarını, sınırları ve daha fazlasını görüntüleyin.
• Çalışan komut dosyalarından başka sayfadaki her şeyi değiştirme yeteneği.
• Dışarıda, sayfayı yenilediğinizde kaydedilen kodda değişiklikler yapmak için (yine de varsayılan olarak mümkün değildir)
• Tüm değişiklikler istemci tarafındadır - yani, ne değiştirirseniz değiştirin, sayfayı yenileyene kadar yalnızca siz göreceksiniz.
• Önbelleksiz ve simüle edilmiş daha yavaş ağ hızıyla test etmek için dışarıda.
• Performansı ölçmek ve bir sayfanın performansını puanlamak için kullanılan araçlar ve bunu çözmek için ipuçları sağlar.
• Sayfanın konsolunu ve hatalarını, uyarılarını ve mesajlarını ve ayrıca javascript kodunu orada çalıştırmanın bir yolunu gösterin.

Bu çok kısa bir listedir, ancak daha dikkate değer özelliklerin bazılarını, çoğunlukla ele alacağımız şeyleri kapsar.

İlgili : İlk Chrome Uzantınızı Nasıl Oluşturabilirsiniz?

Neden DevTools'a İhtiyacınız Var, Kullanım Durumları Nelerdir?

Geliştiriciler için bu açıktır, peki ya geliştirici olmayanlar? Pekala, sizi güçlü bir kullanıcı durumuna yaklaştıracak birkaç düzgün püf noktası ve ipucu var. Genellikle site sahipleri sitedeki sorunları tespit eder, bir veya iki soru sorar ve bazen bir sorunu çözmek için "yapıştırmak" için bir kod pasajı alır. Geliştiricilerin bu tür parçacıkları test etme yollarından biri, bunları doğrudan geliştirme araçlarına uygulamaktır. Ayrıca, geliştiricilerinize işlerin nasıl görünmesini istediğiniz hakkında güzel bir önizleme sağlamanın bir yoludur.

CSS Kodu uygulayın

DevTools'un ilk ve en yaygın kullanımı, CSS'yi değiştirmek ve uygulamaktır. CSS, bir sayfanın nasıl göründüğünü tanımlayan şeydir, estetiktir. Bunu yapmak için, stil vermek istediğiniz öğeye işaret etmeniz, sağ tıklamanız ve "incele" yi seçmeniz yeterlidir.

Aynı durum diğer tarayıcıların çoğu için de geçerlidir, ancak menü öğesi metni biraz farklı olabilir. Bunu yaptıktan sonra, DevTools'un açıldığını göreceksiniz ve doğrudan ihtiyacınız olan öğeyi seçeceksiniz. Orada, geliştirme araçlarının iki ana bölümünü göreceksiniz. HTML ve CSS tarafları (sol ve sağ):

HTML bölümünde yolunuzu bulmak biraz zor olabilir, ancak endişelenmeyin, DevTools sol panelde gezindiğinizde öğeleri vurgulayacaktır. İhtiyacınız olanı bulduğunuzda, sağ tarafa stil yazabilirsiniz. Zaten birkaç tane eklenmiş. Öyleyse, nasıl göründüğünü okumak ve görmek için arka planı değiştirelim:

Siz yazarken hemen sayfadaki stiller güncellenecektir. Buraya herhangi bir CSS yazabilirsiniz ve sayfadaki stiller gibi uygulanacaktır. Kuralların sonuna yakın bir yere basarsanız ("genişlik" altında), yeni stiller eklemeye başlayacaktır. Ya da en üstte "element.style" yazan yere yazabilirsiniz. Daha sonra bunu geliştiricilerinizle paylaşmak isterseniz, kodu seçip kopyalayıp yapıştırabilirsiniz. Profesyonel ipucu, ayrıca stillerin "seçicisini" de alın. Bu, yukarıdaki ekran görüntüsündeki ".RNNXgb" dir. Bu, geliştiricilere hangi öğeye stil eklediğinizi söyleyecektir.

İlgili : WordPress CSS: Yeni Başlayanlar İçin Temel Kılavuz

Bir renk seç

Yapabileceğiniz bir başka güzel şey de, tam olarak hangi rengin kullanıldığını bulmak ve diğer renkleri görmek için doğrudan DevTools'tan bir renk seçici kullanmaktır. Renk kodunun yanındaki kareye (yukarıdaki okun işaret ettiği yer) tıklamanız yeterlidir ve bir renk seçici açılacaktır.

Hangi Yazı Tipinin Kullanıldığını Bulun

CSS geliştiricileri ayrıca kullanılan yazı tiplerini, yazı tipi boyutunu, satır yüksekliğini, rengini, yazı tipi ağırlığını ve tipografi ile ilgili diğer özellikleri tanımlar. Hepsi sağ tarafta gösterilecektir. Çapraz olmadığı sürece gördüğünüz stil uygulanır. Google formundaki arama için hangi yazı tipinin kullanıldığını bulalım. Yazı tipini görene kadar sağ tıklayın, inceleyin ve aşağı kaydırın veya yalnızca sağ bölümün üstündeki "Filtre" alanında arama yapın:

Devam edip yazı tipini güncellerseniz, sitenin farklı bir yazı tipiyle nasıl görüneceğini görürsünüz, yakında geçiş yapmak isteyebilirsiniz. Elbette, geliştiricinin daha sonra kodu değiştirmesi ve bir yazı tipi değişikliğinin yaratacağı sorunları çözmesi gerekecektir, ancak bu yöntem, herhangi bir geliştirme ortamı seti olmadan işleri hızlı bir şekilde test etmek için harika çalışıyor.

Yazı tipi olarak "Georgia" ayarlandığında Google'ın ana sayfasının nasıl görüneceği aşağıda açıklanmıştır. Bunu başarmak için birden fazla mülkü güncellememiz gerekiyordu, ancak Google geliştiricilerinin iyi CSS Mimarisi sayesinde oldukça kolaydı. Çoğu zaman, kötü yazılmış bir site, tüm sitenin güncellendiğini görmek için bir ton özelliği güncellemenizi gerektirir.

İlgili : Web Siteniz İçin En İyi Yazı Tiplerini Seçme

Önbellek, Gaz Kelebeği ve Hız

Önbellek nedir? En basit ifadeyle, makinenize gelecekte kullanım için kaydedilen bir kaynak. Bir kaynak JS, CSS dosyası veya bir resim olabilir. Bir sayfayı her açtığınızda değişmezse, her seferinde indirmenize gerek yoktur, değil mi? Böylece tarayıcı, onu bir süre makinenizde tutacaktır.

Peki sunucuda bir değişiklik olursa ve kurulum kaynakları güncellemek için en iyi uygulamaları kullanmazsa ne olur? Kısacası, geliştiriciler kod tabanını değiştirse bile, hala eski stilleri görüyorsunuz. Öyleyse, önbelleği durdurabilir ve "tam yenileme" yapabilirsiniz.

Geliştirme araçlarını açın ve "Ağ" sekmesine gidin. Ardından "önbelleği devre dışı bırak" ı tıklayın ve "tam yenileme" yapın:

Artık DevTools açıkken sayfalarda gezinirken, tarayıcınızdan önbelleğe alınmış hiçbir kaynak olmayacak. Kaynaklar her seferinde yüklendiğinden sayfalar daha yavaş yüklenecek, ancak değişiklikleri göreceksiniz. Genellikle geliştiriciler "Önbelleği Devre Dışı Bırak" seçeneğini varsayılan olarak AÇIK tutar ve yalnızca yükleme süreleri önemli olduğunda gerçek kullanıcı etkileşimlerini test ederken devre dışı bırakır.

Aynı sekmede bir kez yeniledikten sonra sayfa hızı ve ağırlığı ile ilgili ölçümleri de göreceksiniz. "Yükleme" nin ne kadar süreyle tetikleneceği (diğer komut dosyalarının daha fazla iş yapmak için eklendiği olay), kaç dosya istendiği (yukarıda 31 istek, oldukça iyi miktar), ne kadarının indirildiği vb. Çok basit, her değer için ne kadar düşükse o kadar iyidir. 100-150'den fazla istek ve büyük hız sorunları görmeye başlayacaksınız.

DevTools ayrıca yavaş bağlantı simülasyonu sağlar. Sitenizin 3G gibi daha yavaş bir ağda nasıl çalışacağını görmek için çok yararlı bir özellik. Açmak için, "Önbelleği devre dışı bırak" ın yanındaki değeri değiştirip yenile düğmesine basmanız yeterlidir. Yenilediğinizde sitenin yüklendiği her adımı göreceksiniz. Önbellek devre dışı bırakıldığında, bu normal kullanımlar için ilk ziyaret olacaktır.

"Yavaş 3G" seçeneğini seçtiğimizde hızdaki farkı görün ve gerçek bağlantı hızını kullanan ilk örneğe kıyasla yenileyin. Burada ayrıca “Çevrimdışı” nı da test edebilirsiniz - site herhangi bir internet bağlantısı olmadan nasıl çalışır? Kulağa garip geliyorsa, değil, ilerici web uygulamaları, ziyaretçiler tarafından en az bir kez erişilmişse sitelerin internet bağlantısı olmadan bile çalışmasına zaten izin veriyor.

Denetimler , bir sayfanın kullanıcı dostu hız analizini sağlayan başka bir harika özelliktir. "Denetimler" sekmelerine gidip "Rapor Oluştur" u tıklayarak basitçe çalıştırabilirsiniz:

Sağ tarafta neyin test edileceğine karar vermek için birkaç seçeneğiniz var, çünkü bazen testler biraz zaman alabilir (bir veya iki dakika), bu yüzden testleri birçok kez çalıştırırsanız, mevcut test için tam olarak neyin gerekli olduğunu seçebilirsiniz. . Aşağıda, Google'ın ana ekranı için yukarıdaki seçeneklere sahip örnek bir sonuç verilmiştir:

Harika bir puan! 94 çok iyi ve bu sayfaya yapılan harika çalışmayı sergiliyor. Yüzeyde çok basit görünebileceğini unutmayın, ancak arka planda çalışan ve gizli kalan ve siteleri yavaşlatan bir sürü komut dosyası vardır. Test edilen birçok başka ölçüm var ve bunu herhangi bir sitede, hangi sorunların olduğunu ve nelerin iyileştirilebileceğini bulmak için yapabilirsiniz.

İlgili : "Sitenizi Hızlandırmak" Gerçekten Ne Anlama Geliyor ve Buna Nasıl Ulaşılır?

DevTools Konsolu

Ele alacağımız son görünüm konsol. ESC tuşuna basarak veya "Konsol" sekmesine giderek kolayca erişilebilir. Beklendiği gibi, hiç hata yok, çok fazla sorun çıkarmaması gereken birkaç uyarı var:

Ancak, sitenizdeki son güncellemeden sonra herhangi bir nedenle etkileşimli bir bileşen (açılır menü, menü, harita, form gibi) çalışmayı durdurursa, her zaman konsola göz atabilirsiniz. Sebebinin ne olduğunu söyleyen hatalar olabilir.

İşte böyle bir hatanın nasıl görüneceğine dair bir örnek:

Hataları göstermek için hata günlükleri dokümantasyon sayfasını kullanmak biraz ironik, değil mi? Her durumda iyi bir amaca hizmet eder. Bunlar, bazı özelliklerin çalışmasını engelleyen hatalardır. Bu tür bilgileri her zaman geliştiricilerinizle paylaşabilir ve yardım isteyebilirsiniz. Sayfayla etkileşim kurduğunuzda günlükler canlı olarak yayınlanır, bu nedenle bir düğmeye tıklarsanız ve bir hata açılırsa, büyük olasılıkla arkasındaki komut dosyasında bir sorun vardır.

İlgili : İyi Bir Web Tasarımcısı Olmanın Yolu

Güvenlik uyarısı : Ne yaptığını anlamadan kodu kopyalayıp konsola yapıştırmak iyi bir fikir değildir. Özellikle güvenilmez bir kaynaktan geliyorsa ve şirketinizin dahili uygulamalarında / web sitelerinde kullanılıyorsa. Facebook bu nedenle konsollarında bir uyarı yayınladı:

Özet

DevTools, hem geliştiricilere hem de site sahiplerine yardımcı olan harika bir araçtır. Bir sayfayı ince ayarlamanız ve değiştirmeniz için ihtiyacınız olan her şeyi size verir. Bu sayede CSS'yi değiştirebilir, HTML'yi değiştirebilir, sayfadaki öğeleri silebilir ve yeniden düzenleyebilir, hız raporlarını ve bildirilen hataları görebilirsiniz.

Site sahipleri, geliştiricilere, anlaşılması daha kolay metin paragrafları yazmaktan daha kolay olabilecek fikirleri ve ihtiyaçları hakkındaki örnekleri sergilemek için kullanabilir. Temel özelliklerle ilgili bazı CSS bilgileriyle, ihtiyaçlarınızı çok daha açıklayıcı hale getirebilirsiniz, bu da yeni değişikliklere harcanan zamanı büyük ölçüde azaltacaktır.

Kullanılmayı bekleyen tonlarca başka özellik var, keşfetmekten korkmayın!