Inspect Element aracını ilk keşfettiğimizde, web’in iç işleyişine açılan gizli bir kapının kilidini açmak gibi hissettik. Web sitesi tasarımını doğrudan tarayıcıda denememize olanak sağladı.
Inspect Element, bir sayfanın HTML ve CSS’sini geçici olarak düzenlemenizi sağlar. Karmaşık kodlara dalmadan metin üzerinde ince ayar yapmak, renkleri ayarlamak veya düzen değişikliklerini test etmek için son derece kullanışlıdır.
Hemen takdir ettiğimiz bir şey, bu düzenlemelerin kalıcı olarak kaydedilmemesiydi. Bu, orijinal sitenizin bozulmadan kaldığını bilerek güvenle oynayabileceğiniz anlamına geliyor.
Bu kılavuzda, WordPress sitenizde Inspect Element’i kullanmanın temellerini paylaşacağız. Bu beceri, tasarımlarınıza ince ayar yapmanıza veya hareket halindeyken stil sorunlarını gidermenize yardımcı olurken size saatler kazandırabilir.
İnceleme Aracı Nedir?
Web sitesi değişikliklerinde sorun gidermek ve denemeler yapmak için tarayıcı geliştirici araçlarına sayısız kez güvendik. Google Chrome, Firefox, Safari ve Microsoft Edge gibi modern web tarayıcıları, web geliştiricilerinin hataları zahmetsizce ayıklamasına yardımcı olmak için tasarlanmış yerleşik araçlarla donatılmıştır.
Bu araçlar bir sayfanın HTML, CSS ve JavaScript kodunu görüntülerken tarayıcının bunları nasıl işlediğini de gösterir. Bizim için bu, gerçek web sitesini etkilemeden hile kodlarımızı denemek gibi bir şey.
Bu geliştirici araçlarına herhangi bir sayfada sağ tıklayıp menüden ‘İncele’yi seçerek erişebilirsiniz. Tasarım değişikliklerini test ederken veya bir sorunda hata ayıklarken başvurduğumuz eylemlerden biridir.
Inspect aracı ile HTML, CSS veya JavaScript kodunu geçici olarak düzenleyebilir ve değişiklikleri ekranınızda canlı olarak görebilirsiniz. Bu aracı, küçük stil değişikliklerinden tam düzen fikirlerine kadar her şeyi önizlemek için kullandık. (Bu makalenin ilerleyen bölümlerinde nasıl yapacağınızı göstereceğiz).
En iyi kısmı mı? Bu değişiklikler gerçek web sayfasını etkilemez. Sayfayı yeniden yüklediğinizde veya tarayıcıyı kapattığınızda her şey normale döner. Bu da onu fikirleri test etmek için güvenli ve güvenilir bir araç haline getiriyor.
Bunu özellikle test etmek veya hata ayıklamak için hızlı bir yola ihtiyaç duyan DIY web sitesi sahipleri ve geliştiricileri için yararlı bulduk. İşte sadece birkaç kullanım örneği:
- Yeni CSS stilleri uygulayın ve sitenizde nasıl göründüklerini hemen görün.
- Teknik yazarlar ekran görüntüleri için HTML düzenleyebilir, hassas bilgileri gizleyebilir veya görünür metni özelleştirebilir.
- Geliştiriciler bunu genellikle yaygın WordPress hatalarını belirlemek, JavaScript sorunlarını ayıklamak veya 404 hatalarını çözmek için kullanır.
Ve bu sadece yüzeyi çiziyor. Bu araçlar inanılmaz derecede çok yönlüdür, bu da onları web siteleriyle çalışan herkes için favori yapar.
Bu kılavuzda, okuyucularımız arasında en popüler tarayıcı olduğu için Google Chrome’daki Inspect aracına odaklanacağız. Ancak Firefox, Safari ve Microsoft Edge’de de Inspect seçenekleri üzerinden erişilebilen benzer araçlar bulunmaktadır.
Başlamaya hazır mısınız? Makalenin herhangi bir bölümüne atlamak ve takip etmek için aşağıdaki bağlantıları kullanın:
İnceleme Aracının Başlatılması ve Kodun Bulunması
Klavyenizde CTRL + Shift + I (MacOS için Command + Options + I) tuşlarına basarak inceleme aracını başlatabilirsiniz.
Ayrıca bir web sayfasında herhangi bir yere tıklayabilir ve tarayıcı menüsünden ‘İncele’yi seçebilirsiniz.
Araca ana tarayıcı menüsünden de erişebilirsiniz.
Google Chrome’da sağ üst köşedeki üç noktalı menüye tıklayın ve ardından Diğer araçlar ” Geliştirici araçları seçeneğine gidin.
Tarayıcı pencereniz ikiye bölünecektir.
Bir tarafta, görüntülediğiniz sayfayı göreceksiniz. Diğer tarafta ise HTML kodunu ve CSS kurallarını göreceksiniz.
Inspect dock’un konumu değişir, ancak üç noktalı menüye tıklayıp ‘Dock side’ konumunu seçerek değiştirebilirsiniz. Yukarıdaki resimde tıklanacak simgeyi görebilirsiniz.
Farenizi HTML kaynağının üzerine getirdiğinizde web sayfasındaki etkilenen alan vurgulanacaktır.
HTML kodu içindeki bir öğeye tıkladığınızda CSS kurallarının da değiştiğini göreceksiniz.
Ayrıca fare imlecini web sayfasındaki bir öğeye götürüp sağ tıklayabilir ve ‘İncele’ aracını seçebilirsiniz.
Eleman kaynak kodunda vurgulanacaktır.
Inspect Elemanında Kod Düzenleme ve Hata Ayıklama
Elemanı incele penceresindeki hem HTML hem de CSS düzenlenebilir. HTML kaynak kodunda herhangi bir yere çift tıklayabilir ve kodu istediğiniz gibi düzenleyebilirsiniz.
Ayrıca CSS bölmesindeki tüm nitelikleri ve stilleri çift tıklayıp düzenleyebilirsiniz.
Özel bir stil kuralı eklemek için CSS bölmesinin üst kısmındaki + simgesine tıklamanız yeterlidir.
CSS veya HTML’de değişiklik yaptığınızda, bu değişiklikler anında tarayıcıya yansıtılacaktır.
Bu değişiklikler tarayıcınızın geçici belleğine kaydedilecek ve web sitenizi etkilemeyecektir.
Önemli Not: Burada yaptığınız değişiklikler hiçbir yere kaydedilmez. Inspect öğesi bir hata ayıklama aracıdır ve değişikliklerinizi sunucunuzdaki dosyalara geri yazmaz. Sayfayı yenilediğinizde tüm değişiklikleriniz kaybolacaktır.
Değişiklikleri yapmak için temanıza özel CSS eklemeniz veya kaydetmek istediğiniz değişiklikleri eklemek için ilgili şablonu düzenlemeniz gerekecektir.
Inspect Element aracını kullanarak mevcut WordPress temanızı düzenlemeye başlamadan önce bir WordPress yedeği oluşturduğunuzdan emin olun.
Sitenizdeki Hataları Kolayca Bulun
Inspect aracı, sayfa yüklemesi sırasında oluşan hataları gösteren Console adlı bir alana sahiptir.
Bir hatayı ayıklamaya çalışırken veya eklenti yazarlarından destek talep ederken, herhangi bir hata veya uyarı olup olmadığını görmek için buraya bakmak her zaman yararlıdır.
Konsol sekmesini kullanarak birçok yaygın sorunu giderebilirsiniz. Örneğin, bunlar denetleme konsolu ile yapabileceğiniz yalnızca birkaç şeydir:
- Eklediğiniz bir resmin neden görüntülenmediğini öğrenin
- Bir eklenti veya tema neden düzgün çalışmıyor?
- Hangi eklentinin veya tarayıcı uzantısının çakışmaya neden olabileceği
Teknik olmayan kullanıcılar bile bir sorunun nereden kaynaklandığına dair ipuçları bulmak için buna bakabilir.
Örneğin, bir OptinMonster müşterisiyseniz ve optininizin neden yüklenmediğini merak ediyorsanız, “Sayfa slug’ınız eşleşmiyor” sorununu kolayca bulabilirsiniz.
Inspect Element Console ve SupportAlly gibi araçlar daha iyi müşteri desteği almanıza yardımcı olur. Teknik destek ekibi, sorunlar hakkında ayrıntılı geri bildirim sağlamak için inisiyatif alan müşterileri sever.
Inspect Aracı Mobil Cihazlarda (iOS veya Android) Nasıl Kullanılır?
Üreticiler çoğu mobil kullanıcının bunları kullanmayacağını varsaydığından, geliştirici seçenekleri mobil tarayıcılarda varsayılan olarak açık değildir.
Mobil sorunlar için sorun gidermenin ve inceleme aracını kullanmanın en kolay yolu. masaüstü tarayıcınızdaki mobil emülasyon özelliğini kullanmaktır.
Daha sonra üst kısımdan veya ekran boyutlarından bir cihaz seçebilirsiniz. Chrome daha sonra sizin için bu ekran boyutunu taklit edecektir.
Teftiş Unsuru Hakkında Sıkça Sorulan Sorular
Aşağıda, kullanıcılarımız tarafından Inspect aracının kullanımı hakkında en sık sorulan sorulardan bazıları yer almaktadır.
1. Inspect aracını herhangi bir web sitesinde veya sadece kendi web sitemde kullanabilir miyim?
Evet, inceleme aracını herhangi bir web sitesinde kullanabilirsiniz. Herhangi bir web sitesinin arkasındaki kodu görmek için sağ tıklayıp tarayıcı menüsünden İncele aracını seçmeniz yeterlidir. Diğer web sitelerindeki kodları incelemek, kendi CSS/HTML becerilerinizi öğrenmenin ve geliştirmenin hızlı bir yoludur.
2. Tarayıcımda Inspect aracını neden bulamıyorum?
Google Chrome, özellikle birden fazla uzantı sağ tıklama menüsüne kendi seçeneklerini eklediğinde, sağ tıklama menüsündeki İncele seçeneğini gizleyebilir.
Ancak, tarayıcı ekranının sağ üst köşesindeki üç noktalı menüye tıklayıp Diğer Araçlar ” Geliştirici Araçları‘nı seçerek İnceleme aracını her zaman açabilirsiniz. Açmak için klavyenizdeki CTRL + Shift + I (Mac’te Command + Options + I) tuşlarını da kullanabilirsiniz.
Video Eğitimi
Bonus Kaynaklar:
Kendin Yap WordPress’e yeni başlayan biri olarak web sitenizde değişiklikler yapabilmek heyecan vericidir.
Yıllar boyunca, sıfır web sitesi kurma deneyimine sahip sayısız yeni başlayanın bu alanda profesyonel olduğunu gördük.
WordPress sitenizde daha fazla şey yapmak için Inspect aracını nasıl kullanabileceğinizi daha fazla keşfetmek istiyorsanız, aşağıdaki kaynaklar iyi bir başlangıç noktası olacaktır:
- WordPress temanızı nasıl özelleştir irsiniz – Bu başlangıç kılavuzu, WordPress temanızı adım adım nasıl özelleştireceğinizi gösterir.
- WordPress’te özel CSS nasıl düzgün bir şekilde eklenir – Bu eğitimde WordPress’te özel CSS’nizi kolayca eklemenin çeşitli yolları gösterilmektedir.
- WordPress’te CSS dağıtımı nasıl optimize edilir – Çok fazla bireysel CSS dosyası performansı düşürebilir. Bu eğitimde WordPress hızını artırmak için CSS dağıtımının nasıl optimize edileceği gösterilmektedir.
- Varsayılan WordPress tarafından oluşturulan CSS hile sayfası – Bu kullanışlı kılavuz size WordPress’in varsayılan olarak farklı öğelere eklediği birçok CSS sınıfını gösterecektir. Daha sonra bu CSS sınıflarını özel CSS kodunuzda kullanarak bu öğelerin görünümünü değiştirebilirsiniz.
Umarız bu makale Inspect Elementinin temellerini ve WordPress sitenizde nasıl kullanacağınızı öğrenmenize yardımcı olmuştur. Tema geliştirme becerilerinizi hızlandırmak için varsayılan WordPress tarafından oluşturulan CSS hile sayfamızı veya profesyoneller için nihai WordPress araç setimizi de görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
The mobile emulation feature is the best tool, just the other day, I was trying to figure out why my site wasn’t displaying well on iPhones. The emulation feature allowed me to quickly diagnose that an element wasn’t scaling down correctly.
Being able to visually debug responsive issues across various devices without needing to test on physical devices saves so much time.
Mrteesurez
This is helpful, I don’t know one can actually edit the code and see changes in real time.
My question:
1) Can I use the inspection tool to see the PHP or anynbackend code ??
2) Is there anyway I can use the inspection tool on mobile ??
WPBeginner Support
You would not use the inspection tool to see PHP it is normally used to check HTML, CSS, and JavaScript. For mobile it is not available by default but there are apps to add the ability to mobile.
Yönetici
Jiří Vaněk
Thanks for this guide. Now is much more easier for me to find CSS class in code for making any changes. The CSS code can make AI for me, becouse Im not good at coding, and rest Im able to find in isnpect tools. That is all what I need.
hossam ismail
hey!
I can’t change my heading font size in mobile version.
For example,
Heading font size in desktop is 24px
but it is also 24px in mobile ??
this issue especially with heading, how can i fix this?
WPBeginner Support
If you reach out to your theme’s support they should be able to let you know how they have set up the mobile CSS
Yönetici
Esmeraldo Lleshi
How can I make the html that i edited to stay permanently?
WPBeginner Support
It would depend on what was edited, if is CSS then you would add the CSS under Appeaance>Customize>Additional CSS. If it is more of an HTML change then you would want to check with your theme’s support as WordPress themes are built with templates, for a bit more on that you would want to take a look at our glossary page here: https://www.wpbeginner.com/glossary/template/
Yönetici
Milan
Once I make changes, how I can save update/edited page? Whenever I close it it revert to previous version.
WPBeginner Support
Inspect element is for testing the changes, if you’re editing the CSS you would want to copy the CSS you added and paste it under Appearance>Custmize>Additional CSS
Yönetici
Kristina
My dilemma is that once I inspect an element, I’d like to know what PAGE in my theme this element appears on. So there’s an e lement that appears as part of my theme, throughout my site, and when I inspect element, i can see the code, but can’t determine what portion of the theme has it, so that I can change it in the child theme, permanently. I tried editing one page, directly from the inspect element pane, but as soon as I exited and returned, my change was gone and it was “back to normal.”
Anyway to inspect to element and determine where I can find it in my theme files?
Thank you.
WPBeginner Support
Hi Kristina,
You can try to guessing the template file based on where the code appears in the page layout. For example, if it is in header section then you may look for it in the header.php file. You can also download all your theme files via FTP and then use a tool that allows you to search for text in multiple files at once. One such app is Notepad++ (for Windows), open the app and the go to Search > Search in Files.
Yönetici
stephanie
This is such great content, thanks a lot for sharing.
Little problem for me, nothing happens when i click ‘inspect element’ in my chrome browser. Any help or suggestions?
WPBeginner Support
Hi Stephanie,
If you are using any browser extensions, then uninstall all of them. If the problem persists, then try reinstalling Google Chrome.
Yönetici
avinash
Sir,
Actually i am new in wordpress can you tell where from i can edit the Html elememt and where i
can found the element.style in wordpress theme.
Isaac Anim
This is a very great post you have here. But I need to draw your attention to something.
I don’t know if you have noticed but this particular article has being stolen. It looks like the culprit only goes around the web stealing content. As I write this comment, he has copied about 5 of my articles.
The website is even not in Google Search. I was just checking how my website looks in Yandex search results and I happen to find this thief.
Here is the link to the stolen article
WPBeginner Support
Thanks for notifying us, we will take the appropriate action.
Yönetici
Ethan
I am curious, why isn’t your website mobile friendly?
Saviour Sanders
I’ve been wondering about the same thing.
Sila Mahamud
Customizing WordPress for DIY Users and you have also highlighted What is Inspect Element or Developer Tools? You also given us the video tutorial the basic of inspect elements. To be honest that is great content wherever you share with us. Thanks a lot for sharing this content with us.
WPBeginner Support
Glad you found it helpful. Don’t forget to follow us on Facebook for more WordPress tutorials.
Yönetici