Fatih Acet

Fatih Acet

Frontend Engineer at GitLab.com

twittergitlabgithubenvelope-olinkedinyoutubeinstagram

Chrome DevTools'da coklu satir kod yazip calistirmak

Bildiginiz gibi Chrome Dev Tools’daki Console tab’inde yeni satir eklemek icin Shift+Enter ve kodu calistirmak icin Enter yapmak gerekiyor. Aslinda bunun tam tersi seklinde olsa hayat benim icin daha guzel olabilirdi. Cunku varsayilan textarea davrasinisi olarak yeni satiri Enter ile ekliyoruz keza yillar once kullandigimiz Firebug bu sekilde calisiyordu.

Chrome’da bunun ters oldugunu bilmeme ragmen Console’a coklu satir bir sey yazip calistirmak istedigim zaman bu ozellik hep ayagima takilip duruyordu. Bunu tersine cevirmeyi yillardan beri arar dururum ama bugun denk geldigim bir Dev Tools ozelligi ile sorunuma bir cozum bulabildim.

Chrome Dev Tools Snippets

Chrome icinde yer alan Sources tab’indeki Snippets alt tabini kullanarak yeni bir snippet ekleyerek burada coklu satir JavaScript yazabiliyorsunuz ve Command+Enter ile calistirabiliyorsunuz.

Snippets tab’inde sag tiklayarak yeni bir snippet olusturduktan sonra istedigimiz gibi coklu satir yazip calistirabiliyoruz.

http://monosnap.com/image/5VGmDpsBvRLQ0rEKc642y7xy30f1vR.png

Ayrica autocomplete ve syntax highlighting de calisiyor.

http://monosnap.com/image/zIR4EDksS8kmAxnMGDQlEKHUSi3tO9.png

Bir baska guzel ozellik ise burada degistirdiginiz script’in eski versiyonlari da saklaniyor.

http://monosnap.com/image/FXMN8xC3iy2zyOwagLOGdnpK8B0AnL.png

Son olarak Snippets tab’indeyken Console’u da actigimiz zaman tadindan yenmiyor gercekten.

http://monosnap.com/image/tCnHKNYltwyz7ub44aGwXhi4mRGKFt.png

Benim gibi arayip bulamayanlara gelsin efenim.

BONUS: bgrins/devtools-snippets

Comments

NYC'den Fatih Arslan ve SF'dan Cihangir Savas'la beraberiz

Bundan yaklasik 2 ay once Fatih Arslan ve Cihangir Savas'la beraber bir yayin yapma fikrini konusuyorduk. Ortak takvim ayarlamanin zorlugundan dolayi 2 ay sonraya takvimlere bir etkinlik eklemistim...

VLOG #02: Amsterdam'da ev aradigim ikinci gun

16 Kasim 2017'de Amsterdam'a tasiniyoruz. O yuzden, Amsterdam'a ev bakmak amacli 3 gunluk kisa bir gezi yaptim. Amsterdam'daki ilk gunumu VLOG haline getirmistim. https://www.youtube.com/watch?v=zc...

VLOG #01: Amsterdam'a ev bakmaya gidiyorum

Kasim 2017'de Amsterdam'a tasinmayi dusunuyoruz. O yuzden, Amsterdam'a ev bakmak amacli 3 gunluk kisa bir gezi yaptim. Amsterdam'daki ilk gunumu VLOG haline getirmek istedim ama cidden zor...

Evde Kahve Yapiyoruz: Espresso, AeroPress, V60 ve Chemex

Merhaba arkadaslar Bugun uzun zamandan beri sozunu verdigim kahve videosunu sonunda yayinliyorum. Sonmez Kartal ile beraber ayni gunde size 4 farkli kahve cesidini bir arada yaptik....

Blockchain ve Bitcoin Canlı Yayını Alp Işık ve Erman Taylan

Alp Isik YouTube: https://www.youtube.com/user/isikalp91 Twitter: https://twitter.com/alppIsik Erman Taylan Twitter: http://twitter.com/etaylan e-Bulten: http://bulten.ermantaylan.com 23...

Uzaktan Çalışmak: SSK, Vergi ve Fatura işleri

http://uzaktancalismak.com Bu videoda uzaktan calismakla ilgili yayinladigim sitede eksik kalan ve en cok merak edilen konulardan olan SSK, vergi ve fatura gonderme konularina degindim. Uzaktan...

Koddaki bir yerin neresi tarafindan cagrildigini bulmak

Merhabalar Bu videoda console.trace'den bahsettim. Eger ulasmaya calistiginiz yerin neresi tarafindan cagrildigini bilmiyorsaniz bir debugger koyup stack trace'e bakabilirsiniz ama console.t...

Sahibinden.com'da karsima cikan Nijeryali dolandiricilar

Merhaba arkadaslar Bu videoda Sahibinden.com'da MacBook Pro satarken karsima cikan Nijeryali dolandiricilarin hikayesini anlattim. Ozellikle bu videoyu bu tarz bir sey karsiniza cikarsa...

Uzaktan calisilacak is bulmak

Bu videoda uzaktan calismak isteyenlere is bulma konusunda yardimci olacak konulardan bahsettim. CV ve cover letter'in oneminden, farkli islere basvurmaktan cekinmeye gerek olmadigindan ve...

Logitech C930e ve Samson Go Mic inceleme

Merhaba arkadaslar Bu videoda sizlere yeni aldigim Logitech C930e kamera ve Samson Go Mic'in bir incelemesini ve Nikon D3200 DSLR, Go Pro Hero Session ve MacBook 2016 kamerasi ile karsilastir...

Kod Review nedir? Neden yapilir?

Bu videoda sizlerin istegi uzerine kod review konusunu anlattim. Kod review'in ne oldugundan, neden onemli oldugundan ve kod review yapan kisinin nelere dikkat ettiginden bahsettim. Umarim...

MacBook Mevzusu: Neden çok da şey yapmamak lazım?

Bu videoda gerek emaillerde gerekse canli yayinlarda olsun sikca sorulan sorulardan biri olan MacBook konusuna degindim. Sorular genelde, "Neden herkes MacBook kullaniyor?", "MacBook olmazsa...

Tips & Tricks #1: DevTools Break on ozelligi

Yeni bir video konsepti olan Tips & Tricks playlist'inde sizlere gunluk hayatta kullandigim, isimi kolaylastiran, yillarin deneyimi ile ogrendigim kolayliklari 2-3 dk icinde anlatmaya calisacagim....

Yazilim gelistirme uzerine Soru Cevap Yayini - 2

Bu aralar bebek telasindan dolayi yeni videolara pek zaman ayiramiyorum. O yuzden bir, bir bucuk saat arasinda sorulariniza cevap vermeye calistigim bir yayin oldu. Katilan ve izleyen herkese...

Ozel saglik sigortasi deneyimimiz

Bebegimiz ozel saglik sigortasi kapsaminda dunyaya geldi. Ayrica kisisel olarak 2 yildan fazla suredir ozel saglik sigortasi kullaniyorduk. Ozellikle hamilelik boyunca yapilan kontroller, dogum...

Frontend Developer kimdir? Neleri bilmelidir?

Bu video sizlere Frontend Developer'in kim oldugunu, sorumluluklarini ve neleri bilmesi gerektigini anlattim. Umarim yararli bir video olmustur. Begendiyseniz kanala abone olmayi, begenmeyi...

Kullandigim ve isime yarayan bazi uygulamalar

Bu video uzaktan calisirken ozellikle mobil datami ve zamanimi verimli kullanmama yardimci olacak bir kac uygulamayi sizle paylasmak istedim.Bu uygulamalari kullanmak icin illa uzaktan calismaniza...

Server Side Rendering Nedir? VueJS ile basit SSR yapalim

Bu videoda Server Side Rendering'in ne olduguna bakip VueJS ile yaptigim basit bir ornegi sizlerle paylastim. Blogumda YouTube'da yayinladigim videolarin yer almasini istiyordum. Bunun icin...

Sektorde Ingilizcenin onemi ve Ingilizce ogrenme ipuclari

Bu videoda esim Didem ile yazilim sektorunde Ingilizce'nin onemi ve Ingilizce konusunda kendinizi gelistirmeniz icin ipuclari verdigimiz bir video kaydettik. Ingilizce bilmeyenlere ve bilip...

Kolay IK Yazilim Kampi: Genclere egitim ve is firsati

Arkadaslar Kolay IK bir egitim kampi duzenliyor. Yaklasik bir bucuk ay surecek bu egitimde HTML, CSS, JS, NodeJS, Laravel, PostgreSQL, MongoDB, Redis, Jenkins ve Git gibi teknik konularin yani...

Git nedir? Neden ve nasil kullaniyoruz?

Ne nedir'in ikinci videosunda Git'den bahsettim. Git'in ne oldugundan, neden kullandigimizdan, oneminden, SSH key'lerin ne oldugundan ve nasil olusturulacagindan, en onemli git komutlari olan...

Vue JS, Vue Router ve Vuex SPA Bölüm 4

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in dorduncu bolumu. Bir onceki bolumde uygulamanin anasayfasini yapmistik, bu bolumde film detay sayfasini yapacagiz...

Terminal nedir? Neden kullaniyoruz?

Ne Nedir playlist'inin ilk videosunda Terminal'in ne olduguna ve gunluk hayatimizda neden ve nelerde kullandigimizi anlattim. Mac OS icinde yuklu gelen Terminal ile iTerm 2 arasindaki farklara,...

GitLab'da 1. yılım bitti. Ne yaptım, ne ögrendim?

Mayis 2016'da calismaya basladigim GitLab'da bir yil gecirdim ve gectigimiz bir yilin ozetini yapmak icin GitLab'e nasil girdim? Ben GitLab'e girdigimde GitLab Frontend'i nasildi, suan nasil?...

Vue JS, Vue Router ve Vuex SPA Bölüm 3

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in ucuncu bolumu. Bu bolumde uygulamamizi ayaga kaldirip, anasayfamizi yapacagiz. Vue Router ve Vuex'in yeni...

Vue JS, Vue Router ve Vuex SPA Bölüm 2

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in ikinci bolumu. Bu bolumde Vuex ve Vue Router'in temel prensiplerinden bahsedicem. Uygulama videolarini ise...

Vue JS, Vue Router ve Vuex SPA Bölüm 1

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in birinci bolumu. Uygulama videolarini ise Playlist'de bulabilirsiniz. Vue JS ile ilgili detayli Turkce egitim...

Vue JS, Vue Router ve Vuex SPA Trailer

Vue JS, Vue Router ve Vuex kullanarak gelistirdigim Single Page Application'in tanitim videosu. Uygulama videolarini ise Playlist'de bulabilirsiniz. Vue JS ile ilgili detayli Turkce egitim...

Çayı demledin mi? Aile boyu uzaktan çalışma deneyimlerimiz

Bu videoda kanalima esimi de davet ettim, uzaktan calisma tecrubelerimizden bahsettik ve keyifli bir sohbet ortaya cikti. Umarim izlerken siz de keyif alirsiniz. Begendiyseniz like etmeyi,...

Jstanbul Meetup: GitLab'da VueJS'i nasil ve neden kullaniyoruz?

Bu videoda 8. Jstanbul Meetup'da, daha once yapmis oldugum bir VueJS sunumu ile bir giris yaptim ve ardindan GitLab'da neden VueJS tercih ettigimizden, gecisi nasil yaptgimizdan, nerelerde...

All Aspects of Remote Working

The talk about Remote Working I gave in Bilkent University, Ankara.

Yazilim gelistirme ve Frontend uzerine soru cevap canli yayini

Yazilim gelistirme ve Frontend dunyasi uzerine merak ettiginiz sorulara canli yayinda cevap vermeye calisacagim.

Genclere ve kendini gelistirmek isteyenlere tavsiyeler

Bu videoda yazilim sektorunde yeni giris yapacaklara ve kendisini gelistirmek isteyenlere nacizane tavsiyelerimi aktariyorum. Frontend ve yazilim gelistirme uzerine yeni videolar gelmeye...

JS egitim serisi ve Pro JS kitabi hakkinda

Dogukan Guven Nomak ve Fatih Kadir Akin ile cektigimiz jQuery Biliyorum Ama JavaScript Bilmiyorum videosunda bahsettigim JS kitabi ve JS egitimleri hakkinda cok sayida yorum, mention ve DM...

VueJS 11: Swagger ile API tasarlayalim

Bu videoda, Swagger kullanarak basit bir API tasarlayacagiz ve bir sonraki videoda bu API'i kullanarak Vue Form islemleri yapacagiz. Swagger cok uzmani oldugum bir arac degil ama bu videoya...

VueJS ile GitLab icin proje yapiyorum

GitLab'de bulunan merge request widget'ini VueJS ile refactor ediyorum. Canli yayinda bakalim neler olacak :)

VueJS 10: Vue JS icin Unit ve E2E testler yazmak

Bu videoda Vue JS uygulamamizi test etmekteyi anlattim. Vue JS uygulamamiz icin Karma, Mocha ve Chai ile Unit test ve Nightwatch ile E2E testler yazdik. Konu listesini ve zamanlamalari asagida...

VueJS 09: BONUS 1: Eksik kalan kisimlar

Bu videoda bir onceki videolardan eksik kalan kisimlari anlattigim bir video oldu. Filters, nextTick, event modifiers gibi guzel ve farkli konuladan bahsettim. Konu listesini ve zamanlamalari...

VueJS 08: Vue Router

Serinin 8. videosunda Vue Router'dan bahsettim. Vue Router kullanarak biri basit digeri daha kapsamli iki ornek yaptik. Bu videoda yazilan kodlari GitHub ve GitLab'de bulabilirsiniz. https://githu...

VueJS 07: Giphy API kullanarak yeni bir app yapalim

Bu videoda bir onceki videoda kullanmaya basladigimiz vue-cli ile yeni bir proje olusturduk ve Giphy API'ini kullanarak yeni bir app yaptik. Diger app'den farkli olarak bu app'de vue dosyalarini...

VueJS 06: vue-cli ve .vue dosyalarinin yapisi

Bu videoda vue-cli'dan ve vue-cli'in kullanimindan bahsettik. Basit bir webpack projesi olusturup, HTML, CSS ve JS'imizin bir arada oldugu .vue dosyalarinin yapisindan ve .vue dosyalarinin...

VueJS 05: Components

Bu videoda bir onceki ornekte yaptigimiz Amazon Cart benzeri ekrani Vue Component'i olacak sekilde refactor ettik. Vue'da Component'ler cok onemli bir yer kapliyor, umarim faydali bir video...

VueJS 04: Computed Properties ile dinamik data kullanimi

VueJS serisinin dorduncu videosu. Daha onceki videolari kanalimda bulabilirsiniz. Bu videoda VueJS'deki Computed Properties'den bahsettim. Bir onceki ornekte yaptigimiz Amazon Shopping Cart...

VueJS 03: Amazon benzeri bir shopping cart yapiyoruz

Bu videoda VueJS'deki v-for ozelligini kullanarak dinamik olarak server'dan cektigimiz data ile Amazon Shopping Cart benzeri bir ekran yapiyoruz. Bu videoda yazdigim kodlari GitHub ve GitLab'de...

VueJS 02: Hello World!

Bu videoda VueJS'e kod uzerinde giris yaptik. Konu listesi 00:40 GitHub VueJS reposu 01:16 Vue.js anasayfasi 02:19 Awesome Vue 03:00 Vue Hello World 06:55 v-if 09:35 v-show ve v-if/v-show...

VueJS 01: VueJS ile Uygulama Geliştirme Sunumu

VueJS ile ilgili video serimin ilk videosu. Bu video'da daha önce yaptığım VueJS sunumunu tekrar anlattım, bu sayede VueJS'e genel bir bakış atmış olduk. Sunumun kendisine http://slides....