Terminal DevTools

Addy Osmani

Twitter GitHub

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

Terminal DevTools berguna untuk penyesuaian command line cepat dari dalam Chrome saat mengerjakan aplikasi web Anda.

Setelah menggunakan Copy as cURL di Panel Jaringan, saya dapat dengan mudah menempelkan perintah lengkap ke Terminal DevTools dan menjalankannya.

Mengapa menggunakan terminal di browser?

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

Menjalankan tugas build dengan Grunt tanpa harus keluar dari browser.

Pengalihan konteks di antara alat selama pengembangan dapat mengganggu dan menyebabkan inefisiensi. Sebelumnya kami telah membahas bagaimana (untuk jenis project tertentu) Anda dapat men-debug dan menulis kode langsung di dalam Chrome DevTools menggunakan Workspace tanpa meninggalkan browser.

Alur kerja git yang lengkap juga dapat dilakukan. 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 membuatnya terasa familier dengan terminal yang biasa Anda gunakan dalam alur kerja harian.

Alur kerja

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

Alur kerja pribadi saya untuk penulisan 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 saya 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 sebelumnya, saya dapat memetakan proyek lokal ke file jaringan saya. Saya dapat menggunakan Sass atau Less dan memetakan perubahan preprocessor CSS kembali ke file CSS saya.
• Terminal DevTools: Sekarang saya dapat berkomitmen pada kontrol sumber, menggunakan pengelola paket (npm, bower) untuk menurunkan dependensi atau menjalankan proses build (grunt, make) untuk menghasilkan versi aplikasi yang sama yang telah dioptimalkan.
• Meskipun memerlukan waktu cukup lama untuk membiasakan diri dengan pengaturan jendela, menyenangkan dapat mencapai sebagian besar apa yang saya butuhkan dari dalam browser.

Mencantumkan nama file dalam direktori kerja saat ini menggunakan ls. Cocok untuk memvisualisasikan direktori di luar Ruang Kerja Anda.

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" yang 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. Berikutnya, 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, Terminal.app belum mendukung tab, banyak jendela, atau pemutaran riwayat. Namun, Anda dapat membuka tab Chrome baru sebanyak yang diinginkan, yang masing-masing dapat memiliki instance Terminal DevTools sendiri. Tindakan ini dapat dilakukan dari layar Aplikasi Chrome:

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

Saat ini, ekstensi ini masih bergantung pada isolio, yang akan dihentikan secara bertahap tahun depan untuk digantikan dengan Native Messaging API. Penulis DevTools Terminal, Dmitry Fillimonov, berencana untuk beralih dari PKCS untuk mendukung API ini atau Native Client API dalam waktu dekat.

Kesimpulan

Terminal DevTools (dan ekstensi yang serupa dengannya, seperti Auxilio) dapat membantu Anda menghindari beralih bolak-balik antara editor, browser, dan command line selama pengembangan. Meskipun terminal dalam browser mungkin tidak disukai semua orang, ekstensi ini dapat melengkapi alur kerja Anda dan sebaiknya Anda mencobanya dan melihat bagaimana Anda menyukainya.