Terminal DevTools

Addy Osmani
Addy Osmani

DevTools Terminal adalah ekstensi Chrome DevTools baru yang menghadirkan daya terminal ke browser Anda. Jika Anda pernah beralih konteks antara Chrome dan command line untuk tugas seperti: menarik aset, menggunakan git, grunt, wget, atau bahkan vim - Anda mungkin dapat menggunakan ekstensi ini untuk menghemat waktu.

DevTools Terminal sangat bagus untuk penyesuaian command line yang cepat.
Terminal DevTools berguna untuk penyesuaian command line cepat dari dalam Chrome selagi mengerjakan aplikasi web Anda.
Menggunakan cURL di Terminal DevTools.
Setelah menggunakan Copy as cURL di Panel Jaringan, saya dapat dengan mudah menempelkan perintah lengkap ke DevTools Terminal dan menjalankannya.

Mengapa menggunakan terminal di browser?

Selama pengembangan, Anda mungkin terbiasa bekerja dengan beberapa alat berbeda: editor teks untuk pembuatan, browser untuk pengujian dan proses debug, dan terminal untuk memperbarui paket, header curling, atau bahkan proses build menggunakan Grunt.

Menjalankan Grunt di DevTools Terminal.
Menjalankan tugas build dengan Grunt tanpa harus keluar dari browser.

Penggantian konteks antar-alat selama pengembangan dapat mengganggu dan dapat menyebabkan inefisiensi. Sebelumnya kita telah berbicara tentang cara (untuk jenis project tertentu) Anda dapat men-debug dan menulis kode langsung di dalam Chrome DevTools menggunakan Ruang Kerja tanpa meninggalkan browser.

Alur kerja Git.
Alur kerja git yang lengkap juga dimungkinkan. Sangat cocok untuk perbedaan git setelah menulis di Workspace.

DevTools Terminal (oleh Dmitry Filimonov) menyelesaikan cerita itu, sehingga memungkinkan untuk membuat kode, men-debug, dan membangun dari dalam jendela yang sama. Anda mendapatkan akses ke tab, ctrl, dan bahkan warna Git sehingga Anda tidak asing lagi dengan terminal yang biasa Anda gunakan dalam alur kerja harian Anda.

Alur kerja

Alur kerja pembuatan.
Mulai project baru dengan git clone, yeoman, atau alat lain yang dapat diakses melalui terminal.

Alur kerja pribadi saya untuk menulis di Chrome sekarang terlihat sedikit seperti ini:

  • Terminal DevTools menggunakannya untuk git clone repositori GitHub, touch file baru, atau menjalankan yo (yeoman) untuk membuat aplikasi. Jika mau, saya juga dapat meluncurkan server baru untuk melihat pratinjau aplikasi
  • Ruang kerja: mengedit dan men-debug aplikasi web saya di dalam Chrome. Jika saya meluncurkan server lebih awal, saya dapat memetakan proyek lokal ke file jaringan saya. Saya dapat menggunakan Sass atau Less dan meminta perubahan preprosesor CSS saya dipetakan kembali ke file CSS.
  • Terminal DevTools: Sekarang saya dapat berkomitmen pada kontrol sumber, menggunakan pengelola paket (npm, bower) untuk menghapus dependensi atau menjalankan proses build (menggerutu, make) untuk menghasilkan versi yang dioptimalkan dari aplikasi yang sama.
  • Meskipun butuh waktu untuk membiasakan diri dengan pengaturan jendela, menyenangkan bisa melakukan sebagian besar hal yang saya butuhkan dari dalam browser.
Menggunakan {i>ls<i} di terminal.
Cantumkan nama file di direktori kerja saat ini menggunakan ls. Sangat cocok untuk memvisualisasikan direktori di luar Workspace.

Penginstalan

Terminal DevTools dapat diinstal dari Chrome Web Store. Jika Anda pengguna Mac atau Linux, setelah menambahkannya ke Chrome, cukup "Periksa Elemen" atau Ctrl + Shift + I untuk membuka DevTools dan Anda akan dapat mengaksesnya melalui tab “Terminal” baru. Pengguna Windows harus menghubungkan ekstensi ke terminal sistem menggunakan proxy Node.js. Untuk mendapatkan penyiapan ini, instal modul devtools-terminal dari npm: npm install -g devtools-terminal

Kemudian, buka jendela command line baru dan jalankan devtools-terminal. Selanjutnya, buka DevTools dan di tab "Terminal", hubungkan ke server menggunakan opsi konfigurasi default. Anda akan dapat menyesuaikan port dan alamat lebih lanjut jika diperlukan.

Terminal DevTools mendukung penyesuaian detail koneksi selama penyiapan.

Batasan

DevTools Terminal memiliki beberapa batasan yang perlu diperhatikan. Tidak seperti Terminal.app atau iTerm2 di Mac, Terminal.app atau iTerm2 belum mendukung tab, beberapa jendela, atau pemutaran histori. Namun, Anda dapat membuka tab Chrome sebanyak yang Anda inginkan, yang masing-masing dapat memiliki instance DevTools Terminal-nya sendiri. Tindakan ini dapat dilakukan dari layar Aplikasi Chrome:

Terminal DevTools mendukung tema terang dan tema gelap.
Saat ini, ekstensi mendukung tema terang dan tema gelap default.

Ekstensi ini saat ini bergantung pada NPAPI, yang akan dihentikan secara bertahap tahun depan demi penggunaan Native Messaging API. Penulis DevTools Terminal, Dmitry Fillimonov, berencana untuk beralih dari NPAPI dan mendukung API ini atau Native Client API dalam waktu dekat.

Kesimpulan

DevTools Terminal (dan ekstensi yang serupa dengannya, seperti Auxilio) dapat membantu Anda menghindari beralih antara editor, browser, dan command line selama pengembangan. Meskipun terminal dalam browser mungkin tidak cocok untuk semua orang, Anda mungkin menemukan ekstensi ini sebagai pelengkap yang berguna untuk alur kerja Anda dan kami mendorong Anda untuk mencobanya dan melihat bagaimana Anda menyukainya.