Terminal DevTools adalah ekstensi Chrome DevTools baru yang menghadirkan kemampuan terminal ke browser Anda. Jika Anda pernah beralih konteks antara Chrome dan command line untuk tugas seperti: mengambil aset, menggunakan git, grunt, wget, atau bahkan vim, Anda mungkin akan menemukan bahwa ekstensi ini dapat menghemat waktu.
Mengapa menggunakan terminal di browser?
Selama pengembangan, Anda mungkin terbiasa menggunakan beberapa alat yang berbeda: editor teks untuk menulis, browser untuk pengujian dan proses debug, serta terminal untuk mengupdate paket, header curl, atau bahkan proses build menggunakan Grunt.
Harus beralih konteks antar-alat selama pengembangan dapat mengganggu dan dapat menyebabkan inefisiensi. Sebelumnya, kita telah membahas cara (untuk jenis project tertentu) Anda dapat men-debug dan menulis kode langsung di dalam Chrome DevTools menggunakan Ruang Kerja tanpa keluar dari browser.
Terminal DevTools (oleh Dmitry Filimonov) melengkapi cerita tersebut, sehingga memungkinkan Anda membuat kode, men-debug, dan mem-build dari dalam jendela yang sama. Anda mendapatkan akses ke tab, ctrl, dan bahkan warna Git sehingga terasa familiar dengan terminal yang biasa Anda gunakan dalam alur kerja harian.
Alur kerja
Alur kerja pribadi saya untuk menulis di Chrome kini terlihat seperti ini:
- Terminal DevTools menggunakannya untuk
git clonerepositori GitHub,touchfile baru, atau menjalankanyo (yeoman)untuk membuat aplikasi. Jika mau, saya juga dapat meluncurkan server baru untuk melihat pratinjau aplikasi - Ruang kerja: mengedit dan men-debug webapp saya di dalam Chrome. Jika meluncurkan server sebelumnya, saya dapat memetakan project lokal ke file jaringan. Saya dapat menggunakan Sass atau Less dan membuat perubahan preprocessor CSS dipetakan kembali ke file CSS.
- Terminal DevTools: Sekarang saya dapat melakukan commit ke kontrol sumber, menggunakan pengelola paket (npm, bower) untuk mengambil dependensi atau menjalankan proses build (grunt, make) untuk membuat versi aplikasi yang sama yang dioptimalkan.
- Meskipun perlu waktu untuk membiasakan diri dengan pengaturan jendela, saya senang dapat mencapai sebagian besar hal yang saya butuhkan dari dalam browser.
Penginstalan
Terminal DevTools dapat diinstal dari Chrome Web Store. Jika Anda pengguna Mac atau Linux, setelah menambahkannya ke Chrome, Anda cukup mengklik "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 dapat menyesuaikan port dan alamat lebih lanjut jika diperlukan.
Batasan
Terminal DevTools memiliki beberapa batasan yang perlu diperhatikan. Tidak seperti Terminal.app atau iTerm2 di Mac, aplikasi ini belum mendukung tab, beberapa jendela, atau pemutaran histori. Namun, Anda dapat membuka tab baru Chrome sebanyak yang diinginkan, yang masing-masing dapat memiliki instance Terminal DevTools sendiri. Tindakan ini dapat dilakukan dari layar Aplikasi Chrome:
Ekstensi ini saat ini mengandalkan NPAPI, yang akan dihentikan secara bertahap selama setahun ke depan dan diganti dengan Native Messaging API. Penulis Terminal DevTools, Dmitry Fillimonov, berencana untuk beralih dari NPAPI dan menggunakan API ini atau Native Client API dalam waktu dekat.
Kesimpulan
Terminal DevTools (dan ekstensi yang serupa, seperti Auxilio) dapat membantu Anda menghindari beralih bolak-balik antara editor, browser, dan command line selama pengembangan. Meskipun terminal dalam browser mungkin tidak cocok untuk semua orang, Anda mungkin menganggap ekstensi ini sebagai pelengkap yang berguna untuk alur kerja Anda. Sebaiknya coba ekstensi ini dan lihat apakah Anda menyukainya.