Ingin melakukan coding JS dengan live result supaya lebih enak hasilnya? Bisa. Untuk ini kita perlu memakai alat bantu yg biasa disebut JS Playground dengan instant result.
Playcode.io
Ada beberapa opsi JS Playground yang bisa dipilih untuk keperluan ini. Di antaranya playcode.io. Ini tool online paling enak dipakai yang saya temukan
Ini paling enak dan juga powerful. Dia bisa kita jadikan IDE berbasis website. Ada harga murah USD 99 untuk lifetime, bisa dibeli via AppSumo
Quokka Free / Pro
Bisa juga dengan integrasi di Visual Studio Code, menggunakan Quokka.js
Cara installnya, tekan CTRL + SHIFT + X, lalu cari Quokka. Lalu install dengan button yang muncul.
Tidak bisa install otomatis? Download dan install manual saja. Datang ke https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode lalu download.
Lalu install dari terminal di VSCode dengan command sebagai berikut (sesuaikan path dan nama file dengan path dan file Anda):
code --install-extension "D:\path\to\file\WallabyJs.quokka-vscode-1.0.513.vsix"Setelah terinstall, tekan CTRL + SHIFT + P, lalu ketikkan Quokka dan pilih Quokka: New JS File
Setelah itu, cobalah coding dan lihat layar Output pada Visual Studio Code. Di sana akan langsung muncul hasil console.log() Anda secara live.
Bahkan tidak harus memakai console.log(), cukup sekedar menuliskan variabel di area coding pun bisa muncul nilainya di Value Explorer. Coba lihat baris 124 dan 126, tanpa console.log() dan dengan console.log() sama-sama muncul di Value Explorer.
Di mana Value Explorer? Value explorer adalah tab tambahan dari Quokka yang bisa diakses dari menu utama Visual Studio Code. Anda bisa mengakses Value Explorer ini di sebelah kiri Visual Studio Code.
Masih kurang? Di code editor juga ada, muncul otomatis valuenya di sebelah kanan variabel ataupun console.log() yang kita tuliskan pada code editor
Masih kurang? Anda bisa hover, atau taruh mouse Anda di atas variabel selama 0.5 detik, lalu nanti akan muncul tooltip yang berisikan struktur dari variabel tersebut. Di sebelah kanannya pun nanti ada scroll baru jika memang strukturnya panjang. Anda bisa scroll ke bawah untuk menampilkan real value dari variabel tersebut.
Bahkan kalau kita hover di atas console.log() yang ada di dalam looping, semua hasil loopingnya muncul di tooltip yang terbuka
Mantap, ya? Mau yg lebih advanced? Bisa beli Quokka Pro, ada fitur menarik lainnya seperti live value display. Cukup highlight sebuah expression, lalu akan muncul hasilnya, dan hasilnya bisa dicopas.
Masalah: saat membuka file lama, Quokka tidak jalan, live result tidak muncul
Solusi: itu karena node.js belum jalan untuk memproses file .js tersebut. Untuk mengatasinya silakan toggle Quokka menjadi start untuk file tersebut. Caranya, di file tersebut tekan CTRL + SHIFT + P, setelah itu toggle menjadi ON.
Setelah itu, nanti terlihat file-nya langsung diproses lagi oleh Quokka
Tidak Suka Quokka Pro?
Quokka Pro sangat powerful, tapi bisa jadi justru malah membuat sebagian kita overwhelmed oleh berbagai fitur yg ada. Kalau sudah terlanjur beli bisa refund dalam 30 hari, atau kalau tetap ingin punya licensenya bisa tetap keep license tapi switch ke versi free lagi di VSCode.
Caranya tekan CTRL + SHIFT + P, lalu ketik “Quokka Switch”, dan pilih yang free/community.
Quokka Free + Turbo Console Log
Quokka Pro menarik sekali, ya. Mungkin banyak di antara kita yang ingin upgrade jadi Pro kalau melihat fitur-fiturnya. Tapi bagaimana kalau kita tidak ada budget untuk upgrade?
Quokka Free tetap bisa kita tambahkan extension lain yang sangat bermanfaat, yaitu Turbo Console Log. Kita bisa membuat baris console.log() dengan cepat dan meaningful memakai extension ini, cukup dengan tekan CTRL + ALT + L
Anda bisa install langsung dari VSCode Extension tab, cari saja Turbo Console Log, lalu install dengan tombol yang ada di sana.
Atau download dari sini: https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
Kalau download, install dari terminal VSCode dengan command (sesuaikan path dan nama file)
code --install-extension "D:\path\to\file\ChakrounAnas.turbo-console-log-2.5.6.vsix"Lalu nyalakan di VSCode dan coba tekan CTRL + ALT + L di variabel atau fungsi yang ingin Anda log.
Contohnya pada gambar di atas, kalau kita pilih text number di baris 45, lalu kita tekan CTRL + ALT + L, dia akan otomatis menampilkan console.log() di baris 46, lengkap dengan nama file dan barisnya.
Sayangnya, informasi yang terlalu lengkap bisa membuat tampilan jadi kurang enak. Apalagi nomor baris dan kolom, serta nama file sudah jelas diberikan oleh Quokka (quokka-001.js:46:1). Jadi malah penuh tampilannya. Solusinya bisa dengan mengganti template Turbo Console Log!
Caranya, pergi ke tab extension di VSCode, masuk ke menu setting Turbo Console Log
Setelah itu hilangkan tampilan yang tidak diinginkan. Misalnya saya ingin hilangkan file name dan line number dari console.log() yang ditampilkan, juga ingin menghilangkan prefix gambar 🚀 dari console log, jadinya setting saya begini.
Akibatnya sekarang jika saya menekan CTRL + SHIFT + L pada variabel yang muncul hanya nama variabel tersebut, tanpa file name, tanpa line number, tanpa logo 🚀 di awalnya. File name dan file number ikut yang dari Quokka saja. Lebih sederhana dan lebih nyaman dilihat.
Bagaimana kalau ingin menambah variabel yang ditampilkan? Ya tinggal masukkan saja di console.log(), ketik sedikit tambahan
Turbo Console Log juga akan menambah nama fungsi dan nama class jika Anda melakukan CTRL + ALT + L pada variabel di dalam class. Jika tidak suka Anda bisa mematikannya pada config.
Tips Lain Seputar Turbo Console Log
Agar tidak error-error saat mengeluarkan tampilan di Turbo Console Log, pastikan untuk tidak memilih tanda semicolon (titik koma) pada sumber code yang ingin Anda log.
Lalu, agar tampilan di Output > Quokka ataupun di browser console lebih rapih, anda bisa menambahkan baris baru dengan kode :\n pada log message, agar tampilan nama variabel dan valuenya terpisah di Output > Quokka, sehingga lebih enak dibaca:
RunJS.App
Selain playcode ada juga yg berbasis desktop. Kita bisa menggunakan RunJS.app
Sayangnya by default RunJS behaviournya kurang enak, tidak natural. Biar terasa natural bisa dicoba dibuat settingnya seperti PlayCode.io, dengan pilih setting sbb:
Satu lagi, dia ada collapser untuk object dan array. Hanya kelihatan kalau kita hover di atas garis pemisahnya. Jadi kalau ingin tampilan rapih silakan hover ke area tersebut
Ada kekurangan lainnya, sampai saat artikel ini ditulis tidak ada nomor baris dan tidak bisa ubah posisi code editor jadi di kanan dan output di kiri (posisi favorit saya). Kurang fleksibel. Jadi saya kurang merekomendasikan walaupun murah.
Alternatif Lainnya
Ingin cari yang lain? Gooogle aja dengan keyword realtime js playground
Leave a Reply