Google Chrome , gelişmiş özellikleri nedeniyle web geliştirme için popüler web tarayıcılarından biridir. Hata ayıklama sırasında Chrome Geliştirici Araçları^{(Chrome Developer Tools)} çok yararlı olabilir. Çoğumuz, canlı CSS'yi ^(CSS)Chrome Geliştirme Araçları'nı^{(Chrome Dev Tools)} kullanarak düzenleyebileceğimizi zaten biliyoruz , ancak bugün sizinle paylaşacağımız daha fazla ipucu var.

Chrome Geliştirme Araçları ipuçları

Chrome Dev Tools'un^{(Chrome Dev Tools)} pek çok bilinmeyen ve gizli hilesi var ve bunların arasında en faydalı olanlarını inceleyeceğiz. Geliştirici araçlarını Chrome'da açmak için klavyenizde ^(Chrome)F12 tuşuna basın ve aşağıdaki püf noktalarını deneyin.

1. Herhangi bir dosyayı bulun ve açın

Web geliştirme yaparken birçok HTML , CSS , JS ve diğer dosyalarla ilgileniriz. Herhangi bir hata ayıklamak istediğimizde Chrome Dev^{(Chrome Dev)} araçlarını açıyoruz . İşinizi kolaylaştırmak için belirli dosyayı hızlı bir şekilde arayabilir ve bulabilirsiniz. Sadece^(Just) , Ctrl + P basın ve dosya adını yazmaya başlayın. Bu, dosya listesinden belirli bir dosyayı bulmanıza yardımcı olur.

2. Kaynak dosya içinde arama yapın

Önceki numarada, belirli bir dosyayı nasıl arayacağımızı öğrendik. Yüklenen tüm dosyalarda belirli bir dizeyi bile arayabilirsiniz. Dosyalarda bir dize aramak için Ctrl + Shift + F basın . Ayrıca normal ifadeleri de destekler.

3. Belirli bir satıra gidin

Herhangi bir kaynak dosyayı açtıktan ve belirli bir satıra geçmek istediğinizde, Ctrl + G basın ve satır numarasını verin ve enter tuşuna basın.

4. Konsol^(Console) sekmesinde DOM Öğelerini Seçme

Dev Tools ayrıca konsoldaki öğeleri seçmenize de olanak tanır.

• $() – CSS seçicinin ilk örneğini döndürür .^(Returns)
• $$() – Verilen CSS seçiciyle eşleşen öğelerin dizisini döndürür.

Daha fazla konsol komutu için bu gönderiye gidin.^{(this post.)}

5. Birden fazla şapka işareti kullanın

Bazen birden fazla şapka işaretini farklı yerlere ayarlamak istersiniz ve bunu Ctrl tuşunu basılı tutup bunları yerleştirmek istediğiniz yere tıklayarak Chrome Geliştirme^{(Chrome Dev)} araçlarında kolayca yapabilirsiniz. Sonra yazmaya başlayın ve seçilen çeşitli yerlere yerleştirildiğini göreceksiniz.

6. Günlüğü Koru

Günlüğü koru^(Preserve) , sayfa yüklense bile günlüğü sürdürmenize yardımcı olur. Konsol^(Console) günlüğünde Günlüğü koru'nun^{(Preserve log )} yanındaki seçeneği işaretleyin ve günlük korunur. Bu, sayfadan önce günlüğü gösterir ve hataları araştırmak için yardımcı olur.

7. Yerleşik kod güzelleştirici kullanın

Chrome Dev Tools , Pretty print "{}" adlı yerleşik kod güzelleştiriciye sahiptir . Geliştirici aracı, simge durumuna küçültülmüş kodu gösterir ve okunması o kadar kolay değildir. Kaynak dosyayı insan tarafından okunabilir biçimde göstermek için, açılan kaynak dosyanın sol alt köşesinde gösterilen güzel yazdır düğmesine tıklayın .^(Click)

8. Web siteniz mobil uyumlu mu? burayı kontrol et

Chrome Dev Tools , bir web sitesinin mobil uyumlu olup olmadığını kontrol etmemize de olanak tanır. Web sitenizin çeşitli cihazlarda nasıl göründüğünü kontrol edebilirsiniz. Chrome Dev araçlarına gidin ve Öykünme sekmesi altında çeşitli cihazları^{(Emulation )} dosyalayabilirsiniz. İstediğiniz cihazı seçin ve web sitenizin o cihazda nasıl göründüğünü test edin.

Daha fazla bilgi için aşağıdaki videoya bir göz atın.

9. Sensörleri ve Coğrafi Konumu Öykün^{(Geographical Location)}

Dokunmatik ekranlar ve ivmeölçerler gibi sensörleri bile taklit edebilirsiniz. Hatta coğrafi konumu taklit edebilirsiniz. Bunu yapmak için Emulation -> Sensors.

10. Geçerli kelimenin bir sonraki tekrarını seçin

Sözcüğü tüm geçişlerinde değiştirmek istiyorsanız, sözcüğü seçin ve seçilen sözcüğün bir sonraki örneğini seçmek için Ctrl + D Ardından, tek seferde o kelimeyi tüm oluşumlarında düzenleyebilirsiniz.

11. Renk Formatını Değiştirin

Rgba, onaltılık ve hsl biçimlendirmesi arasındaki değişiklikleri değiştirmek için renk önizlemesinde Shift + Click kullanmanız yeterlidir.

12. Çalışma alanı aracılığıyla yerel dosyalara değişiklik ekleyin^(Add)

Chrome Dev araçlarında kaynak dosyaları düzenleyebilir ve CSS , JavaScript ve diğer dosyalarda bazı değişiklikler yapabiliriz. Bu değişiklikleri yerel dosyalara eklemek için, değişiklikleri çalışma alanından diskteki dosyalara kopyalayıp yapıştırmaya gerek yoktur. Chrome Geliştirme^{(Chrome Dev)} araçları, geliştirme araçlarında yaptığınız değişikliklerle dosyaları eşleştirmenize ve yerel dosyayı güncellemenize olanak tanır. Bunu yapmak için, Kaynaklar^{(Sources )} sekmesinde sol taraftaki kaynak dosyaya sağ tıklayın ve çalışma alanına Klasör Ekle'yi seçin.^{(Add Folder to workspace.)}

Bu yardımcı olur umarım.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular web browsers for web development, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Windows PC Kullanıcılar için en iyi Google Chrome Tips and Tricks

• Yapışkan Notları Kullanmak İçin 3 Faydalı İpuçları ve Püf Noktaları

• Bir Website kullanarak Developer Tools bir Font nasıl indirilir?

• Windows 11/10 sekmeleri kaybetmeden Restart Chrome, Edge or Firefox

• Inspect Element'ün Google Chrome browser'sini kullanma ipuçları

• Chrome'ün şifreleri kaydetmekten nasıl durdurulacağı

• Netflix Hata Kodu M7111-1101 Nasıl Onarılır

• One Gmail Inbox içine Combine Hepsi Your Email Accounts

• Mac için Google Chrome: Nasıl edinilir!

• Nasıl Kapanır Chrome Bildirimler: Bilmeniz Gerekenler

• Chrome, Firefox, Edge ve Opera'te bir proxy sunucusu nasıl ayarlanır?

• Tüm büyük web tarayıcılarında Java nasıl etkinleştirilir

• Nerede çerezler tüm büyük tarayıcılar için Windows 10 saklanır?

• Chrome, Firefox, Edge ve Opera yılında Etmeyin Parça nasıl etkinleştirilir

• Google Chrome'de 403 Forbidden Error nasıl düzeltilir

• Chrome, Firefox, Edge ve Opera'de GOGNITO nasıl gidilir?

• Google Meet'de Your Name nasıl değiştirilir

• Chrome içinde Yahoo Search arasında Rid Get Nasıl

• Tüm büyük tarayıcılarda reklamsız bir makale yazdırılır

• Adobe Flash Player Google Chrome'de Nasıl Engellenirsiniz?