Geliştirici Araçları terminali

Addy Osmani

DevTools Terminal, terminalin gücünü tarayıcınıza taşıyan yeni bir Chrome Geliştirici Araçları uzantısıdır. Öğeleri aşağı çekme, git, grunt, wget veya vim kullanma gibi görevler için Chrome ile komut satırı arasında bağlam değişikliği yapıldığını fark ederseniz bu uzantıyı zamandan tasarruf etmek için yararlı bulabilirsiniz.

DevTools Terminal, web uygulamanız üzerinde çalışırken Chrome'un içinden hızlı komut satırı düzenlemeleri için kullanışlıdır.

Ağ panelinde cURL olarak kopyala'yı kullandıktan sonra komutun tamamını kolayca Geliştirici Araçları Terminal'ine yapıştırıp çalıştırabiliyorum.

Tarayıcıda neden bir terminal kullanmalısınız?

Geliştirme sırasında muhtemelen birkaç farklı araçla çalışmaya alıştınız: Yazma için metin düzenleyiciniz, test ve hata ayıklama için bir tarayıcı, paketleri güncelleme terminali, başlıkları kıvırma ve hatta Grunt'ı kullanan bir derleme işlemi.

Tarayıcıdan ayrılmanıza gerek kalmadan Grunt ile derleme görevlerini çalıştırma.

Geliştirme sırasında araçlar arasında bağlam değiştirmek zorunda kalmak dikkat dağıtıcı olabilir ve verimsizliğe yol açabilir. Daha önce, Çalışma Alanlarını kullanarak tarayıcıdan çıkmadan doğrudan Chrome Geliştirici Araçları'nda hata ayıklama ve kod yazma işlemi yapabileceğinizden (belirli proje türleri için) bahsetmiştik.

Eksiksiz bir git iş akışı da mümkündür. Workspace'te yazdıktan sonra git diff için idealdir.

Dmitry Filimonov tarafından geliştirilen Geliştirici Araçları Terminali bu hikayeyi tamamlayarak aynı pencerenin içinden kodlama, hata ayıklama ve derleme işlemleri yapmayı mümkün kılar. Sekme, ctrl ve hatta Git renklerine erişebilir, böylece günlük iş akışınızda kullanmaya alışkın olduğunuz terminali alışkanlık haline getirebilirsiniz.

İş akışı

Yeni projelere bir git klonu, yeoman veya terminalden erişilebilen başka bir araçla başlayın.

Chrome'da yazma işlemine ilişkin kişisel iş akışım artık şu şekilde görünüyor:

• Geliştirici Araçları Terminali, bu API'yi kullanarak bir GitHub deposunu git clone veya yeni bir dosya touch kullanabilir ya da uygulama oluşturmak için yo (yeoman) çalıştırabilirim. İsterseniz uygulamayı önizlemek için yeni bir sunucu da başlatabilirim
• Çalışma alanları: Chrome'da web uygulamamı düzenle ve hata ayıkla. Daha önce bir sunucu başlattıysam yerel projemi ağ dosyalarımla eşleyebilirim. Sass veya Daha Azını kullanarak CSS ön işlemcisi değişikliklerimin CSS dosyalarımla eşlenmesini sağlayabilirim.
• Geliştirici Araçları Terminali: Artık kaynak kontrolünden yararlanabiliyor, bağımlılıkları aşağı çekmek için paket yöneticisi (npm, bower) kullanabilir veya aynı uygulamanın optimize edilmiş bir sürümünü oluşturmak için derleme işlemimi (grunt, make) çalıştırabiliyorum.
• Pencere düzenine alışmak biraz zaman alabilse de, ihtiyaç duyduğum çoğu şeyi tarayıcının içinden yapabilmek çok güzel.

Geçerli çalışma dizinindeki dosya adlarını ls kullanarak listeleyin. Dizinleri Workspace dışında görselleştirmek için idealdir.

Döşeme

DevTools Terminal, Chrome Web Mağazası'ndan yüklenebilir. Mac veya Linux kullanıcısıysanız Chrome'a ekledikten sonra "Öğeyi İncele" veya Ctrl + Shift + I tuşuna basarak Geliştirici Araçları'nı açabilirsiniz. Bu öğeye yeni "Terminal" sekmesinden erişebilirsiniz. Windows kullanıcılarının uzantıyı Node.js proxy kullanarak sistem terminaline bağlaması gerekir. Bu kurulumu yapmak için npm'den devtools-terminal modülünü yükleyin: npm install -g devtools-terminal

Ardından yeni bir komut satırı penceresi açıp devtools-terminal komutunu çalıştırın. Daha sonra, Geliştirici Araçları'nı açın ve "Terminal" sekmesinde varsayılan yapılandırma seçeneklerini kullanarak sunucuya bağlanın. Gerekirse bağlantı noktasını ve adresi daha fazla özelleştirebilirsiniz.

Sınırlamalar

DevTools Terminal'de dikkat edilmesi gereken bazı sınırlamalar vardır. Mac'teki Terminal.app veya iTerm2'nin aksine, henüz sekmeleri, birden fazla pencereyi veya geçmiş oynatmayı desteklememektedir. Bununla birlikte, istediğiniz kadar yeni Chrome sekmesi açabilirsiniz. Bu sekmelerin her birinin kendi Geliştirici Araçları Terminal örneği olabilir. Bu işlem, Chrome Uygulamaları ekranından yapılabilir:

Uzantı şu anda hem varsayılan açık temayı hem de koyu temayı desteklemektedir.

Bu uzantı şu anda NPAPI'ı kullanmaktadır. Gelecek yıl aşamalı olarak kullanımdan kaldırılarak yerine Native Messaging API'ye geçilecektir. Geliştirici Araçları Terminali yazarı Dmitry Fillimonov, yakın gelecekte NPAPI'den uzaklaşarak bu API'yi veya Native Client API'yi kullanmayı planlıyor.

Sonuçlar

Geliştirici Araçları Terminali (ve buna benzer Auxilio gibi uzantılar), geliştirme sırasında düzenleyiciniz, tarayıcı ve komut satırı arasında geçiş yapmaktan kaçınmanıza yardımcı olabilir. Tarayıcının içindeki terminal herkesin gözdesi olmasa da uzantıyı iş akışınıza uygun bir şekilde tamamlıyor olabilir. Denemenizi ve beğenip beğenmediğinizi görmenizi öneririz.