Google Chrome , yalnızca normal internet kullanıcıları için değil, aynı zamanda genellikle bir web sitesi oluşturan, bloglar tasarlayan vb. Web geliştiricileri için de tasarlanmıştır . Google Chrome'un ^{(Google Chrome)}Öğeyi İncele^{(Inspect Element )} veya İncele^{(Inspect )} seçeneği, kullanıcıların, görünümden gizlenen bir web sitesi hakkında bazı bilgileri bulmasına yardımcı olur. . Aşağıda, Windows PC için Google Chrome tarayıcısının Inspect Element'ini^{(Inspect Element)} kullanmayla ilgili bazı ipuçları verilmiştir .

Google Chrome Öğesini İnceleyin

1] Find hidden JavaScript/Media files

Birçok web sitesi, ziyaretçi web sayfasında 15 veya 20 saniyeden fazla kalırsa açılır pencereler gösterir. Veya birçok kez bir resim, reklam veya simge, rastgele bir yere tıkladıktan sonra açılır. Bu gizli dosyaları bir web sayfasında bulmak için Inspect Element'in ^{(Inspect Element)}Sources sekmesini kullanabilirsiniz . Sol tarafta keşfedilebilecek bir ağaç görünümü listesi gösterir.

2] Get HEX/RGB color code in Chrome

Bazen bir rengi beğenebilir ve renk kodunu öğrenmek isteyebiliriz. Google Chrome'daki^{(Google Chrome)} yerel seçeneği kullanarak belirli bir web sayfasında kullanılan HEX veya RGB renk kodunu kolayca bulabilirsiniz . Renge sağ^{(Right-click)} tıklayın ve İncele^(Inspect) öğesine tıklayın . Çoğu zaman, renk kodunu diğer CSS^(CSS) ile sağ tarafta alırsınız . Göremiyorsanız, bazı ücretsiz renk seçici yazılımları kullanmanız gerekebilir.

İPUCU : Bu ^(TIP)Renk Seçici çevrimiçi araçlarına^{(Color Picker online tools)} da bir göz atın .

3] Web sayfası performans iyileştirme ipuçlarını alın^{(3] Get web page performance improvement tips)}

Herkes hızlı açılan bir web sitesine girmeyi sever. Web sitenizi tasarlıyorsanız, bunu her zaman aklınızda tutmalısınız. Sayfa yükleme hızını kontrol etmek ve optimize etmek için birçok araç vardır. Ancak Google Chrome , kullanıcıların web sitesi yükleme hızını iyileştirmeye yönelik ipuçları almasına olanak tanıyan yerleşik bir araçla birlikte gelir. Bu araçlara erişmek için Denetimler^(Audits) sekmesine gidin ve Ağ Kullanımı^{(Network Utilization)} , Web Sayfası Performansı^{(Web Page Performance)} ve Sayfayı Yeniden Yükle ve Yüklendiğinde Denetim'in^{(Reload Page and Audit on Load)} seçili olduğundan emin olun. Ardından Çalıştır^{(Run )} düğmesine tıklayın. Sayfayı yeniden yükleyecek ve size sayfayı daha hızlı hale getirmek için kullanılabilecek bazı bilgileri gösterecektir. Örneğin, önbellek süresi dolmamış tüm kaynakları, JavaScript'i alabilirsiniz.^(JavaScript)tek bir dosyada birleştirilebilir, vb.

4] Yanıt verme durumunu kontrol edin^{(4] Check responsiveness)}

Bir web sayfasını duyarlı hale getirmek günümüzde çok önemlidir. Sitenizin tamamen duyarlı olup olmadığını kontrol edebilecek bir sürü araç var. Ancak, Google Chrome'un^{(Google Chrome)} bu aracı, kullanıcıların sitenin duyarlı olup olmadığını bilmelerine ve belirli bir mobil cihazda nasıl görüneceğini kontrol etmelerine yardımcı olur. Herhangi bir web sitesini açın, Öğeyi İncele^{(Inspect Element )} sekmesini alın, mobil^{(mobile )} düğmeye tıklayın, çözünürlüğü ayarlayın veya web sayfasını test etmek için istediğiniz cihazı seçin.

5] Canlı web sitesini düzenleyin^{(5] Edit live website)}

Bir web sayfası oluşturduğunuzu varsayalım, ancak renk şeması veya gezinme menüsü boyutu veya içeriği veya kenar çubuğu oranı konusunda kafanız karıştı. Google Chrome'un ^{(Google Chrome)}Inspect Element seçeneğini kullanarak canlı web sitenizi düzenleyebilirsiniz . Canlı bir web sitesinde değişiklikleri kaydedemeseniz de, daha fazla kullanabilmeniz için tüm düzenlemeleri yapabilirsiniz. Bunu yapmak için Inspect Element'i açın, sol taraftan ^{(Inspect Element)}HTML özelliğini seçin ve sağ taraftan stil değişiklikleri yapın. CSS'de^(CSS) herhangi bir değişiklik yaparsanız, dosya bağlantısını tıklayabilir, kodun tamamını kopyalayabilir ve bunu orijinal dosyaya yapıştırabilirsiniz.

Inspect Element of Google Chrome , her web geliştiricisinin gerçek bir arkadaşıdır. İster tek sayfalık bir web sitesi, ister dinamik bir web sitesi geliştiriyor olun, bu ipuçlarını kesinlikle kullanabilirsiniz.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not just for regular internet users but alѕo for web developers, who often create a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome tepkisiz, şimdi Relaunch?

• File Download Hataları Google Chrome browser Nasıl Düzeltilir

• Default Print Settings Google Chrome'te nasıl değiştirilir

• Browser Close'de Google Chrome'de Destroy Profile'te Nasıl Yapılır

• Anna Assistant, Google Chrome için mükemmel bir voice assistant'tür

• Mozilla Firefox and Google Chrome için Video Speed Controller

• Great Suspender, Google Chrome'teki sekmeleri otomatik olarak askıya alır

• Windows 10 için Google Chrome vs Firefox Quantum

• Fix ERR_SPDY_PROTOCOL_ERROR error Google Chrome'da

• Fix Blurry File Open dialog Google Chrome and Microsoft Edge Kutusu

• Google Chrome Gemiler Online alışveriş özelliğini bir dokunuşla sipariş vermek için

• Google Chrome'da Otomatik Oturum Açma özelliğini devre dışı bırakma

• Fix ERR_SSL_PROTOCOL_ERROR Google Chrome'de

• Google Chrome indirme% 100 saplanıyor

• Nasıl etkinleştirilir veya Disable kaydırılabilir Tabstrip Google Chrome'te

• Saatiniz ileride veya saatiniz Google Chrome'teki hatanın arkasında

• Volume Master'ü ayrı olarak Google Chrome tabs'deki hacmi ayarlayın

• Aw, Snap düzeltmek için nasıl! error message içinde Google Chrome browser

• Window Naming Google Chrome'de Nasıl Etkinleştirilir ve Devre Dışı Bırakılır

• Google Chrome browser için yeni Material Design UI nasıl etkinleştirilir?