Chrome Geliştirici Araçlarını Neden Hemen Kullanmaya Başlamalısınız?

Web sitenizi test etmenize yardımcı olacak güzel bir dizi kullanışlı araca sahip olmak geliştiriciler için çok önemlidir. Onları saklamak için en iyi yer neresi? Elbette tarayıcınızda! Google'ın popüler web tarayıcısı Chrome, doğrudan yerleşik geliştirici araçlarına sahiptir. Web yazma ve hata ayıklama için yapılmış bir dizi araç. Chrome Geliştirici Araçları (DevTools olarak bilinir), geliştiricilere web tarayıcısının ve web uygulamalarının dahili çalışmalarına erişim sağlar.

Chrome DevTools'u kullanarak kullanılan stilleri, resimlerin boyutunu, kullanılan komut dosyalarını vb. öğrenebilirsiniz. Hata ayıklayabilir ve sayfada hangi hataların olduğunu öğrenebilirsiniz. Web sitenizde ne gibi bir etkisi olduğunu görmek için stilleri açıp kapatabilir veya tamamen değiştirebilirsiniz.

Tarayıcınızda

Araçların kendilerine ulaşmak kolaydır. Bunları açmanın üç yolu:

1. Chrome tarayıcınızda – Chrome menüsünü seçin (sağ üst köşedeki üç yatay çubuk), Diğer Araçlar'ı ve ardından Geliştirici Araçları'nı seçin.
2. Herhangi bir sayfada bir öğeye sağ tıklayın ve Öğeyi İncele'yi seçin.
3. Windows'ta klavyenizde ctrl + shift + i'yi seçin. Mac'te cmnd + opt + i'yi seçin.

Bunlardan herhangi biri, tarayıcınızın altındaki DevTools penceresini açacaktır.

Birincil Pencere

Araçlar, ekranınızın altında görünür. Varsayılan görünüm olarak üst kısımda menüler ve öğeler bulunan bir birincil pencere ve varsayılan seçim olarak menüler ve stiller içeren ikincil bir pencere göreceksiniz.

Araçlar görevlere ayrılmıştır. Öğeler, Ağ, Kaynaklar, Zaman Çizelgesi, Profiller, Kaynaklar, Denetimler ve Konsolu içeren 8 grup vardır.

Elementler

Burada sayfanızın HTML yapısını görebilirsiniz. Altta HTML ve Gövde için bir geçiş var. Her biri hakkında ayrıntılı bilgi görmek için fareyi herhangi bir öğenin üzerine getirebilirsiniz.

Okunmasını kolaylaştırmak için birincil öğelerin içeriğini açıp kapatmak için oklara tıklayabilirsiniz. Böylece, gövdeyi kapatabilir ve sadece başlığı okuyabilir, görmek için başlık içindeki öğeyi seçebilirsiniz, vb. Bu, web sitenizin HTML'sini görüntülemek için mükemmel bir araçtır.

Ağ

Bu, yüklenecek her öğeyi, nasıl yüklendiklerini, dosyanın türünü, dosyanın boyutunu, yüklenmesi için geçen süreyi ve sayfa yükleme sırası içinde ne zaman yükleneceğini gösteren bir zaman çizelgesini gösterir. Bu, sayfa yüklemedeki darboğazlar ve hatalı istekler gibi ağ sorunlarını gidermek için kullanılabilir.

Örneğin, çok sayıda 404 hatası görüyorsanız, sorunların ne olduğunu görmek için daha yakından bakabilirsiniz. Hala çok fazla trafik alan bir sayfayı kapatmış olabilirsiniz veya belki birileri bir bağlantıyı yanlış yazmıştır.

Kaynaklar

Bu, yüklenecek komut dosyalarını ve parçacıkları ve bunların nereden geldiğini gösterir.

Zaman çizelgesi

Bu size her kaynağın yüklenme süresini gösterir. En çok neyin zaman aldığını görebilirsiniz, bu da sayfa yüklemenizi azaltmanıza yardımcı olur.

profiller

Bu, her öğenin bellek kullanımını gösterir. Bu, hangi kodun optimize edilmesi gerektiğini size göstermek için harikadır.

Kaynaklar

Burada yüklenen kaynakları inceleyebilirsiniz. Çerezlere, uygulama önbelleğine, HTML5 veritabanlarına vb. bakabilirsiniz.

Denetimler

Bu, sayfayı analiz etmenizi sağlar. Yüklendikten sonra veya yüklenirken denetleyebilirsiniz.

Denetim Mevcut Durumu

İlk önce, Mevcut Durumu Denetlemeyi çalıştırmayı seçtim. Bu, denetimi site şu anda oturduğunda ve tarayıcıma zaten yüklendiğinde çalıştırır.

Bana öğelerin bir listesini verir, önemlerine göre renklendirir ve sayı sayısını gösterir. Onlara tıklayarak daha fazla ayrıntı görebilirim.

Her biri hakkında ayrıntılı bilgileri görmek için birkaçını genişlettim. Bana Ağ Kullanımı ve Web Sayfası Performansı hakkında bilgi veriyor. Sorunları nasıl çözeceğim konusunda bana tavsiyeler veriyor ve benim için öncelik sırasına koyuyor.

Sayfayı Yeniden Yükle ve Yüklendiğinde Denetle

Geri döndüm ve yükte denetlemeyi seçtim. Sonuçlar benzer, ancak beklendiği gibi sayfanın yüklenmesinde, sayfa yüklendikten sonra olduğundan daha fazla sorun var.

İkisi arasında JavaScript, tarayıcı önbelleğe alma, proxy önbelleğe alma, çerez boyutu, çerezsiz bir alandan içerik sunma, görüntü boyutları, komut dosyalarının sırası ve stilleri, CSS'yi belge başlığına yerleştirme, kullanılmayan CSS riles'ı kaldırma ve normal CSS kullanma hakkında bilgi alıyorum. mülk adları. Elbette sonuçlar siteye bağlı olarak değişecektir.

Bilgiler PageSpeed ​​Insights kadar ayrıntılı değil, ancak başlamam için yeterli ve yine de kullandığım araca entegre edilmiş olmasının rahatlığını seviyorum. Sitenizde her değişiklik yaptığınızda çalıştırmanızı öneririm. Kullanmamak için kullanmak çok kolay.

Konsol

Bu, sayfaları ve uygulamaları test edebileceğiniz JavaScript Konsoludur. Komut dosyalarınızda hata ayıklayabilir ve hangi değişiklikleri yapacağınız konusunda tavsiye alabilirsiniz. Konsol, web sayfanızla etkileşim kurabilmeniz için komutlar girmenize olanak tanır. Hata ayıklamada size yardımcı olmak için tanılama bilgilerini günlüğe kaydeder. Ana ekranda veya çekmecede (ana ekranın altındaki pencere) kullanabilirsiniz.

Konsol veya Komut Satırı API'lerini kullanabilirsiniz. Konsola yazabilir, öğelerinizi biçimlendirebilir ve çıktıları biçimlendirebilir, yürütme veya yükleme zamanını ölçebilir, zaman çizelgesini görüntüleyebilir ve işaretleyebilir, ifadeleri sayabilir, kesme noktaları ayarlayabilir, ifadeleri değerlendirebilir, olayları izleyebilir, mesajları yığınlayabilir, hataları ve uyarıları görebilir ve daha pek çok şey yapabilirsiniz. daha fazla.

Bu güçlü bir araçtır, ancak onu kullanmak için çok şey var. Neyse ki, iyi bir referans materyali, nasıl kullanılacağına dair örneklerle sağlanır.

hata ayıklama

Windows'ta ctrl + p'yi veya Mac'te cmd + p'yi seçmek, hata ayıklamak için komut dosyalarını seçebileceğiniz hata ayıklama ekranını açar. Bu araç, herhangi bir programlama ortamında görmeyi beklediğiniz hata ayıklama özelliklerini sunar: duraklat, devam et, adım at, adım at, kesme noktaları, biçimlendirilmiş kod vb.

Hata ayıklama modunu kullanma konusunda size adım atmak için ayrıntılı yardım dosyaları sağlanmıştır.

CSS Stilleri Penceresi

En sağdaki kutu tüm CSS bilgilerini içerir. Bir öğeyi seçtiğinizde, sağdaki Stiller penceresi size öğenin stil bilgilerini gösterir. Bu bölüm ilginç. Beş araç grubu vardır: Stiller, Hesaplanan, Olay Dinleyicileri, DOM Kesme Noktaları ve Özellikler.

Stiller

Bu pencerede stilleri seçebilir ve manuel olarak değiştirebilirsiniz. Örneğin, yazı tipi boyutunu ve rengini seçebilirsiniz.

Yazı tipi boyutunu seçin ve kendi boyutunuzu girin. Bunu yaptığınızda seçtiğiniz yazı tipinin yazı tipi boyutu ekranda değişecektir.

Seçimi bir yazı tipi renginde yapmak renk seçiciyi açacaktır. İstediğiniz rengi seçin ve enter'a basın. Seçtiğiniz yazı tipinin yeni renge dönüştüğünü göreceksiniz. Bu, yeni yazı tipi stillerini, boyutlarını ve renklerini denemenin harika bir yoludur.

Sağdaki site.CSS'ye tıklarsanız, ayrıntılı bilgi içeren daha büyük bir pencere açacaksınız. Burada kullanmak istediğiniz yazı tipinin adını yazabilir, bir renk belirleyebilir, bir boyut belirtebilirsiniz vb.

Hesaplanmış

Bu, kutu boyutunu piksel cinsinden gösterir. Dolgu, kenarlık ve kenar boşluğu vardır.

Cihaz Modu

Büyüteç ile Elementler menüsü arasında mobil cihaza benzeyen küçük bir düğme var. Bil bakalım ne oldu? Mobil cihazdır. Bu, cihaz öykünme modudur. Bu, sitenizin ne kadar duyarlı olduğunu görmenin harika bir yoludur.

Cihaz

Sadece bir mobil cihaz olmaktan daha havalı olan şey, hangi mobil cihaz olduğunu seçebilmeniz ve ardından web sitesini o cihazdan bakıyormuş gibi görebilmenizdir. Şimdi, BU harika!

Amazon Kindle Fire HDX 7”yi seçtim ve ekran bu cihazı taklit etti, böylece sitenin ekranında nasıl görüneceğini ve dokunmanın nasıl çalışacağını görebildim.

Boyutları Değiştir düğmesine basarak ekranın yönünü değiştirebilirsiniz.

Bu, WordPress sitenizin daha küçük mobil ekranda nasıl göründüğünü görmenin harika bir yoludur. iPhone 6'yı seçtim ve ekran boyutu yeni ekran boyutuna ve çözünürlüğe uyacak şekilde değişti. Görüntülemek için birçok cihaz var. Boyutu büyütmek veya küçültmek için kenarları sürükleyerek de özel bir boyut görebilirsiniz.

Ağ

Ayrıca siteye eriştiğiniz ağ türünü seçmek için bir seçim var. Bu, çeşitli bağlantı türleri ve hızları aracılığıyla web sitenizin performansını görmenizi sağlar. 50 Kbps GPRS'den 30 Mbps WiFi'ye kadar çeşitli hızları ve birkaç 2G, 3G ve 4G bağlantı hızını test edebilirsiniz. Bu, karmaşık ağlar aracılığıyla web sitenizin hızını test etmenin ve nelerin iyileştirilebileceği konusunda fikir edinmenin mükemmel bir yoludur.

Medya sorguları

Sol üstte merdiven basamaklarına benzeyen küçük bir düğme var. Web sitesi penceresinin üzerinde, farklı piksel genişliklerini gösteren başka bir ekran bölümü açar. Onlara tıklamak, mobil ekranı o boyuta getirir. Size şunu gösteriyorlar:

• Maksimum genişliği hedefleyen sorgular
• Bir aralıktaki genişlikler
• Minimum genişliği hedefleyen sorgular

Bu, tamamen duyarlı bir tasarım için stilleri ve medya içeriğini ayarlamanıza yardımcı olur.

Çekmece

Ana ekranın altında çekmece adı verilen başka bir araç bölümü vardır. Bu ekler:

Konsol – bu, birincil penceredeki ile aynı konsoldur. Buraya yerleştirerek birincil penceredeki herhangi bir araçla birlikte kullanabilirsiniz.

Arama – kaynakları aramanıza olanak tanır.

Öykünme – Cihaz (Burada modeli, çözünürlüğü, ağı vb. seçebilirsiniz), Medya, Ağ (iş hacmi ve kullanıcı aracısı) ve Sensörler (dokunmatik ekran, ivmeölçerler vb.) seçebilirsiniz.

Oluşturma – boya dikdörtgenlerini, birleştirilmiş katman kenarlıklarını, FPS ölçeri, sürekli sayfa yeniden boyamayı ve olası kaydırma darboğazlarını gösterin.

Ayarlar ve Daha Fazlası

Sağdaki menü çubuğu size sitenizdeki hata ve uyarıların sayısını söyleyecek, alttaki çekmeceyi gizlemenize, ayarları yapmanıza ve aracı ana pencereye yerleştirmenize (arasında bölünmüş bir ekran oluşturarak) izin verecektir. web siteniz ve DevTools).

Araçları ihtiyaç duyduğunuz şekilde çalışacak şekilde değiştirebilmeniz için ayarlayabileceğiniz çok sayıda ayar vardır.

krom Kanarya

Gerçekten Google'ın Chrome DevTools'unun kanayan kenarında olmak istiyorsanız, Chrome Canary'yi deneyin. Simgesi sarıdır. Anla? Pelerine ihtiyacı var. Google'ın en yeni ve en iyisi. Geliştiriciler için tasarlanmıştır ve DevTools'un en son sürümüne sahiptir. Henüz genel kullanım için yeterince kararlı değil, bu yüzden muhtemelen sisteminizi bozacaktır.

Sisteminiz bozulduğunda ortamınıza ciddi zararlar vermeye yatkınsanız, yukarıdaki resimdeki Chrome Canary simgesine bakın ve beş saniye boyunca gözünüzü kırpmayın.

Şimdi sona geçebilirsiniz. Bu kısmı hatırlamayacaksın.

Toplama

Google Chrome'un Geliştirici Araçları, sorun giderme, ağ performansını iyileştirme, sitenizi farklı ekran boyutlarında ve çözünürlüklerde görme ve sitenizin iyileştirilmesi gereken yerler hakkında bilgi alma için harika bir araçtır. Birçok özellik var ve uzantılar aracılığıyla daha fazlasını ekleyebilirsiniz. Bu araçlar tek başına, birincil tarayıcınız olmasa bile Google Chrome'u yüklemek için harika bir nedendir. Özellikleri öğrenmek için zaman ayırmanın karşılığını alacak ve siteniz ve ziyaretçileriniz bunun için size teşekkür edecek.

Senin sıran! Chrome Geliştirici Araçları kullanıyor musunuz? En sevdiğin özelliği atladım mı? Ekleyeceğiniz bir şey var mı? Aşağıdaki yorumlarda bunu duymak isterim!

Anikei / Shutterstock.com'dan makale küçük resmi