WordPress sitenizi geliştirmek için bir Chrome geliştiricisi nasıl kullanılır
Chrome Developer (Devtools), Google Chrome için bir dizi olağanüstü web ve hata ayıklama araçlarıdır. Devtools, web sayfaları oluşturan öğelere erişim sağlar. Düzen sorunlarını çözmek, CSS’yi görmek ve değiştirmek, JavaScript sırasında durdurma noktasını ayarlamak, optimizasyon için kodu kontrol etmek ve daha fazlasını yapmak için Devtools’u kullanabilirsiniz. Devtools ücretsizdir ve krom tarayıcınıza yüklenir. Yani, Chrome’unuz varsa, o zaman zaten var. Bu makalede, WordPress web sitenizi geliştirmek için araçların ve bunları nasıl kullanacağınız hakkında genel bir resim elde edeceğiz.
Aracı aç Bir aracı açmanın birkaç yolu vardır:
Chrome menüsünü seçin, aracı seçin, ardından Geliştiriciyi seçin.
Sağ -Ekrandaki herhangi bir öğeye tıklayın ve öğeyi inceleyin (seçim yöntemim).
Ctrl + Shift + I (PC için) | CMD + OPT + I (Mac için)
Devtools pencere alet penceresi iki panel içerir. Her ikisi de birlikte kullanılabilecek araçlar içerir. İşte aracın görünümü. Birincisi 8 araç grubu içerir. Bu araçlar şunları içerir:
Element
Ağ
Kaynak
Zaman çizelgesi
Profil
Kaynak
Denetim
Eğlendirmek
İkinci bölüm şunları içerir:
Stil
sayılmış
Olay dinleyicisi
Breakpoints DOM (Belge Nesne Modeli)
Mülk
Araçları görmenin birkaç farklı yolu vardır. Yer yapmak için pencere boyutunu değiştirebilirsiniz. Ayrıca, bir tarafta bir alet ve diğer tarafta web sitenizle ayrı bir ekran vermek için pencereyi sağ ekrana taşıyabilirsiniz.
Element Bu panel, sayfanızın HTML öğesini temsil eden ve herhangi bir öğeyi kontrol etmenizi veya düzenlemenizi sağlar. CSS ayarlamalarını gerçek zamanlı olarak görebilirsiniz. Düğüme tıklayarak (bir ok veya üçgen gibi görünen) görmeyi ve dinvigasyona daha kolay hale getirmek için panellerden birini açabilir ve küçültebilirsiniz. Dom’un hiyerarşi ekranı, orijinal HTML yerine ağaçların mevcut durumunu gösterir (örneğin, JavaScript tarafından değiştirilmiş olabilir). Fareyi hiyerarşi ekranındaki öğeye yönlendirdiğinizde, web sayfasındaki öğeler vurgulanacaktır. Bu, yazı tipi stili, görüntü boyutu vb. Gibi bilgileri görüntüler. Bir öğeyi tıklarsanız, sağdaki pencere CSS görüntülenir. Burada stili seçebilir ve yazı tipleri, renkler, boyutlar, kenar boşlukları, sınırlar, dolgu vb. Altbilgide ekmek kırıntılarını göreceksiniz, böylece gerekirse geri çekebilirsiniz. Bir öğeyi sadece tıklayarak ve değişikliğinizi yazarak düzenleyebilirsiniz. Enter tuşuna bastığınızda değişikliklerin meydana geldiğini göreceksiniz.
Örneğin, bu resmin şu anda 600 piksel genişliği var. Genişliği seçebilir ve yeni değerler yazabilirim ve Enter tuşuna basın. Görüntü hemen yeni bir boyuta değişti. Yazı tipi stilini değiştirmek için yazı tipini seçin ve sağdaki kuvvet penceresinde neyi değiştirmek istediğinizi seçin. Hatta öğeleri sürükleyebilir ve sayfanızın düzenini değiştirmek için yeni bir yere koyabilirsiniz. En son yorumları sadece Div’i sürükleyerek en son yazının üzerine taşıdım. Doğru, size bir dizi yeni özellik sunar. Çeşitli durum öğelerini görebilir, HTML olarak değiştirebilir, duraklamaları ayarlayabilir, CSS yollarını kopyalayabilir ve daha fazlasını yapabilirsiniz. Ayrıca sağ tıklayabilir ve bir düğümü silebilirsiniz. Çok kolay, bu yüzden neredeyse korkutucu. Bu aracı görüntünün boyutunu bulmak ve kod görüntülerini kontrol etmek için kullandım. Ağ paneli ağları, web sitenizden hangi kaynakların talep ettiğini ve indirildiğini gösterir. Bu gerçek zamanlı olarak açıklanmıştır. Hangi öğelerin indirilmesi en uzun zaman sürdüğünü görmek, sayfanızı optimize etmek için hangi sorunların düzeltilmesi gerektiği konusunda bilgi verir. Şelaleler gibi çeşitli görünüm ve grafik türlerini filtreleyebilir ve gösterebilirsiniz. Ağ etkinliğini kaydedebilir ve daha sonra analiz edebilmeniz için saklayabilirsiniz. Kaynak ayrıntılarını görebilirsiniz. Ayrıntılar şunları içerir: HTTP İstek ve Yanıt Başlıkları – Bu, bir istek URL’si, HTTP yöntemi, yanıt durumu kodu içerir ve HTTP yanıtlarını içerir ve değeri ve sorgu dizesi parametreleri ile istek başlıklarını içerir.
Mevcut Kaynaklar – JSON’un görüntüleri ve kaynakları için önizleme görüntüler.
Bu HTTP yanıtı biçimsiz kaynak içeriğini gösterir.
Ad ve Çerez Değeri – Bu, HTTP Kaynak İsteği ve Yanıt Başlığı’nda iletilen çerezleri gösterir ve çerezleri silme.
WebSocket Mesajı – Bu, WebSocket bağlantısı aracılığıyla gönderilen veya alınan mesajı gösterir.
Kaynak Ağ Süresi – Bu, kaynakların yüklenmesinde yer alan ağ aşamasında harcanan zaman grafiğini gösterir.
Şelalenin görüntülenmesi, her elemanın isteğin başlangıcından öğenin son baytına kadar yüklenmesi için gereken süreyi görmek için iyi bir yoldur. Hangi öğelerin en çok zaman alıcı olduğuna bakarak, ayarlamalar yapmak için nerede daha iyi anlayabilirsiniz. Ağ verilerini gelecekteki analiz için saklayabilirsiniz. Kaynak
Kodunuzu görüntülemek ve hata ayıklamak için kaynak panelini kullanabilirsiniz ve yüklenen sayfaların bir parçası olan komut dosyaları gibi komut dosyaları. İstisnalarda duraklatabilir, devam edebilir, kodu izleyebilir ve duraklatabilirsiniz. Bu, basamak, adım atabilmeniz, çıkabilmeniz ve dinlenme noktalarına geçebilmeniz için temel kodun yürütme özelliğini içerir. JavaScript, DOM güncellemesi ve ağ çağrılarına karar vermek için BreakPoint’i kullanabilirsiniz. Ayrıca, herhangi bir ifadenin doğru veya yanlış olabileceği koşullu bir kesme noktası da ayarlayabilirsiniz. Koşullar karşılanırsa, kırılma noktası kodu duraklatır.
Kodu okuması kolay hale getiren güzel bir baskı özelliği var. Bu aynı zamanda kesme noktanızı nereye yerleştireceğinizi görmenizi kolaylaştırır. Bu ihtiyacınız olduğu gibi çalışmıyorsa, kaynak haritası adı verilen JSON tabanlı bir eşleme formatı kullanabilirsiniz. Kaynak haritası, içinde bu özelliğe sahip bir madenci tarafından yapılır.
Zaman çizelgesi Zaman çizelgesi paneli, sayfa yükleme ve kullanım için zamanın nerede harcandığını gösterir. Bu, zaman çizelgesindeki her olayı boyayacak ve çizecektir. Bu, JavaScript, hesaplama stili ve yeniden boyama gibi kaynakları gösterecektir. Etkinlikleri kaydedebilir ve birkaç adımda analiz edebilirsiniz. Üç mod vardır:
Etkinlik – Türlerine göre tutulan tüm etkinliklerin listesi. Bu, hangi görevin en çok zaman alıcı olduğunu gösterir. Fırça – bu, web sitenizin her karesinde yapılması gereken işi gösterir. Örneğin, siteniz saniyede 60 kare oluşturuyorsa, 1/60 saniye içinde yapılan işleri gösterecektir. Bu, komut dosyalarını yükleme, boyama düzeni, işleme etkinlikleri vb. İçerir. Bunu, yükleme sayfalarında anormal bir etkinlik görmek için kullanabilirsiniz.
Burada yürütme süresi ve web sayfalarının ve uygulama belleğinin kullanımı profili oluşturabilirsiniz. Bu size kaynakların nerede kullanıldığını gösterir. Bu, kodunuzu optimize etmek için iyi bir araçtır. Bu üç tür profil kaydedecektir:
JavaScript CPU Profilleri Toplayın – Bu, JavaScript işlevinizin yürütülme süresini gösterir.
Yığın görüntülerini alın – Bu, JavaScript nesnenizin belleği ve dağıtımı kullanımını gösterir.
Kayıt Yığın Tahsisi – Bu, zaman içinde bellek sızıntısı göstermek için nesnenizin tahsisini kaydeder. Kaynak
Bu paneli kaynakları kontrol etmek için kullanabilirsiniz. Bu size indexedDB, SQL Web Veritabanı, Uygulama Önbelleği, Yerel Depolama ve Oturumlar ve daha fazlası hakkında bilgi gösterecektir. Yazı tipleri, resimler ve stil sayfaları gibi görsel kaynaklarınızı da kontrol edebilirsiniz.
INdexedDB sekmesi, indexedDB veritabanını ve nesne depolamasını kontrol etmenizi ve notları görüntüleyip silmenizi sağlar. SQL komutunu çalıştırabilir ve sonuçları tablo biçiminde görebilirsiniz. Komutu yazdığınızda, tablo, komut ve maddenin adı için size talimatlar verecektir. Çerez sekmesi, HTTP veya JavaScript tarafından yapılan çerezler hakkında bilgi görüntüler. Grupta tek tek veya grupta silebilirsiniz. Chrome uygulama kaynaklarını depolar. Uygulama sekmesi uygulaması, bu kaynakların durumunu görmenizi sağlar. Bu ayrıca kaynakların URL’sini, kaynak türünü ve boyutunu da gösterecektir. Yerel ve depolama paneli oturumları, anahtar çiftleri/yerel depolama değerlerini ve depolama yangınlarıyla yapılan oturumları görmenize, oluşturmanıza, silinmenize ve düzenlemenize olanak tanır. AuditPanel Denetimi, yüklendiğinde sayfaları analiz eder ve sayfa yüklemesini optimize etmek için iyileştirmeler önerir. Bilgileri iki kategoriye ayıran iki denetim vardır: ağ kullanımı ve web sayfaları performansı. Her iki denetimi hem de sadece ne istediğinizi çalıştırabilirsiniz. Geçerli sayfa durumunda bir denetim çalıştırabilir veya yüklendiğinde sayfayı yeniden yükleyebilir ve denetleyebilirsiniz. Google PagesPeed Insights kadar ayrıntılara gitmez, ancak düşük perdeli meyveleri düzeltmek için size yeterli bilgi verir. PagePeed Insights’dan geçtikten sonra, sayfam iyi bir durumdaydı, ancak bu bana sitem hakkında içgörülerin sahip olmadığı bazı bilgiler verdi. Eğlendirmek
Konsol hata ayıklama için kullanılır. Teşhis kaydedebilir, komutları girebilir, JavaScript’i değerlendirebilir, JavaScript profilleri oluşturabilir, vb. Komut satırları aracılığıyla bir konsola bilgi yazabilirsiniz. Komut satırını kullanarak, DOM’daki öğeleri seçmek ve kontrol etmek, olayları izlemek ve profilleyicileri durdurmak ve başlatmak için işlevleri kullanabilirsiniz. Cihaz Modu En sevdiğim özelliklerden biri cihaz modu. Buna menüdeki öğenin solundaki küçük bir düğme ile erişebilirsiniz. Cihaz modu, 23 farklı popüler mobil cihaz (Kindle Fire, birkaç iPhone, bazı galaksiler, dizüstü bilgisayarlar vb.) Arasından seçim yapmanıza ve web sitenizin nasıl göründüğünü ve cihaza nasıl tepki verdiğini görmenizi sağlar. Kendi özel ekran boyutunuzu oluşturmak için ekranı da sürükleyebilirsiniz. İmleç, parmak uçlarınızı taklit eder, böylece ekran bir fare ve parmağınızla tepki verir. Ayarlar ekranında kendi özel cihazınızı da oluşturabilirsiniz. Ayrıca, sitenin görünümünü ve reaksiyonunu farklı ağlar ve hızlarla analiz edebilmeniz için ağ türünü (3G, 4G, Wi-Fi, vb.) De seçebilirsiniz. Çekmece
Ekranın altında bir çekmece bulacaksınız. Bu, aracın sağ tarafında> _ düğmesi ile etkinleştirilebilir veya devre dışı bırakılabilir. Çekmece şunları içerir: Konsol konsol hatları. Bu, başka bir panel kullanırken konsolu kullanılabilir hale getirir.
Arama – Herhangi bir kaynak bulun. Büyük harfleri görmezden gelmeyi ve düzenli ifadeler aramayı seçebilirsiniz. Emülasyon – Cihaz modu için araçlar ve ayarlar. Bu, ivmeölçer ve jeolizasyon koordinatları gibi özellikleri içerir. Oluşturma – FPS metre, birleştirilmiş katmanlı sınır, vb. Oluşturma özelliklerini görüntüler. En iyi yanı, bunun tıkanıklık potansiyeli göstermesidir. Bu aletin çekmecede olması çok yararlıdır, çünkü bazı paneller bu araca erişim içermez. Chrome geliştiricisinin (Devtools) son zihni, web sitenizi geliştirmenize yardımcı olacak bir dizi olağanüstü web ve hata ayıklama araçlarıdır. Sitenizin düzenini değiştirmek, bellek sızıntısı sorunlarını çözmek, sayfa yükleme sorunlarını çözmek, neredeyse tüm mobil cihazlar ve ekran boyutlarında web sitenize bakın. Bu özet sadece bu aracın ne kadar güçlü olduğunun yüzeyini çizer. Bununla ilgili en iyi şey, Google Chrome’a yüklenmesidir, böylece hiçbir şey indirmeniz gerekmez. Senden duymak istiyorum. Chrome geliştiricisi kullanıyor musunuz? En sevdiğiniz özellikler nelerdir? En çok ne kullanıyorsun? Araçları kullanma konusunda ipuçlarınız var mı? Yorumlarda bize bundan bahsedin.
Aracı aç Bir aracı açmanın birkaç yolu vardır:
Chrome menüsünü seçin, aracı seçin, ardından Geliştiriciyi seçin.
Sağ -Ekrandaki herhangi bir öğeye tıklayın ve öğeyi inceleyin (seçim yöntemim).
Ctrl + Shift + I (PC için) | CMD + OPT + I (Mac için)
Devtools pencere alet penceresi iki panel içerir. Her ikisi de birlikte kullanılabilecek araçlar içerir. İşte aracın görünümü. Birincisi 8 araç grubu içerir. Bu araçlar şunları içerir:
Element
Ağ
Kaynak
Zaman çizelgesi
Profil
Kaynak
Denetim
Eğlendirmek
İkinci bölüm şunları içerir:
Stil
sayılmış
Olay dinleyicisi
Breakpoints DOM (Belge Nesne Modeli)
Mülk
Araçları görmenin birkaç farklı yolu vardır. Yer yapmak için pencere boyutunu değiştirebilirsiniz. Ayrıca, bir tarafta bir alet ve diğer tarafta web sitenizle ayrı bir ekran vermek için pencereyi sağ ekrana taşıyabilirsiniz.
Element Bu panel, sayfanızın HTML öğesini temsil eden ve herhangi bir öğeyi kontrol etmenizi veya düzenlemenizi sağlar. CSS ayarlamalarını gerçek zamanlı olarak görebilirsiniz. Düğüme tıklayarak (bir ok veya üçgen gibi görünen) görmeyi ve dinvigasyona daha kolay hale getirmek için panellerden birini açabilir ve küçültebilirsiniz. Dom’un hiyerarşi ekranı, orijinal HTML yerine ağaçların mevcut durumunu gösterir (örneğin, JavaScript tarafından değiştirilmiş olabilir). Fareyi hiyerarşi ekranındaki öğeye yönlendirdiğinizde, web sayfasındaki öğeler vurgulanacaktır. Bu, yazı tipi stili, görüntü boyutu vb. Gibi bilgileri görüntüler. Bir öğeyi tıklarsanız, sağdaki pencere CSS görüntülenir. Burada stili seçebilir ve yazı tipleri, renkler, boyutlar, kenar boşlukları, sınırlar, dolgu vb. Altbilgide ekmek kırıntılarını göreceksiniz, böylece gerekirse geri çekebilirsiniz. Bir öğeyi sadece tıklayarak ve değişikliğinizi yazarak düzenleyebilirsiniz. Enter tuşuna bastığınızda değişikliklerin meydana geldiğini göreceksiniz.
Örneğin, bu resmin şu anda 600 piksel genişliği var. Genişliği seçebilir ve yeni değerler yazabilirim ve Enter tuşuna basın. Görüntü hemen yeni bir boyuta değişti. Yazı tipi stilini değiştirmek için yazı tipini seçin ve sağdaki kuvvet penceresinde neyi değiştirmek istediğinizi seçin. Hatta öğeleri sürükleyebilir ve sayfanızın düzenini değiştirmek için yeni bir yere koyabilirsiniz. En son yorumları sadece Div’i sürükleyerek en son yazının üzerine taşıdım. Doğru, size bir dizi yeni özellik sunar. Çeşitli durum öğelerini görebilir, HTML olarak değiştirebilir, duraklamaları ayarlayabilir, CSS yollarını kopyalayabilir ve daha fazlasını yapabilirsiniz. Ayrıca sağ tıklayabilir ve bir düğümü silebilirsiniz. Çok kolay, bu yüzden neredeyse korkutucu. Bu aracı görüntünün boyutunu bulmak ve kod görüntülerini kontrol etmek için kullandım. Ağ paneli ağları, web sitenizden hangi kaynakların talep ettiğini ve indirildiğini gösterir. Bu gerçek zamanlı olarak açıklanmıştır. Hangi öğelerin indirilmesi en uzun zaman sürdüğünü görmek, sayfanızı optimize etmek için hangi sorunların düzeltilmesi gerektiği konusunda bilgi verir. Şelaleler gibi çeşitli görünüm ve grafik türlerini filtreleyebilir ve gösterebilirsiniz. Ağ etkinliğini kaydedebilir ve daha sonra analiz edebilmeniz için saklayabilirsiniz. Kaynak ayrıntılarını görebilirsiniz. Ayrıntılar şunları içerir: HTTP İstek ve Yanıt Başlıkları – Bu, bir istek URL’si, HTTP yöntemi, yanıt durumu kodu içerir ve HTTP yanıtlarını içerir ve değeri ve sorgu dizesi parametreleri ile istek başlıklarını içerir.
Mevcut Kaynaklar – JSON’un görüntüleri ve kaynakları için önizleme görüntüler.
Bu HTTP yanıtı biçimsiz kaynak içeriğini gösterir.
Ad ve Çerez Değeri – Bu, HTTP Kaynak İsteği ve Yanıt Başlığı’nda iletilen çerezleri gösterir ve çerezleri silme.
WebSocket Mesajı – Bu, WebSocket bağlantısı aracılığıyla gönderilen veya alınan mesajı gösterir.
Kaynak Ağ Süresi – Bu, kaynakların yüklenmesinde yer alan ağ aşamasında harcanan zaman grafiğini gösterir.
Şelalenin görüntülenmesi, her elemanın isteğin başlangıcından öğenin son baytına kadar yüklenmesi için gereken süreyi görmek için iyi bir yoldur. Hangi öğelerin en çok zaman alıcı olduğuna bakarak, ayarlamalar yapmak için nerede daha iyi anlayabilirsiniz. Ağ verilerini gelecekteki analiz için saklayabilirsiniz. Kaynak
Kodunuzu görüntülemek ve hata ayıklamak için kaynak panelini kullanabilirsiniz ve yüklenen sayfaların bir parçası olan komut dosyaları gibi komut dosyaları. İstisnalarda duraklatabilir, devam edebilir, kodu izleyebilir ve duraklatabilirsiniz. Bu, basamak, adım atabilmeniz, çıkabilmeniz ve dinlenme noktalarına geçebilmeniz için temel kodun yürütme özelliğini içerir. JavaScript, DOM güncellemesi ve ağ çağrılarına karar vermek için BreakPoint’i kullanabilirsiniz. Ayrıca, herhangi bir ifadenin doğru veya yanlış olabileceği koşullu bir kesme noktası da ayarlayabilirsiniz. Koşullar karşılanırsa, kırılma noktası kodu duraklatır.
Kodu okuması kolay hale getiren güzel bir baskı özelliği var. Bu aynı zamanda kesme noktanızı nereye yerleştireceğinizi görmenizi kolaylaştırır. Bu ihtiyacınız olduğu gibi çalışmıyorsa, kaynak haritası adı verilen JSON tabanlı bir eşleme formatı kullanabilirsiniz. Kaynak haritası, içinde bu özelliğe sahip bir madenci tarafından yapılır.
Zaman çizelgesi Zaman çizelgesi paneli, sayfa yükleme ve kullanım için zamanın nerede harcandığını gösterir. Bu, zaman çizelgesindeki her olayı boyayacak ve çizecektir. Bu, JavaScript, hesaplama stili ve yeniden boyama gibi kaynakları gösterecektir. Etkinlikleri kaydedebilir ve birkaç adımda analiz edebilirsiniz. Üç mod vardır:
Etkinlik – Türlerine göre tutulan tüm etkinliklerin listesi. Bu, hangi görevin en çok zaman alıcı olduğunu gösterir. Fırça – bu, web sitenizin her karesinde yapılması gereken işi gösterir. Örneğin, siteniz saniyede 60 kare oluşturuyorsa, 1/60 saniye içinde yapılan işleri gösterecektir. Bu, komut dosyalarını yükleme, boyama düzeni, işleme etkinlikleri vb. İçerir. Bunu, yükleme sayfalarında anormal bir etkinlik görmek için kullanabilirsiniz.
Bellek – Bu, zaman zaman hafızanızın kullanımının bir grafiğini oluşturur. Bu size bellekte depolanan tüm belgeleri, düğümleri ve olay dinleyicilerini gösterir. Bu, bellek sızıntısına neyin neden olduğunu bulmaya yardımcı olur.
ProfilBurada yürütme süresi ve web sayfalarının ve uygulama belleğinin kullanımı profili oluşturabilirsiniz. Bu size kaynakların nerede kullanıldığını gösterir. Bu, kodunuzu optimize etmek için iyi bir araçtır. Bu üç tür profil kaydedecektir:
JavaScript CPU Profilleri Toplayın – Bu, JavaScript işlevinizin yürütülme süresini gösterir.
Yığın görüntülerini alın – Bu, JavaScript nesnenizin belleği ve dağıtımı kullanımını gösterir.
Kayıt Yığın Tahsisi – Bu, zaman içinde bellek sızıntısı göstermek için nesnenizin tahsisini kaydeder. Kaynak
Bu paneli kaynakları kontrol etmek için kullanabilirsiniz. Bu size indexedDB, SQL Web Veritabanı, Uygulama Önbelleği, Yerel Depolama ve Oturumlar ve daha fazlası hakkında bilgi gösterecektir. Yazı tipleri, resimler ve stil sayfaları gibi görsel kaynaklarınızı da kontrol edebilirsiniz.
INdexedDB sekmesi, indexedDB veritabanını ve nesne depolamasını kontrol etmenizi ve notları görüntüleyip silmenizi sağlar. SQL komutunu çalıştırabilir ve sonuçları tablo biçiminde görebilirsiniz. Komutu yazdığınızda, tablo, komut ve maddenin adı için size talimatlar verecektir. Çerez sekmesi, HTTP veya JavaScript tarafından yapılan çerezler hakkında bilgi görüntüler. Grupta tek tek veya grupta silebilirsiniz. Chrome uygulama kaynaklarını depolar. Uygulama sekmesi uygulaması, bu kaynakların durumunu görmenizi sağlar. Bu ayrıca kaynakların URL’sini, kaynak türünü ve boyutunu da gösterecektir. Yerel ve depolama paneli oturumları, anahtar çiftleri/yerel depolama değerlerini ve depolama yangınlarıyla yapılan oturumları görmenize, oluşturmanıza, silinmenize ve düzenlemenize olanak tanır. AuditPanel Denetimi, yüklendiğinde sayfaları analiz eder ve sayfa yüklemesini optimize etmek için iyileştirmeler önerir. Bilgileri iki kategoriye ayıran iki denetim vardır: ağ kullanımı ve web sayfaları performansı. Her iki denetimi hem de sadece ne istediğinizi çalıştırabilirsiniz. Geçerli sayfa durumunda bir denetim çalıştırabilir veya yüklendiğinde sayfayı yeniden yükleyebilir ve denetleyebilirsiniz. Google PagesPeed Insights kadar ayrıntılara gitmez, ancak düşük perdeli meyveleri düzeltmek için size yeterli bilgi verir. PagePeed Insights’dan geçtikten sonra, sayfam iyi bir durumdaydı, ancak bu bana sitem hakkında içgörülerin sahip olmadığı bazı bilgiler verdi. Eğlendirmek
Konsol hata ayıklama için kullanılır. Teşhis kaydedebilir, komutları girebilir, JavaScript’i değerlendirebilir, JavaScript profilleri oluşturabilir, vb. Komut satırları aracılığıyla bir konsola bilgi yazabilirsiniz. Komut satırını kullanarak, DOM’daki öğeleri seçmek ve kontrol etmek, olayları izlemek ve profilleyicileri durdurmak ve başlatmak için işlevleri kullanabilirsiniz. Cihaz Modu En sevdiğim özelliklerden biri cihaz modu. Buna menüdeki öğenin solundaki küçük bir düğme ile erişebilirsiniz. Cihaz modu, 23 farklı popüler mobil cihaz (Kindle Fire, birkaç iPhone, bazı galaksiler, dizüstü bilgisayarlar vb.) Arasından seçim yapmanıza ve web sitenizin nasıl göründüğünü ve cihaza nasıl tepki verdiğini görmenizi sağlar. Kendi özel ekran boyutunuzu oluşturmak için ekranı da sürükleyebilirsiniz. İmleç, parmak uçlarınızı taklit eder, böylece ekran bir fare ve parmağınızla tepki verir. Ayarlar ekranında kendi özel cihazınızı da oluşturabilirsiniz. Ayrıca, sitenin görünümünü ve reaksiyonunu farklı ağlar ve hızlarla analiz edebilmeniz için ağ türünü (3G, 4G, Wi-Fi, vb.) De seçebilirsiniz. Çekmece
Ekranın altında bir çekmece bulacaksınız. Bu, aracın sağ tarafında> _ düğmesi ile etkinleştirilebilir veya devre dışı bırakılabilir. Çekmece şunları içerir: Konsol konsol hatları. Bu, başka bir panel kullanırken konsolu kullanılabilir hale getirir.
Arama – Herhangi bir kaynak bulun. Büyük harfleri görmezden gelmeyi ve düzenli ifadeler aramayı seçebilirsiniz. Emülasyon – Cihaz modu için araçlar ve ayarlar. Bu, ivmeölçer ve jeolizasyon koordinatları gibi özellikleri içerir. Oluşturma – FPS metre, birleştirilmiş katmanlı sınır, vb. Oluşturma özelliklerini görüntüler. En iyi yanı, bunun tıkanıklık potansiyeli göstermesidir. Bu aletin çekmecede olması çok yararlıdır, çünkü bazı paneller bu araca erişim içermez. Chrome geliştiricisinin (Devtools) son zihni, web sitenizi geliştirmenize yardımcı olacak bir dizi olağanüstü web ve hata ayıklama araçlarıdır. Sitenizin düzenini değiştirmek, bellek sızıntısı sorunlarını çözmek, sayfa yükleme sorunlarını çözmek, neredeyse tüm mobil cihazlar ve ekran boyutlarında web sitenize bakın. Bu özet sadece bu aracın ne kadar güçlü olduğunun yüzeyini çizer. Bununla ilgili en iyi şey, Google Chrome’a yüklenmesidir, böylece hiçbir şey indirmeniz gerekmez. Senden duymak istiyorum. Chrome geliştiricisi kullanıyor musunuz? En sevdiğiniz özellikler nelerdir? En çok ne kullanıyorsun? Araçları kullanma konusunda ipuçlarınız var mı? Yorumlarda bize bundan bahsedin.
