Kategoriler
Kodlama

Chrome DevTools ile ekran görüntüsü almak

Chrome DevTools(Geliştirici Araçları) kullanarak sayfanın bir kısmını, belirli bir elementi/öğeyi veya tümünün ekran görüntüsünü almak.

Google Chrome veya Chrome altyapısını kullanan diğer(Microsoft Edge, Opera) tarayıcılarda Geliştirici araçlarını(DevTools) kullanarak birçok şey yapılabiliyor, bunlardan biri de ekran görüntüsü almak ve sanırım bu geliştirici olmayan insanların da işine yarayabilir.

Web sayfasının ekran görüntüsü almak konusu tasarımcılar için de önemli, elbette işletim sisteminin kendi ekran görüntüsü alma aracını da kullanabilirdiniz ancak tasarımcıysanız ve sayfa büyükse veya sayfa ekrana sığmıyor tam boyutuyla gerçek görünümde bir ekran görüntüsü almak istersiniz yada sayfadaki sadece bir elementin görüntüsünü almak da isteyebilirsiniz bunun için Chrome’un Geliştirici araçlarındaki ekran görüntüsü alma işlevini kullanmanız en iyisi olacaktır.

Chrome Screenshot Specific Element
Chrome Screenshot Specific Element

Kullanması çok basit, normal Chrome Geliştirici aracını/DevTools(F12) açın, ardından görüntüsünü almak istediğiniz elemanı seçin, ardından CTRL+Shift+P tuş kombinasyonunu girin ve konsola “secreenshot“(Secreenshot yerine “>capture” da yazabilirsiniz.) yazın bunu yaptığınızda size birkaç ekran görüntüsü alma seçeneği sunacaktır istediğinizi seçip kaydedebilirsiniz. Eğer full size secreenshot seçerseniz sayfa ne kadar uzun veya geniş olursa olsun tamamının görüntüsünü ekran çözünürlüğünüze göre alacaktır, eğer node Inspect the element seçeneğini seçerseniz o an seçmiş olduğunuz(Inspect the element) öğenin görüntüsünü alacaktır, diğer normal secreenshot görünen ekranı kaydeder ve area secreenshot ise size bir seçme aracı sunar seçtiğiniz alanı kaydedersiniz.

chrome screenshot node

Açıkçası Chrome’da reklam engelleyici(uBlock Origin) ve kendi yaptığım özel birkaç eklenti harici bir eklenti/uzantı kullanmıyorum çünkü profesyoneller için aslında bunlar boş işler öyle abartıldığı gibi bir kolaylık sunmuyorlar hepsi amatörler için.

Chrome DevTools hakkında daha fazla yardım ve bilgi için: https://developer.chrome.com/docs/devtools/

Kolay gelsin.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr