Web sayfalarını düzenlemek için tarayıcı inceleme öğenizi nasıl kullanırsınız
Kitaplar, videolar, çevrimiçi kurslar ve daha fazlası olsun, birçok değerli web geliştirme kaynağı vardır. Bir tarayıcı denetim öğesi aracının nasıl kullanılacağını öğrenmek çok güçlü yeteneklerden biridir. Bu paha biçilmez bir öğrenme aracıdır – parmak uçlarınızın altındaki doğru araç ve her zaman erişilir.
Ücretsiz demoyu deneyin
Denetleme öğesi özelliğiyle, web sitesinin bölümünün nasıl çalıştığını görebilirsiniz. Yalnızca HTML, CSS ve bazen JavaScript gibi işaretleme ön uçlarını görebilmenize rağmen, bu size geliştiricilerin web siteleri nasıl oluşturduğunu tam olarak görmenin bir yolunu sunar.
Bu yazıda, Inspect öğesi aracını ve bulacağınız bazı ilgili teknolojileri, özellikleri ve işlevleri nasıl kullanacağınızı göstereceğiz. İlk olarak, size muayene elemanı aracının kendisine resmi bir giriş yapalım.
Muayene öğesi aracını Web’in ilk günlerinde tanıtarak, web sitesi kodunu görüntülemenin tek bir yolu vardır-Kaynak Bkz. Özellik.
“Kaynak bkz.” Kinsta.com.
Bu durum, basamaklı stil tabakaları (CSS) ve JavaScript bolluğumuzdan önceki günlerde yaygındır. Web geliştiricileri, içerik, tasarım ve … her şey dahil olmak üzere tüm site öğeleri için HTML kullanır.
Web gelişmeye başladıktan ve temel teknoloji arttıktan sonra, daha iyi bir araç geliştirmek gerekir. Firebug Firefox, web sitesinin performansının ve çadır altında nasıl çalıştığını öğrenmek için ilk çözümdür:
Bu durum, basamaklı stil tabakaları (CSS) ve JavaScript bolluğumuzdan önceki günlerde yaygındır. Web geliştiricileri, içerik, tasarım ve … her şey dahil olmak üzere tüm site öğeleri için HTML kullanır.
Web gelişmeye başladıktan ve temel teknoloji arttıktan sonra, daha iyi bir araç geliştirmek gerekir. Firebug Firefox, web sitesinin performansının ve çadır altında nasıl çalıştığını öğrenmek için ilk çözümdür:
Firefox ve Firebug logosu.
Bir süre sonra, işlev neredeyse tüm tarayıcılara giden yolu buldu. Bugün, bu özelliği bir inceleme öğesi aracı olarak biliyoruz:
Bir süre sonra, işlev neredeyse tüm tarayıcılara giden yolu buldu. Bugün, bu özelliği bir inceleme öğesi aracı olarak biliyoruz:
Kinsta web sitesinde öğeyi inceleyin.
Bu, web sitesinin altında yatan teknoloji ve kodu görmenin güçlü bir yoludur. Böylece, genellikle birkaç farklı yerde bulabilirsiniz – genellikle araç çubuğu menüsü, sayfada sağa tıklama ve seçenekler seçme veya bir klavye kısayolu ile bulabilirsiniz. Muayene öğesinin ana odağı HTML ve CSS sayfasında iken, orada bulunurken, onunla yapabileceğiniz daha fazla şey. Tarayıcı inceleme öğesi aracınızla, HTML’den CSS’ye herhangi bir web sitesinin nasıl çalıştığını görebilirsiniz, burada nasıl kullanılacağını öğrenin uğu Teftiş Elemanı panelinin etrafında tweet’e tıklayın
Devtools cesur.
Bu, web sitesinin altında yatan teknoloji ve kodu görmenin güçlü bir yoludur. Böylece, genellikle birkaç farklı yerde bulabilirsiniz – genellikle araç çubuğu menüsü, sayfada sağa tıklama ve seçenekler seçme veya bir klavye kısayolu ile bulabilirsiniz. Muayene öğesinin ana odağı HTML ve CSS sayfasında iken, orada bulunurken, onunla yapabileceğiniz daha fazla şey. Tarayıcı inceleme öğesi aracınızla, HTML’den CSS’ye herhangi bir web sitesinin nasıl çalıştığını görebilirsiniz, burada nasıl kullanılacağını öğrenin uğu Teftiş Elemanı panelinin etrafında tweet’e tıklayın
Devtools cesur.
Denetleme öğesi aracı, kodu görüntülemenin bir yolundan daha fazlasıdır. Genellikle erişilecek birkaç panel vardır:
Müfettiş – Buna çeşitli tarayıcıda öğeler denir. Bu, inceleme öğesi aracındaki ana ekrandır ve özel CSS öğesi ile birlikte sayfa kodunu gösterir. Ayrıca “ızgara sistemi” sitesi ve diğer yönler hakkında daha fazla ayrıntı bulacaksınız.
Konsol – Bu bir site için bir ön uç uyarı günlüğüdür ve bir fikir üzerinde hızlı bir test yapmak için kod snippet’ini de girebileceğiniz yerdir.
Ağ – Burada, tüm Post ve Get istekleri gibi sunuculara ve sunuculardan yapılan istekleri göreceksiniz.
Performans – Tabii ki, bir site gerçekleştirmeli. Bu nedenle, bazı önemli metrik siteleri ölçmenize yardımcı olacak özel araçlar vardır. Bazı tarayıcılar buradaki diğerlerinden daha iyi çalışıyor.
Bu bellek – Bu panel, bir sitenin hafızayı nasıl kullandığını görmenizi sağlar ve bir kez daha bazı tarayıcılar geniş bir metrik sunar.
Uygulama – Bu panelde, site önbelleği, arka plan hizmeti ve daha fazlası hakkında çeşitli bilgiler görebilirsiniz. Ayrıca, ekleyebileceğiniz daha fazla panel vardır:
Devtools Cesur diğer panellerin listesi.
Medya gibi basit paneller ve JavaScript Profiler ve Performans Monitörü gibi daha karmaşıktır. Kısacası, inceleme öğesinin adı çadır altındaki tüm işlevler için zararlıdır. Büyük bir güce sahiptir ve herhangi bir web geliştirici iş akışının merkezi olmalıdır. Neden İnceleme öğesinin denetim öğesini kullanmak istiyorsunuz, gelişim sırasında sahip olmanız gereken tek “çivilenmiş” çözümdür. Kalan makaleler boyunca neden teknik detayları tartışacağız. Ancak, her şeyden önce, inceleme öğesini kullanmak için motivasyonunuz hakkında konuşmak iyidir.
Müfettiş – Buna çeşitli tarayıcıda öğeler denir. Bu, inceleme öğesi aracındaki ana ekrandır ve özel CSS öğesi ile birlikte sayfa kodunu gösterir. Ayrıca “ızgara sistemi” sitesi ve diğer yönler hakkında daha fazla ayrıntı bulacaksınız.
Konsol – Bu bir site için bir ön uç uyarı günlüğüdür ve bir fikir üzerinde hızlı bir test yapmak için kod snippet’ini de girebileceğiniz yerdir.
Ağ – Burada, tüm Post ve Get istekleri gibi sunuculara ve sunuculardan yapılan istekleri göreceksiniz.
Performans – Tabii ki, bir site gerçekleştirmeli. Bu nedenle, bazı önemli metrik siteleri ölçmenize yardımcı olacak özel araçlar vardır. Bazı tarayıcılar buradaki diğerlerinden daha iyi çalışıyor.
Bu bellek – Bu panel, bir sitenin hafızayı nasıl kullandığını görmenizi sağlar ve bir kez daha bazı tarayıcılar geniş bir metrik sunar.
Uygulama – Bu panelde, site önbelleği, arka plan hizmeti ve daha fazlası hakkında çeşitli bilgiler görebilirsiniz. Ayrıca, ekleyebileceğiniz daha fazla panel vardır:
Devtools Cesur diğer panellerin listesi.
Medya gibi basit paneller ve JavaScript Profiler ve Performans Monitörü gibi daha karmaşıktır. Kısacası, inceleme öğesinin adı çadır altındaki tüm işlevler için zararlıdır. Büyük bir güce sahiptir ve herhangi bir web geliştirici iş akışının merkezi olmalıdır. Neden İnceleme öğesinin denetim öğesini kullanmak istiyorsunuz, gelişim sırasında sahip olmanız gereken tek “çivilenmiş” çözümdür. Kalan makaleler boyunca neden teknik detayları tartışacağız. Ancak, her şeyden önce, inceleme öğesini kullanmak için motivasyonunuz hakkında konuşmak iyidir.
Bu aracı kullanmak istemenizin birkaç nedeni vardır:
Sitenizde nasıl çalışacağınız konusunda ilham almak için diğer web sitelerine göz atabilirsiniz.
Diğer sitelerin veya geliştiricilerin belirli tekniklere nasıl ulaştığını öğreneceksiniz.
Bu size, sonuçsuz bir şekilde sitenizde deney yapmanız için bir lisans verir.
Çoğu denetleme öğesi araçlarında, sitede hata ayıklama fırsatı bulursunuz.
Söz konusu web sitesi hakkında daha fazla bilgi edinmek güzel.
Kısacası, web geliştirmeyi öğrenmek, iyi web sitelerinin örneklerini görmeyi ve onu neyin harekete geçirdiğini bulmayı içerir.
Denetleme Eleman Aracı, Sitede tam olarak kullanılan HTML ve CSS’yi kontrol etmenizi sağlar ve bu yönleri ve teknikleri çalışmanıza uygulamak için harika fırsatlar sunar. Tarayıcı İnceleme Elemanı Aracı Nasıl Bulunur İyi haber, inceleme öğesi aracının çok kolay olduğunu bulmaktır. Çoğu durumda, sayfaya sağ tıklayıp öğeyi inceleyin veya inceleyin öğeyi seçin: Muayene öğesi aracını seçin.
Varsayılan olarak, ayrı bir pencerede bir cihazı açar. Bu genellikle varsayılan olarak sağ tarafa. Ancak bunu isteklerinize göre ayarlayabilir ve hatta araçları pencereye çıkarabilirsiniz:
Penceredeki öğeyi inceleyin.
Sitenizde nasıl çalışacağınız konusunda ilham almak için diğer web sitelerine göz atabilirsiniz.
Diğer sitelerin veya geliştiricilerin belirli tekniklere nasıl ulaştığını öğreneceksiniz.
Bu size, sonuçsuz bir şekilde sitenizde deney yapmanız için bir lisans verir.
Çoğu denetleme öğesi araçlarında, sitede hata ayıklama fırsatı bulursunuz.
Söz konusu web sitesi hakkında daha fazla bilgi edinmek güzel.
Kısacası, web geliştirmeyi öğrenmek, iyi web sitelerinin örneklerini görmeyi ve onu neyin harekete geçirdiğini bulmayı içerir.
Denetleme Eleman Aracı, Sitede tam olarak kullanılan HTML ve CSS’yi kontrol etmenizi sağlar ve bu yönleri ve teknikleri çalışmanıza uygulamak için harika fırsatlar sunar. Tarayıcı İnceleme Elemanı Aracı Nasıl Bulunur İyi haber, inceleme öğesi aracının çok kolay olduğunu bulmaktır. Çoğu durumda, sayfaya sağ tıklayıp öğeyi inceleyin veya inceleyin öğeyi seçin: Muayene öğesi aracını seçin.
Varsayılan olarak, ayrı bir pencerede bir cihazı açar. Bu genellikle varsayılan olarak sağ tarafa. Ancak bunu isteklerinize göre ayarlayabilir ve hatta araçları pencereye çıkarabilirsiniz:
Penceredeki öğeyi inceleyin.
Tabii ki, inceleme öğesine tarayıcı araç çubuğundan veya bir klavye kısayolundan da erişebilirsiniz. Doğru konum tarayıcıya bağlı olarak değişecektir. Örneğin, Firefox’ta Araç Menüsü> Tarayıcı Araçları’nda bir web geliştiricisi bulacaksınız. Tersine, cesur (ve diğer krom tabanlı tarayıcılar) ekran menüsünde bir geliştirici seçeneği vardır> Geliştiriciler:
Cesur araç menüsü, geliştirici aracını gösterir.
Cesur araç menüsü, geliştirici aracını gösterir.
Klavye kısayolları genellikle çapraz tarayıcıya benzer: komut + shift + c (Windows için Control + Shift + C). Bu kısayol, hemen çalışmanız gereken araçları gündeme getirmeyi hızlı hale getirir.
Önceki inceleme öğesini hiç açmadıysanız, daha önce de belirttiğimiz gibi menünüzün sağ tarafında genellikle görüntülenir. Değiştirmek için inceleme öğesi aracındaki Trafik Lambası menüsünü tıklayın. Burada, görüntülenen “Doc” tarafını değiştirebilirsiniz:
Önceki inceleme öğesini hiç açmadıysanız, daha önce de belirttiğimiz gibi menünüzün sağ tarafında genellikle görüntülenir. Değiştirmek için inceleme öğesi aracındaki Trafik Lambası menüsünü tıklayın. Burada, görüntülenen “Doc” tarafını değiştirebilirsiniz:
Muayene öğesi cihazındaki “Yan Doc” seçeneği.
Firefox’un varsayılan olarak “Üç Panel” ekranını kullandığını unutmayın, bu da inceleme öğesi aracında mümkün olduğunca fazla bilgi almanıza yardımcı olur: “Üç Panel” Firefox.
Araç açık olduğuna göre, onunla neler yapabileceğinizi öğrenmek iyi bir fikir. Bunu bir sonraki tartışacağız.
Firefox’un varsayılan olarak “Üç Panel” ekranını kullandığını unutmayın, bu da inceleme öğesi aracında mümkün olduğunca fazla bilgi almanıza yardımcı olur: “Üç Panel” Firefox.
Araç açık olduğuna göre, onunla neler yapabileceğinizi öğrenmek iyi bir fikir. Bunu bir sonraki tartışacağız.
3 Muayene Elemanı aracını kullanmak için Durum Muayene elemanı aracını kullanmanın çeşitli yollarına dokunduk, ancak birkaç kullanım vakası sunmak için bundan daha ileri gidebiliriz. Bunu kısaca tartışalım. 1. Web sayfasında belirli öğeleri arayan inceleme öğesi aracının ana hedefi adında – web sitesi öğelerini kontrol etmektir. Bunu yapmak için istenen web sayfasına gidecek ve ardından bir geliştirme aracı açmak için yönteminizi seçeceksiniz. Panel açık olduktan sonra, istediğiniz unsurlar için seçmen görevi gören okları tıklayacaksınız:
Müfettiş Arrow simgesi.
Müfettiş Arrow simgesi.
Buradan, imleci sayfadaki herhangi bir öğeye yönlendirebilirsiniz ve bunu Müfettiş/Element penceresinde vurgulandığını göreceksiniz:
Geliştirme aracı panelindeki öğeleri vurgulayın.
Bu basit bir süreçtir – inceleme öğelerinin web geliştiricileri arasında çok değerli ve popüler olmasının nedenlerinden biri. 2. Hedef cihazı taklit eder, görüntüleme ve tarayıcı denetleme öğesini de bir tür cihaz emülatörü olarak işlev görür. Başka bir deyişle, web sitesinin görünümünü belirli bir cihazda görebilirsiniz. Birçok seçenek:
Geliştirme aracı panelindeki öğeleri vurgulayın.
Bu basit bir süreçtir – inceleme öğelerinin web geliştiricileri arasında çok değerli ve popüler olmasının nedenlerinden biri. 2. Hedef cihazı taklit eder, görüntüleme ve tarayıcı denetleme öğesini de bir tür cihaz emülatörü olarak işlev görür. Başka bir deyişle, web sitesinin görünümünü belirli bir cihazda görebilirsiniz. Birçok seçenek:
Görüntülenen cihazların listesi Brave’de görüntülenir.
Bu emülatör, mobil yakıtlı stratejinizin veya duyarlı tasarımınızın doğru ve işlevsel olup olmadığını değerlendirmek için çok iyi olacaktır. Bu, masanızın etrafında 200 yüzen cihaza sahip olmaktan çok değerli ve daha uygun maliyetlidir. Genellikle küçük simgelerden cihazların emülasyonuna, denetleme elemanı panelindeki bir yerde erişirsiniz: Cihazı inceleme eleman aracı ile taklit etmek.
Bu emülatör, mobil yakıtlı stratejinizin veya duyarlı tasarımınızın doğru ve işlevsel olup olmadığını değerlendirmek için çok iyi olacaktır. Bu, masanızın etrafında 200 yüzen cihaza sahip olmaktan çok değerli ve daha uygun maliyetlidir. Genellikle küçük simgelerden cihazların emülasyonuna, denetleme elemanı panelindeki bir yerde erişirsiniz: Cihazı inceleme eleman aracı ile taklit etmek.
Bu simgeyi tıklamak, seçtiğiniz cihazda gösterildiği gibi sitenizi görüntüler:
Kontrol Eleman aracından taklit edilecek cihazı seçin.
Kontrol Eleman aracından taklit edilecek cihazı seçin.
Bunu daha sonra daha ayrıntılı olarak tartışacağız, ancak bu, tasarımınızı cihaz boyunca tutarlı hale getirmenin sağlam bir yoludur. 3. ENCLEPED öğesi web sayfasının performansının sağlanması, performans paneli aracılığıyla web sitesinin hızını ve performansını değerlendirmenize yardımcı olabilir:
Performans Paneli Muayene Elemanı.
Performans Paneli Muayene Elemanı.
Bu özellik, belirli öğeleri ve komut dosyalarını yükleme süresinin “kaydedilmesi” ile çalışır. Krom tabanlı tarayıcı bu bilgileri sunarken parlak görünür. Sayfayı yüklendiğinde kaydedecek, ardından zaman çizgisi biçiminde sonuçları göreceksiniz. Bu, bir sayfanın genel düzeyde performans olup olmadığını tespit etmenin en iyi yoludur. Oradan, sitenizin performansını daha da artırmak için Google PagePeed Insights veya Deniz Feneri gibi araçları kullanmak isteyeceksiniz. Krom tabanlı tarayıcıya varsayılan bir deniz feneri raporu yapıcısı olacaktır:
Google’ın Deniz Feneri Raporu doğuştan.
Google’ın Deniz Feneri Raporu doğuştan.
Ayrıca diğer birkaç sekmede performans testinin bir özetini de görebilirsiniz. Örneğin, bir çağrı ağacı, genel özet ve olay günlüğü görebilirsiniz:
Günlük denetim öğesi olayı.
Günlük denetim öğesi olayı.
Web sitenizin performansını veya çalışmasını yargılamak için başka araçlara ihtiyacınız olmadığını hayal edebilirsiniz. Uygulamada nasıl çalıştığını öğrenmek, bir sonraki tartışacağımız bir şeydir. Kontrol Elemanı Aracını kullanarak hileler ve ipuçları Muayene elemanı aracının ilk görüşte görülenden nasıl daha güçlü olduğu hakkında konuştuk. Temel bilgilerden başlayarak özelliklerin en iyisini elde etmek için bazı hilelere ve ipuçlarına bakalım. Elementlerin, değerlerin ve durumun özelliğini değiştirerek, yalnızca sitede geçici değişiklikler yapmak için muayene öğesi araçlarını kullanma kavramına dokunuyoruz. Bunu daha ayrıntılı olarak nasıl yapacağınızı tartışalım. Bültenlere kaydolalım
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun
Adımlar doğrudan. İlk olarak, seçtiğiniz öğeleri seçmek için ok simgesini kullanın. İmleci üste yönlendirdiğinizde çeşitli bileşenleri vurgulayan bir streç göreceksiniz:
Adımlar doğrudan. İlk olarak, seçtiğiniz öğeleri seçmek için ok simgesini kullanın. İmleci üste yönlendirdiğinizde çeşitli bileşenleri vurgulayan bir streç göreceksiniz:
Denetleme öğesindeki öğeleri seçin.
İstenen öğeyi aldıktan sonra, eleman panelindeki etiketleri gördüğünüz her yere iki kez tıklayabilir ve değiştirebilirsiniz. Örneğin, Kinsta ana sayfasındaki orijinal kahramanın metnini farklı bir şeye dönüştürmek istiyoruz:
Kinsta ana sayfasındaki metni değiştirme.
CSS ile HTML ile aynı şekilde çalışabilirsiniz. Örneğin, Kinsta ana sayfasında (CTA) harekete geçecek davet düğmesini alın:
Kinsta ana sayfasındaki düğmeyi seçin.
Bir işaretçi kullanarak düğmeyi seçerseniz, ilgili CSS’yi doğru stil panelinde görebilirsiniz: inceleme öğesinin içindeki stil paneli.
İstenen öğeyi aldıktan sonra, eleman panelindeki etiketleri gördüğünüz her yere iki kez tıklayabilir ve değiştirebilirsiniz. Örneğin, Kinsta ana sayfasındaki orijinal kahramanın metnini farklı bir şeye dönüştürmek istiyoruz:
Kinsta ana sayfasındaki metni değiştirme.
CSS ile HTML ile aynı şekilde çalışabilirsiniz. Örneğin, Kinsta ana sayfasında (CTA) harekete geçecek davet düğmesini alın:
Kinsta ana sayfasındaki düğmeyi seçin.
Bir işaretçi kullanarak düğmeyi seçerseniz, ilgili CSS’yi doğru stil panelinde görebilirsiniz: inceleme öğesinin içindeki stil paneli.
HTML öğesi gibi, değeri değiştirebilir ve CSS’nizi de ekleyebilirsiniz:
Stiller panelindeki düğmenin rengini değiştirin.
Stiller panelindeki düğmenin rengini değiştirin.
Tabii ki, düğmeler gibi öğeler için çeşitli durumlarla çalışmak isteyebilirsiniz. Bu durumda, durum: Hover da değişime layıktır. Bunu yapmak için Panel stilinde Link: HOV’a tıklayın. Bunu seçmek, bir öğe durumunun bir listesini oluşturacak ve CSS durumunu görmek istediğinizi seçebilirsiniz:
Stil panelinde “Durum” seçeneğine yol açtı.
Stil panelinde “Durum” seçeneğine yol açtı.
Web sayfaları, harekete geçmeden işlerin nasıl görüldüğünü gösterecektir. Burada, Varsayılan Düğme Durumundan ayırt etmek için Hakem’in rengini değiştirdik:
Styles panelindeki kaydırma durumunun rengini değiştirin.
Styles panelindeki kaydırma durumunun rengini değiştirin.
Görüntünün URL’sini bile alabilir ve başkaları için değiştirebilirsiniz. Kinsta ana sayfasında Mykinsta kontrol panelinin ekran görüntüsünü gösteriyoruz:
Kinsta ana sayfasında Mykinsta kontrol paneli.
Kinsta ana sayfasında Mykinsta kontrol paneli.
Elementleri bularak ve görüntü kaynağının URL’sini değiştirerek, bunun yerine diğer görüntüleri test edebilirsiniz:
Bu durumda, değişiklikler birkaç dakika içinde yayınlandı (görüntü kaynağı: pixabay).
Bu durumda, değişiklikler birkaç dakika içinde yayınlandı (görüntü kaynağı: pixabay).
Beklediğiniz gibi, bu değişiklik kalıcı değildir ve hızlı sayfalarla her şeyi eskisi gibi geri yükleyebilirsiniz. Alternatif olarak, HTML ve CSS’yi editörünüze kopyalayabilir ve kalıcı olarak değişiklik yapmak için bunları kodunuza koyabilirsiniz. Elementleri bulmak, öğeleri değiştirmeden önce olabilir, bulmalısınız. Inspect Element, web sayfalarının herhangi bir yönünü bulmanıza yardımcı olabilecek doğrudan bir arama işlevine sahiptir. Bu, nerede arayacağınızı bilmiyorsanız bulmak zor. Krom tabanlı tarayıcıdaki “resmi” yolu, sayfanın sağ tarafındaki “Trafik Işıkları” menüsüne gitmek ve arama seçeneğini seçmektir: Devtools Cesur’daki “Arama” seçenekleri.
Bunu kullanmak, arama sekmesi ile birlikte bir konsol paneli açacaktır. Buradan, istediğiniz etiketi metin kutusuna yazın ve sayfadaki ilgili öğelerin bir listesini göreceksiniz:
Bunu kullanmak, arama sekmesi ile birlikte bir konsol paneli açacaktır. Buradan, istediğiniz etiketi metin kutusuna yazın ve sayfadaki ilgili öğelerin bir listesini göreceksiniz:
Yeni web siteniz için olağanüstü bir barındırma, hızlı ve güvenli mi ihtiyacınız var? Kinsta, web uzmanlarından bir flash sunucu ve 7/24 dünya standartlarında destek sağlar. Planımıza bakın
Devtools Cesur unsurları arıyor.
Devtools Cesur unsurları arıyor.
Diğer tarayıcılarda, işlevi başka bir yerde bulabileceğinizi unutmayın. Örneğin, Firefox, Müfettiş panelinin üstünde bir arama kutusu içerir:
Firefox Müfettiş Panelinde unsurları arıyor.
Firefox Müfettiş Panelinde unsurları arıyor.
İşte diğer hızlı ipuçları: Eleman panelinde sağa tıklayarak ve özyinelemeli genişlemeyi seçerek çeşitli düğümlerden ve elemanlardan özyinelemeleri genişletebilirsiniz:
Eleman panelinde özyinelemeli olarak genişletilmiş seçenekler.
Eleman panelinde özyinelemeli olarak genişletilmiş seçenekler.
Stiller panelini görürseniz, filtre metin kutusunu da görürsünüz. Bu alan, CSS özelliğine göre filtrelemenizi sağlar, bu da onu küresel arama işlevi için harika bir arkadaş haline getirir: Stiller panelindeki özelliğe göre filtre.
Genel olarak, iki özel filtre ve arama aracı ile ihtiyacınız olanı bulmak zor olmamalıdır. Kutudaki Hızlı Birincil Model, ENCLEPED öğesinin en iyi yollarından biri, CSS özelliğinin öğede nasıl hareket ettiği hakkında daha fazla bilgi edinmenize yardımcı olabilir.
Kutu Modeli.
Genel olarak, iki özel filtre ve arama aracı ile ihtiyacınız olanı bulmak zor olmamalıdır. Kutudaki Hızlı Birincil Model, ENCLEPED öğesinin en iyi yollarından biri, CSS özelliğinin öğede nasıl hareket ettiği hakkında daha fazla bilgi edinmenize yardımcı olabilir.
Kutu Modeli.
Bu özet, ekranda belirli kutuların (“öğeler” veya “div” gibi) nasıl göründüğünün bir temsili sunar. Başka bir deyişle, bu, marj, dolgu, sınır ve içeriğin ekranda gördüğünüz parçaya nasıl birleştirildiğine genel bir bakıştır. Mozilla’nın kavramın giriş ve çıkışları hakkında harika bir rehberi olmasına rağmen, CSS kutu modelini ve bu makalenin kapsamı dışındaki HTML web sayfalarıyla nasıl etkileşime girdiğini açıklayın. Genellikle Düzen bölümünde kutu model panelini bulacaksınız veya inceleme elemanı aracının sağ panelinden hesaplanacaksınız:
Muayene öğesi cihazındaki “Kutu Modeli” paneli.
Muayene öğesi cihazındaki “Kutu Modeli” paneli.
Herhangi bir öğe ve mülk gibi, belirli kutuların değerini ve ayarını da değiştirebilirsiniz. Ayrıca, kutuyu konumlandırmanıza,-Z dizinini ayarlamanıza, şamandıra ve görünüm ayarlarını uygulamanıza ve daha fazlasına yardımcı olacak başka özelliklerin bir listesi de olacaktır. Bir kutu modeliyle çalışırken, sayfada oynanan kafes sistemini görmekten de yararlanabilirsiniz. Bunu yapmak için Düzen Paneline bakın – İhtiyacınız olan seçenek ızgara menüsünün altında olacaktır: Izgara Ayarları menüsü.
İstediğiniz ekran ayarlarını tıklatıp, ardından ilgili kaplamayı seçerek ekranda görüntülenir ve site öğelerini manipüle etmek için bir kutu modeli kullanarak daha doğru bir karar vermenizi sağlar. Cihazın inceleme öğelerini kullanarak taklit edilmesi anahtar kelimeden entegre bir sözcüksel terime değişmiştir, ancak “duyarlı” ve “hücresel dostu”, web’in geliştirilmesinde anahtar faktördür. Böylece, denetleme eleman cihazı bu yönü çeşitli özelliklerle işler. Çoğu tarayıcıda, inceleme eleman aracı, üst araç boyunca bir mobil cihaz simgesi olacaktır:
İstediğiniz ekran ayarlarını tıklatıp, ardından ilgili kaplamayı seçerek ekranda görüntülenir ve site öğelerini manipüle etmek için bir kutu modeli kullanarak daha doğru bir karar vermenizi sağlar. Cihazın inceleme öğelerini kullanarak taklit edilmesi anahtar kelimeden entegre bir sözcüksel terime değişmiştir, ancak “duyarlı” ve “hücresel dostu”, web’in geliştirilmesinde anahtar faktördür. Böylece, denetleme eleman cihazı bu yönü çeşitli özelliklerle işler. Çoğu tarayıcıda, inceleme eleman aracı, üst araç boyunca bir mobil cihaz simgesi olacaktır:
Cesur içinde hücresel duyarlı görünümü yönlendirin.
Ancak Safari farklıdır. Bunun yerine, geliştirmekte olan menüde Duyarlı Tasarım Modundan bir giriş/çıkış düğmesi vardır:
Ancak Safari farklıdır. Bunun yerine, geliştirmekte olan menüde Duyarlı Tasarım Modundan bir giriş/çıkış düğmesi vardır:
Safari’de “Duyarlı Tasarım Modu Dışı” seçenekleri.
Oraya nasıl ulaştığınız dışında, seçeneği seçtikten sonra, web sayfaları daha küçük bir cihazda görüyormuş gibi görüntülenir:
Oraya nasıl ulaştığınız dışında, seçeneği seçtikten sonra, web sayfaları daha küçük bir cihazda görüyormuş gibi görüntülenir:
Firefox’ta hücresel cihaz düzeninin görüntülenmesi.
Safari size yalnızca farklı bir Apple cihazı seçimi verirken, başka bir tarayıcı, mobil birincilik prensibiyle tasarlamanız gereken araçları vermek için kazar. Örneğin, ViewPort Oryantasyonunu ve hangi cihazı kopyalamak istediğinizi seçebilirsiniz: Cesur “” Takma Cihazlar “listesi.
Safari size yalnızca farklı bir Apple cihazı seçimi verirken, başka bir tarayıcı, mobil birincilik prensibiyle tasarlamanız gereken araçları vermek için kazar. Örneğin, ViewPort Oryantasyonunu ve hangi cihazı kopyalamak istediğinizi seçebilirsiniz: Cesur “” Takma Cihazlar “listesi.
Burada iki ilginç özellik daha var. İlk olarak, taklit edilen ağ hızını seçebilirsiniz. Safari bunun için herhangi bir seçenek içermez ve krom tabanlı bir tarayıcı küçük ve genel ağ yavaşlama seçeneği sunar:
Cesur yavaşlama seçeneği.
Cesur yavaşlama seçeneği.
Firefox, seçilmeye değer bir ağ seçimi ile burada en iyisini yapıyor:
Firefox Yavaşlama seçeneği.
Firefox Yavaşlama seçeneği.
Bunu tamamlamak için dokunsal geri bildirim ve sensör tanıtımını da simüle edebilirsiniz. Bu, krom tabanlı tarayıcıda varsayılandır ve Firefox’ta bunu etkinleştirmelisiniz:
Firefox’ta dokunsal geri bildirim seçenekleri.
Firefox’ta dokunsal geri bildirim seçenekleri.
Firefox burada kaldı, çünkü krom, cesur ve diğerleri imlecinizi “parmağın ucu” gibi küçük bir streç olarak gösteriyor.
. İşlevselliği herhangi bir tarayıcı için mükemmel değildir, ancak bu, sitenizin diğer cihazlarda nasıl hareket edebileceğini belirlemenin güvenilir bir yoludur. Bu tür testler genellikle birçok web geliştiricisi için başarısız olur. Bu nedenle, tarayıcı böyle kapsamlı bir çözüm sunduğunda artık hiçbir neden yok. Klavye kısayolu Teftiş öğesi aracını kullanırken tarayıcı klavye kısayollarının çoğu genellikle tüm tarayıcılarda aynıdır. Sitenizi test etmek için çeşitli araçlar arasında geçiş yaparsanız bu iyi bir haber. İşte en popüler (ve değerli) kısayollardan bazılarının kısa bir listesi:
İnceleme öğesi aracını aç
Mac için SHIFT + C, Windows için Kontrol + Shift + C
Üst ve Alt Ok
Seçilen düğüm düşük
Sol ok
Seçilen düğümü gizleyin veya görüntüleyin
h
Aşağıdaki oklar
kaydırma + yukarı ok
CSS özelliği seçildiğinde, değeri tek tek azaltın
shift + daha düşük ok </s. 0.1
Mac için Option + Top ok, Windows için Alt + Top Ok
. İşlevselliği herhangi bir tarayıcı için mükemmel değildir, ancak bu, sitenizin diğer cihazlarda nasıl hareket edebileceğini belirlemenin güvenilir bir yoludur. Bu tür testler genellikle birçok web geliştiricisi için başarısız olur. Bu nedenle, tarayıcı böyle kapsamlı bir çözüm sunduğunda artık hiçbir neden yok. Klavye kısayolu Teftiş öğesi aracını kullanırken tarayıcı klavye kısayollarının çoğu genellikle tüm tarayıcılarda aynıdır. Sitenizi test etmek için çeşitli araçlar arasında geçiş yaparsanız bu iyi bir haber. İşte en popüler (ve değerli) kısayollardan bazılarının kısa bir listesi:
</s düğümler arasında
>
Düğüm özyinelemesini genişletin ve indirin
Seçenekler + Mac için tıklayın, Windows için Alt + Tıklayın
Özelliklerle çalışmak için düğüme taşıyın
</return </return Knot özelliğinden ileriye doğru adım atma
sekme
</s düğümün özellikleri arasında adımlar atıyor
shift + Tab
Düğümü düzenlemeyi html olarak düzenleyin ve durdurun >
f2
CSS özelliği seçildiğinde, değeri tek tek ekleyin
ok
biri
CSS özelliği seçildiğinde, on
TR>
CSS özelliği seçildiğinde, değeri 0,1
Seçenekler + MAC için daha düşük oklar, Windows için Alt + Alt Ok
Tabii ki, daha fazla kısayol var. Mozilla, Firefox için olağanüstü belgelere sahipken, Chrome, Brave, Edge ve diğerleri kısayolları paylaşıyor.
