Geliştirici Araçları terminali

Addy Osmani
Addy Osmani
Twitter GitHub

DevTools Terminal, terminalin gücünü tarayıcınıza getiren yeni bir Chrome Geliştirici Araçları uzantısıdır. Örneğin öğeleri aşağı çekme, git, grunt, wget ve hatta vim gibi işlemlerde Chrome ve komut satırı arasında bağlam açısından geçiş yaptığınızı fark ederseniz bu uzantı size zaman kazandırabilir.

DevTools Terminali, komut satırında hızlı ince ayarlar yapmak için idealdir.
DevTools Terminali, web uygulamanızda çalışırken Chrome'un içinden hızlıca komut satırı değişiklikleri yapmak için kullanışlıdır.
Geliştirici Araçları Terminalinde cURL'yi kullanma.
Ağ Paneli'nde Kopyala cURL'yi kullandıktan sonra komutun tamamını DevTools Terminal'e kolayca yapıştırıp çalıştırabiliyorum.

Tarayıcıda neden terminal kullanmalıyım?

Geliştirme sırasında muhtemelen birkaç farklı araçla çalışmaya alışkınsınızdır: Yazma için metin düzenleyici, test ve hata ayıklama için tarayıcı, paketleri güncellemek için terminal, başlıklar körling ve hatta Grunt kullanarak bir derleme işlemi.

Geliştirici Araçları Terminalinde Grunt çalıştırılıyor.
Derleme görevlerini tarayıcıdan çıkmak zorunda kalmadan Grunt ile ç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 ayrılmadan doğrudan Chrome Geliştirici Araçları'nda hata ayıklamayı ve kod yazma işlemlerini nasıl yapabileceğinizden (belirli proje türleri için) bahsetmiştik.

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

DevTools Terminal (Dmitry Filimonov'dan) bu hikayeyi tamamlayarak aynı pencereden kodlama, hata ayıklama ve derleme işlemleri gerçekleştirebilir. Sekme, ctrl ve hatta Git renklerine erişerek günlük iş akışınızda kullanmaya alışkın olduğunuz terminale tanıdık gelir.

İş akışı

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

Chrome'da içerik yazmak için kişisel iş akışım şuna benziyor:

  • DevTools Terminal GitHub deposu için git clone yeni bir dosya touch çalıştırın veya uygulama oluşturmak için yo (yeoman) çalıştırın. İsterseniz uygulamayı önizlemek için yeni bir sunucu da açabilirim.
  • Çalışma alanları: Chrome'daki web uygulamamı düzenleyip hata ayıklamak istiyorum. Sunucuyu daha önce kullanıma sunduysam yerel projemi ağ dosyalarımla eşleyebilirim. Sass veya Daha Az'ı kullanabilir ve CSS ön işlemcisi değişikliklerimin CSS dosyalarımla eşleştirilmesini sağlayabilirim.
  • DevTools Terminal: Artık kaynak denetimine taahhüt verebilir, 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 çalıştırabilirim (grunt, make).
  • Pencerenin düzenine alışmak zaman alabilir, ancak ihtiyaç duyduğum şeylerin çoğunu tarayıcının içinden yapabilmek güzel.
Terminalde ls kullanma.
Geçerli çalışma dizinindeki dosya adlarını ls kullanarak listeleyin. Dizinleri Workspace dışında görselleştirmek için idealdir.

Döşeme

Geliştirici Araçları Terminali Chrome Web Mağazası'ndan yüklenebilir. Mac veya Linux kullanıcısıysanız bu uzantıyı Chrome'a ekledikten sonra Geliştirici Araçları'nı açmak için "İncele" veya Ctrl + Shift + I seçeneğini belirlemeniz yeterlidir. Artık yeni "Terminal" sekmesinden bu araca erişebilirsiniz. Windows kullanıcılarının, uzantıyı Node.js proxy'si kullanarak sistem terminaline bağlamaları gerekir. Bu kurulumu almak 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çın ve devtools-terminal komutunu çalıştırın. Ardından 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.

Geliştirici Araçları Terminali, kurulum sırasında bağlantı ayrıntılarının özelleştirilmesini destekler.

Sınırlamalar

Geliştirici Araçları Terminal'inde dikkate değer birkaç sınırlama vardır. Mac'teki Terminal.app veya iTerm2'den farklı olarak, henüz sekmeleri, birden fazla pencereyi veya geçmişin oynatılmasını desteklemez. 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:

Geliştirici Araçları Terminali hem açık temayı hem de koyu temayı destekler.
Şu an için uzantı hem varsayılan açık temayı hem de koyu temayı desteklemektedir.

Bu uzantı şu anda NPAPI'yı temel almaktadır. NPAPI'yi temel alarak önümüzdeki yıl içinde aşamalı olarak kaldırılacak ve Yerel Mesajlaşma API'si kullanılacaktır. DevTools Terminal yazarı Dmitry Fillimonov, NPAPI'yi bırakıp yakın zamanda bu API'yi veya Native Client API'yi tercih etmeyi planlıyor.

Sonuçlar

Geliştirici Araçları Terminali (ve Auxilio gibi buna benzer 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ı içinde kullanılan bir terminal herkesin gözünde olmasa da, uzantıyı iş akışınıza uygun bir tamamlayıcı olarak bulabilirsiniz. Denemenizi ve ne kadar hoşunuza gidebileceğini görmek için bu uzantıyı denemenizi öneririz.