Hiçbir web sitesi mükemmel şekilde oluşturulmaz. İnsanlar tarafından yapılan tüm ürünler gibi, kod hataları da sürecin bir parçasıdır. Bu nedenle, kullanıcılarınıza mümkün olan en iyi deneyimi sunmak için olabildiğince hatasız olduğundan emin olmak için oluşturduğunuz her yeni web sitesini kapsamlı bir şekilde test etmeniz önemlidir. 

Google Chrome'un^(Chrome) DevTools kitini denemeden bir web sitesini test etmemelisiniz . ^(DevTools)Chrome geliştirici modu, hataları bulmak ve düzeltmek için yeni bir siteyi (veya mevcut bir siteyi) denemenize ve kapsamlı bir şekilde test etmenize olanak tanır. Ayrıca, kaynak kodunun görüntülenmesi de dahil olmak üzere, diğer sitelerin nasıl çalıştırıldığı konusunda size fikir verebilir. 

Google Chrome tarayıcı geliştirici modu, sahip olduğu araçlar ve nasıl etkili bir şekilde kullanılacağı hakkında bilmeniz gereken her şey burada .

Chrome Geliştirici Modu Nedir?^{(What Is Chrome Developer Mode?)}

Chrome geliştirici modundan bahsettiğimizde, Chromebook'larda^{(Chromebooks)} göreceğiniz geliştirici modundan^{(same developer mode)} bahsetmiyoruz . Bahsettiğimiz şey, tarayıcının kendisinde yerleşik olan kapsamlı Chrome geliştirme araçlarıdır ( Google DevTools olarak adlandırılır).^{(Google DevTools)}

Bunlar, test amacıyla Google Chrome^{(Google Chrome)} tarayıcısına yüklediğiniz bir web sayfasını test etmek, analiz etmek ve bilerek (gerekirse) kırmak için tasarlanmış araçlardır . Temel düzeyde, bir web sitesinin kaynak kodunu görüntülemek için DevTools'u^(DevTools) kullanabilir ve bir sitenin nasıl oluşturulduğunu ve ne kadar iyi çalıştığını görmek için başlığın altına göz atmanıza izin verebilirsiniz.

Ancak Google DevTools bundan^{(Google DevTools)} daha fazlasını sunar. Bir sayfayı yüklendikten sonra değiştirmek için Chrome geliştirici modunu kullanabilir , sayfayı kontrol etmek ve işlemek için Google Chrome konsol komutlarını çalıştırabilir ve ayrıca web trafiğini izlemek için hız ve ağ testleri çalıştırabilirsiniz.

Chrome DevTools modunda farklı işletim sistemleri ve ekran çözünürlükleri dahil olmak üzere diğer cihazları da taklit edebilirsiniz . Bu, bir sitenin duyarlı web tasarımına sahip olup olmadığını ve cihaz çözünürlüğüne veya türüne bağlı olarak site içeriğinin ve düzenlerinin nerede değişeceğini görmenizi sağlar.

Bu araçlar profesyonel web geliştiricileri veya test uzmanlarına yönelik olsa da, standart Chrome kullanıcılarının DevTools paketini nasıl kullanacaklarını bilmeleri için de kullanışlıdır. Bir sitede çözemediğiniz bir sorun görürseniz, Chrome geliştirici moduna geçmek, sorunun sitede mi yoksa tarayıcınızda mı olduğunu anlamanıza yardımcı olabilir.

Google Chrome DevTools Menüsüne Nasıl Erişilir^{(How To Access Google Chrome DevTools Menu)}

Kullanmak istediğiniz araca bağlı olarak Google Chrome Geliştirme Araçları^{(Google Chrome DevTools)} menüsüne erişmenin birkaç yolu vardır .

Bunu yapmanın en kolay yolu Google Chrome menüsünden. Bunu yapmak için sağ üstteki üç nokta menü simgesine tıklayın. ^{(three-dots menu icon)}Görüntülenen menüden More Tools > Developer Tools tıklayın .

Bu, açık Chrome sekmenizin veya pencerenizin sağ tarafındaki yeni bir menüde DevTools kitini açacaktır.^(DevTools)

Bunu klavye kısayollarını kullanarak da yapabilirsiniz. Windows veya Linux PC'den ^{(Linux PC)}Chrome tarayıcıyı açın ve F12 tuşuna basın. Açık bir Chrome sekmesinde veya penceresinde Ctrl + Alt + J veya Ctrl + Alt + I tuşlarına da basabilirsiniz .

macOS'ta bunun yerine Chrome DevTools menüsünü açmak için F12 tuşlarına veya Option + Command + J veya Option + Command + IBu , DevTools menüsünün üst kısmındaki diğer Chrome araçlarına geçme seçenekleriyle birlikte Chrome konsolunu açacaktır.^(Chrome)

İsterseniz, herhangi bir açık web sayfasında bir web sitesinin kaynak kodunu ( işlemde DevTools menüsünün ^(DevTools)Öğeler^(Elements) sekmesini açarak ) sağ tıklayıp İncele^{(Inspect )} seçeneğini tıklayarak görüntüleyebilirsiniz .

Chrome DevTools'u Kullanma^{(Using Chrome DevTools)}

Kısaca değindiğimiz gibi , Elements sekmesi altında bir web sitesinin kaynak kodunu görmek için Chrome DevTools kitini kullanabilirsiniz. ^{(Chrome DevTools)}Yüklediğiniz sayfanın arkasındaki kodu analiz etmenize ve Chrome konsolunda Konsol^(Console) sekmesi altındaki hata mesajlarını (sitenin nasıl yüklendiğiyle ilgili sorunları belirten) görüntülemenize olanak tanır.

Bir web sitesindeki içerik için farklı kaynakları da Kaynaklar^(Sources) sekmesi altında görüntüleyebilirsiniz. Örneğin, bir site bir içerik dağıtım ağı (CDN) kullanıyorsa^{(using a content delivery network (CDN))} , bir siteden alınan medya burada farklı bir kaynak olarak listelenir.

Chrome geliştirici modu, bu içeriği doğrudan indirmenize veya içeriğin daha karmaşık analizini gerçekleştirmenize olanak tanır.

Bir sitenin nasıl performans gösterdiğini test etmek istiyorsanız, Ağ^(Network) sekmesi altında ağ kullanımınızı izleyebilir ve kaydedebilirsiniz. Bu, tarayıcınız ve site arasında yapılan ağ isteklerinin hızını, boyutunu ve türünü gösterecektir.

Örneğin, bir sayfa ilk yüklendiğinde, site sayfa içeriğini kendisi yükler, ancak üçüncü taraf veritabanlarından da veri isteyebilir. Örneğin, oturum açtığınızda, bu, burada bir ağ isteği olarak görünecek bir veritabanını sorgulayabilir.

Bunu , farklı noktalarda ekran görüntülerini kaydetmek de dahil olmak üzere Chrome tarayıcı kullanımınızı daha derinlemesine kaydedebileceğiniz Performans^{(Performance )} sekmesi altında daha ayrıntılı olarak analiz edebilirsiniz . Bu, daha fazla analiz için sitenizi yüklemenin ne kadar sürdüğünü günlüğe kaydeder.

Google Chrome, PC belleğinizde zor olduğu^{(being hard on your PC memory)} için bir üne sahiptir , bu nedenle sitenizin JavaScript bellek kullanımını Bellek^(Memory) sekmesi altında test edebilirsiniz. Burada farklı Chrome^{(Different Chrome)} test profilleri kullanılabilir ve bu testle ilgili daha fazla bilgiyi Chrome DevTools dokümantasyon sayfasında bulabilirsiniz^{(Chrome DevTools documentation page)} .

Site içeriğinizin daha derinlemesine analizinin yanı sıra kullanıyor olabileceği herhangi bir tarayıcı deposu (örneğin, verileri kaydetmek için), Uygulama^{(Application)} sekmesinde arama yapabilirsiniz. Site tanımlama bilgisi bilgilerini burada Tanımlama Bilgileri bölümü altında görüntüleyebilir veya Depolamayı ^(Cookies)temizle^{(Clear storage)} seçeneğine tıklayarak kullanılan depolama alanını temizleyebilirsiniz .

Sitenizin güvenliği konusunda endişeleriniz varsa, Güvenlik^{(Security )} sekmesinden ne kadar iyi performans gösterdiğini kontrol edebilirsiniz. Bu, sayfanın doğru ve güvenilir bir SSL^(SSL) sertifikasına sahip olup olmadığı da dahil olmak üzere, bir sayfa için Chrome'un güvenlik analizine hızlı bir genel bakış sağlar .

Tipik kullanıcı standartlarını karşılayıp karşılamadığı ve site performansının arama motoru optimizasyonunu etkileyip etkilemediği dahil olmak üzere sitenizin performansı hakkında bir rapor oluşturmak istiyorsanız, Deniz Feneri^(Lighthouse) sekmesini tıklayabilirsiniz. Bu, raporunuz için işaretleyebileceğiniz veya işaretini kaldırabileceğiniz ayarlar sunar ; görüntülemek üzere raporu oluşturmak için Rapor oluştur'u tıklayın.^{(Generate report)}

Bu, Chrome^(Chrome) geliştirici modunun geliştiricilere getirebileceği potansiyelin yüzeyini zar zor çiziyor . Daha fazla bilgi edinmek istiyorsanız, Chrome DevTools belgeleri^{(Chrome DevTools documentation)} , bununla kendi kullanıcı testlerinizi nasıl oluşturacağınız da dahil olmak üzere, sunulan araçlar ve özellikler konusunda size yardımcı olacaktır. 

Gelişmiş Google Chrome Püf Noktaları^{(Advanced Google Chrome Tricks)}

Çoğu Chrome kullanıcısı, tarayıcılarında Google Chrome Geliştirme Araçları^{(Google Chrome DevTools)} kitinin bulunduğunu asla bilmeyecek, ancak uzman kullanıcılar için web sitelerini test etmek ve analiz etmek için son derece yararlı bir yol olmaya devam ediyor. Sitenizi daha fazla test etmenize yardımcı olacak web geliştiricileri için^{(Chrome extensions for web developers)} üçüncü taraf Chrome uzantıları da vardır .

Temel bir web sitesi^{(building a basic website)} oluşturuyorsanız , Chrome geliştirici moduna geçmek^(Chrome) sitenizde hemen görünmeyen hataları tespit etmenize yardımcı olabilir. Bunu yalnızca Chrome düzgün çalışıyorsa yapabilirsiniz, bu nedenle Chrome çökmeleriyle mücadele^{(struggling with Chrome crashes)} ediyorsanız , önce tarayıcınızı sıfırlamanız veya yeniden yüklemeniz gerekebilir.

What Is Chrome Developer Mode & What Are Its Uses?

No wеbsite іs built perfectly. Like all products made by humans, code errors are part of the prоcess. That’s why it’s important to thoroughly test any new website you build to make sure that it’s as free of errorѕ as possible to give your users thе beѕt рossible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Google Chrome Otomatik Doldurma: Eksiksiz Bir Kılavuz

• Chrome için En İyi 10 Gizlilik Uzantısı (2022)

• Gmail Mesajlarınızı Şifrelemek İçin Bu 4 Chrome Eklentisini Kullanın

• Google Chrome İçerik Ayarları: Tam Kılavuz

• En İyi Konferans Görüşmesi Hizmeti Nedir – Karşılaştırılan En İyi Uygulamalar

• Yaygın Yazıcı Sorunlarını Düzeltmek için HP Print and Scan Doctor'ı kullanın

• Windows'ta Dosyaları Otomatik Olarak Taşıma, Silme veya Kopyalama

• Windows için En İyi 7 Bloatware Kaldırma Aracı

• Sesi Metne Dönüştürmek için İki Transkripsiyon Aracı

• İnternet Kullanımını İzlemek İçin En İyi Uygulamalar

• Windows için En İyi 11 Ücretsiz Ekran Görüntüsü Yazılımı

• Google Apps Komut Dosyası Düzenleyici: Başlamak için Bilmeniz Gereken Her Şey

• Windows Installer Paketleri Oluşturmak için 4 Harika Araç

• Avast Çevrimiçi Güvenlik Uzantısı: Kullanmaya Değer mi?

• Zapier E-posta Ayrıştırıcı: Kullanmanın 3 Yaratıcı Yolu

• Bir Microsoft Planner Eğitimi: Bilmeniz Gereken Her Şey

• HDG Açıklıyor: Markdown Nedir ve Bilmem Gereken Temel Bilgiler Nelerdir?

• Android Uygulamaları için En İyi 5 Güvenli APK İndirme Sitesi

• Linux sudo Komutuna 5 Windows Alternatifi

• Microsoft Power Automate ve İndirilecek Ücretsiz Şablonlar Nedir?