Öğeyi İncele: Herhangi Bir Web Sayfasını Geçici Olarak Düzenleme

Tarayıcınızda gizlenen güçlü bir araç var: Inspect Element .

Daha kaynak kodunu kendi çizgisini oluşturan görüntü ve CSS, kullandığı yazı tipleri ve simgeleri, JavaScript kodunu güç veren animasyonlar ve: Herhangi bir web sayfasında sağ tıklayın inceleyin tıklayın ve söz konusu site bağırsaklar göreceksiniz . Sitenin yüklenmesinin ne kadar sürdüğünü, indirmek için ne kadar bant genişliği kullandığını ve metnindeki tam rengi görebilirsiniz.

Veya sayfada istediğiniz herhangi bir şeyi değiştirmek için kullanabilirsiniz.

Inspect Element, web'i neyin harekete geçirdiğini öğrenmenin, sitelerinizde nelerin bozulduğunu bulmanın, bir renk ve yazı tipi değişikliğinin nasıl görüneceğini taklit etmenin ve ekran görüntülerinde Photoshop'a özel ayrıntıları vermek zorunda kalmamanın mükemmel bir yoludur. Tarayıcınızın sahip olduğunu asla bilmediğiniz bir süper güç.

İster bir geliştirici olun, ister bir satır kod yazmamış bir pazarlamacı olun, işinize yardımcı olması için Google Chrome Inspect Element'i nasıl kullanacağınızı öğrenelim. Bunu telefonunuzda okuyorsanız, dizüstü bilgisayarınıza geçme, Google Chrome'u açma ve bazı kodlarda ince ayar yapmaya hazırlanma zamanı.

Bekle, Neden Inspect Element Kullanmalıyım?

Meraktan bir web sitesinin koduna hiç bakmadıysanız, Inspect Element'i nasıl kullanacağınızı neden öğrenmeniz gerektiğini merak edebilirsiniz.

• Tasarımcı : Bir site tasarımının mobil cihazlarda nasıl görüneceğini önizlemek ister misiniz? Veya bir kayıt düğmesinde farklı bir yeşil tonunun nasıl görüneceğini görmek ister misiniz? Inspect Element ile her ikisini de saniyeler içinde yapabilirsiniz.

• Pazarlamacı : Rakiplerin site başlıklarında hangi anahtar kelimeleri kullandığını merak ediyor veya sitenizin Google'ın PageSpeed ​​testi için çok yavaş yüklenip yüklenmediğini mi görmek istiyorsunuz? Inspect Element her ikisini de gösterebilir.

• Yazar : Ekran görüntülerinde adınızı ve e-postanızı bulanıklaştırmaktan bıktınız mı? Inspect Element ile bir web sayfasındaki herhangi bir metni bir saniyede değiştirebilirsiniz.

• Destek Temsilcisi : Geliştiricilere bir sitede neyin düzeltilmesi gerektiğini söylemenin daha iyi bir yoluna mı ihtiyacınız var? Inspect Element, neden bahsettiğinizi göstermek için hızlı bir örnek değişiklik yapmanızı sağlar.

Bunlar ve düzinelerce başka kullanım durumu için Inspect Element, etrafta dolaşmak için kullanışlı bir araçtır. Tarayıcınızdaki Geliştirici Araçlarının bir parçasıdır ve bir dizi ekstra özellik içerir: kodu çalıştırmak için bir konsol, bir sitenin arkasındaki ham kodu görmek için bir Kaynağı Görüntüle sayfası, bir siteye yüklenen her dosyanın listesini içeren bir Kaynaklar sayfası. web sitesi ve daha fazlası. Tüm bunları kendi başınıza keşfedebilirsiniz, ancak şimdilik, bir web sayfasını kendi başımıza değiştirmek için ana Öğeler sekmesini nasıl kullanacağımızı görelim.

Inspect Element'e Nasıl Başlanır?

Google Chrome Inspect Element'e erişmenin birkaç yolu vardır. Düzenlemeyi denemek istediğiniz bir web sitesini açın (bu öğreticiyle birlikte Zapier.com'u açın), ardından Inspect Element araçlarını aşağıdaki üç yoldan biriyle açın:

• Web sayfasında herhangi bir yere sağ tıklayın ve açılan menünün en altında " İncele " öğesini göreceksiniz. Bunu tıklayın.

• Google Chrome araç çubuğunuzun en sağındaki hamburger menüsünü (3 yığılmış noktalı simge) tıklayın, Diğer Araçlar 'ı tıklayın, ardından Geliştirici Araçları ' nı seçin. Alternatif olarak, dosya menüsünde Görünüm —> Geliştirici —> Geliştirici Araçları'nı tıklayın.

• Klavye kısayollarını mı tercih ediyorsunuz? Hiçbir şeye tıklamadan Inspect Elements'i açmak için Mac'te CMD + Option + I veya PC'de F12 tuşlarına basın.

Varsayılan olarak, Geliştirici Araçları tarayıcınızın en altındaki bir bölmede açılır ve Öğeler sekmesini gösterir; bu, aradığımız ünlü Öğe İnceleme aracıdır.

Ekranınızın alt kısmındaki Inspect Element ile çalışmak için fazla alanınız olmayacak, bu nedenle denetleme öğesi bölmesinin sağ üst tarafındaki "X" (kapatmak için tıklayacağınız) yakınındaki üç dikey noktayı tıklayın. bölme). Şimdi, bölmeyi tarayıcınızın sağ tarafına taşıma (sağ yuva görünümü) veya bölmeyi tamamen ayrı bir pencerede açma (çıkarma görünümü) seçeneğini göreceksiniz.

Bu eğitimde, bize daha fazla çalışma alanı sağlamak için tarayıcı pencerenizin sağ tarafındaki bölmeyi yerleştirelim. Fareyi sol kenarlığın üzerine getirerek Geliştirici Araçları panelini daha geniş veya daha dar yapabilirsiniz. Bir kere imleç göründüğünde, genişletmek için bölmeyi sola veya daraltmak için sağa sürükleyin.

Artık Inspect Element'te olduğumuza göre, herhangi bir sitenin tam olarak istediğimiz gibi görünmesini sağlamak için kullanabileceğimiz bir dizi faydalı araç parmaklarımızın ucunda. Bu eğitim için Öğeler, Öykünme ve Arama sekmelerine odaklanacağız.

Arama

"Ara" sekmesi, belirli bir içerik veya bir HTML öğesi için bir web sayfasında arama yapmanızı sağlar. Biraz gizli: 3 noktayı tıklamanız ve ardından ortaya çıkarmak için Tüm Dosyaları Ara'yı tıklamanız gerekecek. Ardından, istediğiniz herhangi bir şey için bir web sayfasındaki her dosyayı arayabileceksiniz.

Elementler

"Öğeyi Denetle", bu eğitimde en çok keşfedeceğimiz araçtır ve çoğu tarayıcıda Geliştirici Araçlarını başlattığınızda ilk olarak bu araç açılır. Veya başka bir yerde araştırıyorsanız geri dönmek için Geliştirici Araçları'ndaki "Öğeler" sekmesini tıklayın.

Keşfet sekmesinde, bir web sitesi oluşturan tüm HTML, JavaScript ve CSS'yi görebilirsiniz. Bu, bir web sitesinin kaynağını görüntülemekle hemen hemen aynıdır, önemli bir farkla: herhangi bir kodu değiştirebilir ve açtığınız sitedeki değişiklikleri gerçek zamanlı olarak görebilirsiniz. Kopyadan yazı tipine kadar her şeyi değiştirebilir, ardından yeni tasarımın ekran görüntüsünü alabilir veya değişikliklerinizi kaydedebilirsiniz ( Görünüm > Geliştirici > Kaynağı Görüntüle'ye gidin ve sayfayı bir HTML dosyası olarak kaydedin veya kod değişikliklerini metin düzenleyicinize kopyalayın). Sayfayı yeniden yüklediğinizde, tüm değişiklikleriniz sonsuza kadar ortadan kalkacaktır.

öykünme

Hiç telefonunuzu cebinizden çıkarmadan bir telefonda bir web sayfasının önizlemesini yapmak istediniz mi? "Emülasyon" sekmesi, popüler cihazlar için ön ayarlar veya ekran çözünürlüğünü ve en boy oranını ayarlama seçeneği ile bir web sayfasını herhangi bir cihazda göründüğü gibi görüntülemenizi sağlar. Bir sitenin çevirmeli ağ üzerinden ne kadar hızlı yükleneceğini görmek için öykünülmüş bir internet hızı bile ayarlayabilirsiniz.

Ayrıca biraz gizli: Inspect Element'i açmanız ve başlatmak için telefon simgesi düğmesini tıklamanız gerekecek. Ardından, başkalarının bir web sayfasını nasıl deneyimlediğini anlamak için mükemmel bir araca sahip olacaksınız.

İşe gitme zamanı. Önce bir web sayfasında bir şeyler bulmak için Arama'yı kullanacağız, ardından bir sitedeki metni ve daha fazlasını düzenlemek için Öğeler'i kullanacağız ve son olarak, sitemizin belirli bir konumdan bir telefonda nasıl görüneceğini görmek için Öykünmeyi kullanacağız.

Inspect Element Search ile Sitede Her Şeyi Bulun

En sevdiğiniz sitelere nelerin girdiğini mi merak ediyorsunuz? Arama, bir sitenin tüm kaynak kodunu okumanın yanı sıra bunun için en iyi aracınızdır. Varsayılan Öğeler görünümünü açabilir, CTRL + F veya CMD + F tuşlarına basabilir ve kaynak kodunda arama yapabilirsiniz, ancak tam Arama aracı, bir sayfadaki her dosyada arama yapmanıza izin vererek CSS ve JavaScript dosyalarında metin bulmanıza yardımcı olur veya bir makale için ihtiyacınız olan bir simge görüntüsünü bulun.

Başlamak için, henüz yapmadıysanız Chrome'da Zapier.com'u açın, ardından Öğeyi İncele'yi açın, Geliştirici Araçları bölmesinin sağ üst köşesindeki 3 dikey noktayı tıklayın (kapanış "X"in yanında) ve " Tüm Dosyaları Ara." Arama sekmesi, Geliştirici Araçları bölmesinin alt yarısında görünecektir.

Arama alanına, bu web sayfasında bulmak istediğiniz herhangi bir şeyi ( HİÇBİR ŞEY) yazabilirsiniz ve bu, bu bölmede görünecektir. Bunu nasıl kullanabileceğimizi görelim.

Arama alanına meta name yazın , Enter tuşuna basın ve bu sayfadaki kodda her "meta adı" oluşumunu hemen göreceksiniz. Artık bu sayfanın meta verilerini, hedeflediği SEO anahtar kelimelerini ve Google'ın arama için dizine eklemesine izin verecek şekilde yapılandırılıp yapılandırılmadığını görebilirsiniz. Bu, rakiplerinizin neyi hedeflediğini görmenin ve sitenizde hiçbir şeyi mahvetmediğinizden emin olmanın kolay bir yoludur.

Başka bir sorgu deneyelim. meta name silin, bunun yerine arama alanına h2 yazın ve "enter" tuşuna basın. Zapier'in JavaScript dosyalarındaki her "h2" oluşumunu en üstte göreceksiniz, ancak bir kez aşağı kaydırdığınızda, bu sayfadaki her "h2" başlığını görebilirsiniz.

Arama, renge göre de arama yapabileceğiniz için tasarımcılar için de etkili bir araçtır. Arama alanına #ff4a00 ve "enter" tuşuna basın (ve tüm sonuçları görmek için "Büyük/küçük harf yoksay" seçeneğinin yanındaki kutuyu işaretlediğinizden emin olun). Artık bu sitenin CSS ve HTML dosyalarında Zapier'in turuncu tonu olan #ff4a00 rengini her zaman görmelisiniz. Ardından, "color: #ff4a00;" yazan satırı tıklamanız yeterlidir. sitenin HTML'sindeki o satıra atlamak ve onu kendi başınıza değiştirmek için (bir sonraki bölümde inceleyeceğimiz bir şey).

Bu, tasarımcıların bir sitenin markalarının stil kılavuzunu izlediğinden emin olmaları için kullanışlı bir yoldur. Tasarımcılar, "Arama" aracıyla, bir rengin yanlış öğeye uygulanıp uygulanmadığını, bir web sayfasında yanlış bir font ailesi kullanılıp kullanılmadığını veya hâlâ sitenizde bir yerde eski renk.

"Arama" aracı aynı zamanda geliştiricilerle daha iyi iletişim kurmanın mükemmel bir yoludur çünkü onlara tam olarak nerede hata bulduğunuzu veya tam olarak neyin değişmesi gerektiğini gösterebilirsiniz. Onlara sorunun bulunduğu satır numarasını söylemeniz yeterlidir, düzeltmenizi çok daha hızlı alırsınız.

Veya Chrome'un Geliştirici Araçları'nın temel parçası olan Elements ile web sayfasını kendiniz değiştirebilirsiniz.

Öğelerle Her Şeyi Değiştirin

Ön uç geliştiriciler, bir web sayfasının görünümünü değiştirmek ve yeni fikirlerle denemeler yapmak için Öğeyi İncele aracını her gün kullanır; siz de yapabilirsiniz. Inspect Elements, sitenin CSS ve HTML dosyalarına geçici düzenlemeler ekleyerek bir web sayfasının görünümünü ve içeriğini değiştirmenize olanak tanır.

Sayfayı kapattığınızda veya yeniden yüklediğinizde, değişiklikleriniz kaybolacaktır; değişiklikleri yalnızca bilgisayarınızda görürsünüz ve aslında gerçek web sitesinin kendisini düzenlemezsiniz. Bu şekilde, herhangi bir şeyi denemekte ve değiştirmekte özgürsünüz ve daha sonra tekrar kullanmak üzere en iyi değişiklikleri kopyalayıp kaydedebilirsiniz.

Onunla neler yapabileceğimize bir bakalım.

Geliştirici Araçları bölmesindeki "Öğeler" sekmesine tıklayın ve daha fazla yer istiyorsanız, daha önce açtığınız arama kutusunu kapatmak için "Esc" tuşuna dokunun. Bu sayfanın HTML'sini görmelisiniz - artık sosisin nasıl yapıldığını biliyorsunuz.

Geliştirici bölmesinin sol üst köşesinde, bir karenin üzerinde bir fare simgesi göreceksiniz. Tıklayın, ardından sayfada değiştirmek istediğiniz herhangi bir öğeyi seçebilirsiniz. Öyleyse bazı şeyleri değiştirelim!

Bir Web Sayfasındaki Metni Değiştirin

Hiç bir sitedeki metni değiştirmek, ana sayfanızda yeni bir etiket satırının nasıl görüneceğini görmek veya e-posta adresinizi bir Gmail ekran görüntüsünden çıkarmak istediniz mi? Şimdi yapabilirsin.

"Bir karenin üstündeki fare" simgesine tıklayın, ardından sayfadaki herhangi bir metne, belki de Zapier ana sayfasındaki slogana tıklayın. Geliştirici Araçları bölmenizde, şuna benzeyen mavi vurgulu bir metin satırı göreceksiniz:

Geliştirici Araçları bölmesinde mavi olarak vurgulanan "Uygulamalarınızı Bağlayın" metnine çift tıklayın, düzenlenebilir bir metin alanına dönüşecektir.

Bu metin alanına istediğiniz herhangi bir şeyi yazın ("Auri bir dahidir" gayet iyi çalışmalıdır) ve enter tuşuna basın. İşte! Web sayfasındaki metni yeni değiştirdiniz.

Sayfayı yenileyin ve her şey normale dönecek.

Eğlence? Bu sayfada biraz daha değişiklik yapalım.

Geliştirici Araçları bölmeniz sayfayla birlikte yeniden yüklenir, ancak hadi kapatalım. Sayfanın sağ üst köşesindeki "X"e basın.

Güzel. Şimdi onu yeniden açacağız—düzenlemek istediğimiz metnin hemen yanında. Tek yapmanız gereken sayfanın değiştirmek istediğiniz kısmına sağ tıklamak, ardından sağ tıklama menüsünün altında görünen Inspect or Inspect Element linkine tıklamak.

Geliştirici Araçları bölmeniz açıldığında, bu cümleyi otomatik olarak vurgulamalıdır. Oldukça temiz, ha? Önemli olan küçük şeyler.

Şimdi Zapier sitesinde sloganı seçtiğimize göre, nasıl göründüğünü değiştirelim.

Öğelerin Rengini ve Yazı Tipini Değiştirin

Geliştirici Araçları bölmesinde bu cümlenin sağında, 3 ek sekme içeren bir alt bölme göreceksiniz: Stiller, Hesaplanan ve Olay Dinleyicileri. Her biri, bu cümlenin sayfada nasıl görüneceğini değiştirmenize izin verir. "Stiller" sekmesine başlayalım.

"Tarzlar" sekmesinde bazı şeylerin üzerinin çizildiğini fark edebilirsiniz. Bu, bu stillerin onları seçtiğimiz öğe için etkin olmadığı anlamına gelir, bu nedenle bu değerleri değiştirmenin hiçbir etkisi olmaz. Bunları amaçlarımız için görmezden gelebiliriz.

Bir şeyleri değiştirmeyi deneyelim. Inspect Element'in üst kısmındaki ok simgesine tekrar tıklayın ve sayfadaki "Kaydol" düğmesinin hemen altındaki metni seçin. "Stiller" sekmesinde "metin hizala" öğesini bulun (bunu bulmak için biraz kaydırmanız gerekebilir).

Şu anda "merkez" olarak ayarlandı, ancak "orta" yı çift tıklayın ve left . Bu, metni sayfada sola hizalı hale getirir.

Şimdi renkle oynayalım. Bu sefer düğmeyi seçmek için Öğeyi İncele'deki fare simgesini kullanın, ardından Stiller sekmesinde şu satırı bulun:

Ve "#ff4a00" üzerine çift tıklayın. #4199ad ( #4199ad unutmayın) ve "enter" tuşuna basın.

Düğmemizin rengini turuncudan maviye değiştirdik! Şimdi gerçekten harika bir şey deneyelim.

Öğe Durumlarını Değiştir

Birisi fareyle üzerine geldiğinde veya tıkladığında bir düğmenin veya bağlantının nasıl görüneceğini görmek ister misiniz? Chrome Inspect Element, kuvvet öğesi durum araçlarıyla bunu da gösterebilir. Bir ziyaretçi öğenin üzerine geldiğinde (fareyle üzerine gelme durumu), öğeyi seçtiğinde (odak durumu) ve/veya o bağlantıyı tıkladığında (ziyaret durumu) öğenin nasıl görüneceğini görebilirsiniz.

Bunu deneyelim. Zapier ana sayfasındaki kayıt düğmesini seçtiğinizden emin olun. Ardından, Öğeler sekmesinde bu koda sağ tıklayın ve o menüden :active: öğesini seçin.

Bu, düğmeyi tıkladığınızda Zapier sitesinin gösterdiği düğmeyi griye dönüştürür.

Şimdi arka plan rengi değerini #FF4A00 değiştirin ve düğme rengi değişikliğini anında görmelisiniz.

Deneme yapmayı deneyin; :hover: rengini değiştirin, ardından sağ tıklama menüsünde :hover: işaretini kaldırın ve yeni düğme rengini görmek için farenizi düğmenin üzerine sürükleyin.

Resimleri Değiştir

Inspect Element ile de bir web sayfasındaki görüntüleri kolayca değiştirebilirsiniz. NASA'dan bir güneş patlamasının bu dramatik fotoğrafıyla Zapier sitesindeki Süper Kahraman arka planını değiştirelim.

İlk önce, bu bağlantıyı kopyalayıp resme yapıştırın:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Şimdi, Zapier ana sayfasının arka planında Inspect Element'i açın ve kodda signup-hero satırını seçtiğinizden emin olun. "Tarzlar" bölmesindeki arka plan URL bağlantısını çift tıklayın ve yukarıda kopyaladığınız bağlantıyı yapıştırın.

"Enter" tuşuna basın ve farkı hemen görün.

Metni düzenlemek kullanışlıdır, görüntüleri değiştirmek eğlencelidir ve renkleri ve stilleri değiştirmek sitenizde yapmak istediğiniz değişiklikleri hızlı bir şekilde oluşturmanıza yardımcı olabilir. Ancak bu yeni slogan ve düğme tasarımı mobilde nasıl görünecek?

İşte burada Öykünme devreye giriyor - şimdiye kadar incelediğimiz her şeyin daha da fazla uygulanabileceği yer burası. Nasıl olduğunu görelim.

Bir Siteyi Öykünme ile Herhangi Bir Cihazda Test Edin

Bugün her şey duyarlı olmalı. Web siteleri artık yalnızca bilgisayarlarda görüntülenmiyor; telefonda, tablette, TV'de veya hemen hemen başka herhangi bir ekranda görüntülenme olasılıkları hiç olmadığı kadar yüksek. Yeni içerik ve tasarımlar oluştururken bu her zaman akılda tutulmalıdır.

Öykünme, web sitelerinin çeşitli cihazlarda, tarayıcılarda ve hatta konumlarda kullanıcılara nasıl görüneceğini tahmin etmek için harika bir araçtır. Bu, çeşitli cihazlarda ve tarayıcılarda yapılan testlerin yerine geçmese de, harika bir başlangıç.

Geliştirici Araçları bölmesinde, sol üst köşede küçük bir telefon simgesi göreceksiniz. Tıkla. Bu, sayfayı, boyutunu değiştirmek için üstte bir menü bulunan, telefon stilinde küçük bir sayfaya dönüştürmelidir.

Bir tablette, telefonda veya daha küçük ekranda gezinirken işlerin nasıl göründüğünü görmek için küçük tarayıcıyı yeniden boyutlandırın. Veya iPad Pro veya iPhone 8 Plus gibi varsayılan aygıt boyutlarını seçmek için üstteki menüyü tıklayın; devam edin ve ikincisini seçin.

Web sayfası ekranı bir iPhone 8 Plus boyutuna küçülmelidir ve ızgaranın sağ üst köşesindeki sayının yanında bulunan + simgesine tıklayarak biraz yakınlaştırabilirsiniz; birisi yakınlaştırdığında site böyle görünür. mobil.

Devam edin, web sayfası öykünmesinin sağ kenarını sağa sürükleyerek görünümü büyütün. Bakın ne oluyor? Artık iPhone 8 Plus görünümünde değiliz. Ekranı ızgara boyunca sürüklemek, ekran boyutu değiştikçe web sayfasının nasıl değişeceğini görmenizi sağlar, ancak görünümünüz artık daha önce seçtiğiniz cihaz modelini yansıtmaz.

Model açılır listesinden bunu tekrar seçerek iPhone 8 Plus görünümüne dönelim. Açılır listenin yanında "Portre" kelimesi bulunur. Tahmin edebileceğiniz gibi, bu, yatay ve yatay görünüm arasında geçiş yapmanızı sağlar.

Şimdi, bu gönderiyi bir iPhone 8 Plus'ta okuyor olsaydınız nasıl görüneceğini görebiliriz. Bu web sayfasının ve ekran çözünürlüğünün nasıl değiştiğini görmek için diğer cihazlarla oynamaktan çekinmeyin. Şimdiye kadar incelediğimiz diğer tüm geliştirici araçları da cihaz görünümüne tepki verecek. Örneğin, Zapier'in sloganının metnini tekrar seçin.

iPhone 8 Plus görünümünde bu metnin 2em olduğunu, bir bilgisayarda varsayılan görünümde ise 3em olduğunu görebiliriz.

"em", metnin boyutunu çevreleyen metne göre otomatik olarak değiştirmenize olanak tanıyan bir yazı tipi boyutu birimidir. Örneğin, tarayıcısında büyük özel yazı tipi ayarlarına sahip bir kullanıcımız olduğunu varsayalım. Paragraf yazı tipi boyutunu 14 piksele ayarlarsanız, yazı tipiniz ne olursa olsun o kullanıcı için her zaman 14 piksel olacaktır. Ancak, paragraf yazı tipi boyutunu 1em olarak ayarlarsanız, kullanıcınızın tarayıcısı, metninizi kullanıcınızın büyük ayarlarına ölçeklendirmek için bu birimi kullanır. Telefonlar ve tabletler bunu metni güzel bir şekilde yakınlaştırmak için yapar.

Şimdi Apple iPad görünümüne geçelim ve yukarıdaki "cihazlar arasında test etme" başlığını seçelim. Bu sefer yazı tipi boyutu 3em'dir. Yazı tipi boyutu, cihaz görünümüne göre değişti, tabletin daha büyük ekranı sayesinde bilgisayarda kullanacağı varsayılan boyuta geri döndü.

Mobil Cihaz Sensörlerini Taklit Et

Farenizin artık web sayfasında küçük bir daire olarak göründüğünü fark etmiş olabilirsiniz. Bu, sayfayla mobil cihazınızdaymış gibi etkileşim kurmanıza olanak tanır. Sayfayı aşağı sürüklerken tıklarsanız, bu, normalde tarayıcınızda olduğu gibi metni vurgulamaz; dokunmatik ekranlı bir cihazdaymışsınız gibi ekranı aşağı doğru sürükler. Bu görünümü kullanarak, bir web sayfasında dokunma alanlarının ne kadar büyük olduğunu görebilirsiniz. Bu, hangi düğmelere, simgelere, bağlantılara veya diğer öğelere parmakla kolayca dokunulabileceğini görebileceğiniz anlamına gelir.

Hatta tarayıcınızın bir telefon gibi çalışmasını sağlayabilirsiniz. Inspect Element'teki arama bölmesini tekrar açmak için "Esc" tuşuna basın ve bu sefer seçenekler menüsü için sol taraftaki 3 noktalı menüyü tıklayın. Üç yeni araç almak için Sensörler'i seçin: Coğrafi Konum, Yönlendirme ve Dokunma.

Dokunma, normal bir fare imlecinden çok bir parmak gibi davranan varsayılan daire seçiciyi açmanıza veya kapatmanıza olanak tanır. Oryantasyon, telefonunuzu hareket ettirerek bir şeyleri hareket ettirmenize izin veren çevrimiçi oyunlar gibi harekete duyarlı web siteleriyle etkileşim kurmanıza olanak tanır. Ve Geolocation, farklı bir konumdaymış gibi davranmanıza olanak tanır.

Bu siteyi Google'ın Mountain View, CA'daki Genel Merkezinden görüntülemeyi deneyelim.

"Coğrafi konum koordinatlarını taklit et"in yanındaki kutuyu işaretleyin ve Lat = metin alanına 37 ve Lon= metin alanına 122 değerini girin. Klavyenizde enter tuşuna basın.

Hiçbir şey değişmez, değil mi?

Bunun nedeni, bu sayfada bulunduğunuz yere göre değişen içerik bulunmamasıdır. Groupon.com gibi yerelleştirilmiş içeriği göstermek için konumunuzu kullanan bir sitede koordinatları değiştirirseniz, farklı sonuçlar alırsınız. Google.com farklı bir konumda gidin, belki başka bir ülkede tatil için yeni bir Google logosu görürsünüz veya en azından sonuçları farklı bir dilde alırsınız.

Öykünme, kendinizi kullanıcının yerine koymanın ve kullanıcının web sayfanızda neler görebileceğini düşünmenin harika bir yoludur ve uluslararası web'i keşfetmenin eğlenceli bir yoludur.

Mobil Ağları Taklit Et

Kullanıcılarınız daha yavaş bir 3G ağında olsa bile sitenizin yüklenip yüklenmeyeceğini görmek için farklı ağlarda bir siteye göz atmanın nasıl bir şey olduğunu da görebilirsiniz.

Denemek için Inspect Element'in arama sekmesinin solundaki üç daire düğmesine tekrar tıklayın ve "Ağ Koşulları"nı seçin. Orada, sayfanın internet olmadan nasıl çalıştığını görmek için hızlı veya yavaş 3G veya çevrimdışı arasından seçim yapabilirsiniz. Veya kendi testinizi eklemek için Ekle...' ye tıklayın (çevirmeli interneti test etmek için 56Kbps ekleyin). Şimdi sayfayı yeniden yükleyin ve sitenin yavaş bir bağlantıda yüklenmesinin ne kadar süreceğini ve sitenin yüklenirken nasıl göründüğünü göreceksiniz. Bu, sitenizi neden yavaş bağlantılarda daha hızlı yüklenecek şekilde geliştirmeniz gerektiğini gösterecektir.

Ayrıca kullanıcı aracınızı da değiştirebilirsiniz; "Kullanıcı Aracısı"nın yanındaki "Otomatik olarak seç" seçeneğinin işaretini kaldırın ve sitenin eski tarayıcılar için oluşturmasını değiştirip değiştirmediğini görmek için "Internet Explorer 7"yi seçin. Bu aynı zamanda, yalnızca Internet Explorer gibi farklı bir tarayıcıda çalıştıklarını iddia etseler bile web sayfalarının yüklenmesini sağlamak için kullanışlı bir hack.

Zorluklar

Birkaç zorlukla bitirelim. Git bize ne öğrendiğini göster!

1. CNN.com'da başlıkları değiştirin ve trend olan makale başlığınızın ekran görüntüsünü tweet atın.

2. Favori web sitenizi "Kaynağı Görüntüle"yi kullanarak çoğaltın ve HTML'yi kendiniz yapmak için uğraşın.

3. Web siteniz bir mobil cihazda nasıl oluşturduğunu görün ve kendiniz düzelterek daha iyi yapılabilirdi ne geliştirici göstermek!

Zapier ekibindeki Pazarlama ekibi, uygulama incelemelerimizde ekran görüntülerinden özel bilgileri ayarlamak için Inspect Element'e güvenirken, tasarım ekibimiz bunu değişiklikleri örneklemek ve çeşitli ekranlarda işlerin nasıl görüneceğini görmek için kullanıyor.

Inspect Element'i nasıl kullanırsınız? Aşağıdaki yorumlarda hikayelerinizi duymayı çok isteriz!

Bu eğitici ilk olarak 5 Ocak 2015'te yayınlandı, ardından 6 Haziran 2017 ve 25 Ocak 2018'de güncellendi ve ekran görüntüleri ve Google Chrome'un en son sürümünden adımlar ile yeniden yayınlandı.