Jika Anda terlibat dalam pemrograman web, ini berarti Anda tidak perlu berbicara tentang betapa pentingnya debugging dalam pekerjaan Anda. Seringkali, pustaka eksternal digunakan untuk menulis data ke log, memformatnya atau menampilkannya di layar, tanpa memperhitungkan fakta bahwa pemrogram memiliki perintah JavaScript untuk bekerja dengan konsol yang dibuat di browser. Dan konsol ini memiliki kemampuan yang jauh lebih serius daripada yang terlihat pada pandangan pertama.
Mungkin hal pertama yang dipikirkan banyak orang ketika mereka mengatakan "konsol" adalah perintah
console.log() . Namun, dia hanya satu dari banyak tim semacam itu. Materi, terjemahan yang kami terbitkan hari ini, didedikasikan untuk fitur-fitur yang bekerja dengan konsol JavaScript.
Apa itu konsol?
Konsol JavaScript adalah mekanisme yang diintegrasikan ke dalam peramban modern yang mendukung alat pengembangan bawaan dalam antarmuka baris perintah. Menggunakan konsol, pengembang dapat melakukan hal berikut:
- Lihat log kesalahan dan peringatan yang terjadi di halaman web.
- Berinteraksi dengan halaman web menggunakan perintah JavaScript.
- Aplikasi debug dan bekerja dengan DOM langsung dari browser.
- Selidiki dan analisis aktivitas jaringan.
Secara umum, konsol memberi pengembang kemampuan untuk menulis kode JavaScript langsung di browser, memantau apa yang terjadi pada halaman, dan mengelola proses ini.
Metode console.log, console.error, console.warn dan console.info
Mungkin metode yang paling umum digunakan ketika bekerja dengan konsol adalah
console.log() ,
console.error() ,
console.warn() dan
console.info() . Anda dapat mengirimkan satu atau lebih parameter ke metode ini. Sistem menghitung nilai masing-masing dan menggabungkan semua hasil menjadi string, yang sebagian dipisahkan oleh spasi. Dalam hal objek atau array, perintah ini memungkinkan Anda untuk menampilkannya dalam bentuk yang memungkinkan Anda untuk melihat isinya. Ini tampilannya.
Menggunakan berbagai perintah untuk menampilkan data ke konsolMetode Console.group
Metode
console.group() memungkinkan Anda mengumpulkan serangkaian panggilan ke
console.log() (serta metode serupa lainnya) ke dalam grup yang isinya dapat diciutkan dan diperluas. Menggunakan metode ini sangat sederhana: setelah memanggil
console.group() (atau setelah
console.groupCollapsed() , jika Anda ingin segera menampilkan grup yang diperkecil), Anda harus menempatkan semua panggilan
console.log() yang perlu dikelompokkan. Kemudian, di akhir set perintah yang ingin Anda kelompokkan, Anda perlu menempatkan perintah
console.groupEnd() . Pertimbangkan sebuah contoh.
function doSomething(obj){ console.group('doSomething Profile'); const _data = new Date(); console.log('evaluating data: ', _data); const _fullName = `${obj.firstName} ${obj.lastName}`; console.log('fullName: ', _fullName); const _id = Math.random(1); console.log('id: ', _id); console.groupEnd(); } doSomething({"firstName":"Riccardo", "lastName":"Canella"});
Setelah eksekusi fragmen kode ini, berikut ini akan sampai ke konsol.
Mengelompokkan data di konsol menggunakan metode console.group ()Metode konsol.tabel
Setelah saya mengetahui tentang keberadaan metode
console.table() , hidup saya telah berubah selamanya. Misalnya, menggunakan perintah
console.log() untuk menampilkan kode JSON atau array JSON besar adalah mimpi buruk. Metode
console.table() memungkinkan Anda untuk menampilkan struktur data yang rumit di dalam tabel bagus, kolom yang dapat diberi nama dengan mengirimkannya sebagai parameter (tidak semua browser mendukung fitur ini
console.table() ). Ini adalah contoh bekerja dengan tim ini.
const typeOfConsole = [ {name:'log', type:'standard'}, {name:'info', type:'standard'}, {name:'table', type:'wow'} ]; console.table(typeOfConsole); const mySocial = { facebook: true, linkedin: true, flickr: true, instagram: true, VKontaktebadoo: false }; console.table(mySocial, ["Socials", "I'v an account"]);
Apa yang terjadi, dan tampak hebat, dan dapat memfasilitasi debugging.
Tabularisasi output menggunakan console.table ()Metode console.count, console.time dan console.timeEnd
Metode
console.count() ,
console.time() dan
console.timeEnd() dapat disebut sesuatu seperti pisau Swiss untuk pengembang yang terlibat dalam aplikasi debugging. Jadi, metode
console.count() memungkinkan Anda untuk menghitung jumlah panggilan Anda sendiri dan menampilkannya di konsol dengan label yang diberikan. Metode
console.time() memungkinkan Anda untuk menjalankan timer bernama (nama dilewatkan sebagai parameter, hingga 10.000 timer dapat hadir pada satu halaman). Untuk menghentikan timer tertentu, perintah
console.timeEnd() digunakan dengan label timer dilewatkan sebagai parameter. Dia menghentikan timer dan menampilkan waktu pekerjaannya di konsol. Berikut cara menggunakan metode ini.
console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for(var i = 0; i < arr.length; i++){ arr[i] = new Object(); const _type = (i % 2 === 0) ? 'even' : 'odd'; console.count(_type+'added'); } console.timeEnd('total');
Dan di sini adalah hasil kerja kode ini di konsol.
Menggunakan metode console.count (), console.time (), dan console.timeEnd ()Metode Console.trace dan console.assert
Metode
console.trace() dan
console.assert() memungkinkan Anda untuk mengeluarkan informasi tumpukan dari tempat mereka dipanggil. Bayangkan Anda sedang mengembangkan perpustakaan JS dan ingin memberi tahu pengguna di mana kesalahan terjadi. Dalam kasus seperti itu, metode ini bisa sangat berguna. Metode
console.assert() mirip dengan
console.trace() , perbedaan antara keduanya adalah
console.assert() hanya akan menampilkan data jika kondisi yang diteruskan tidak terpenuhi. Inilah cara bekerja dengan metode ini.
function lesserThan(a,b){ console.assert(a<b, { "message":"a is not lesser than b", "a": a, "b": b }); } lesserThan(6,5); console.trace("End");
Sangat mudah untuk memperhatikan bahwa output yang dihasilkan oleh sepotong kode ini terlihat seperti sesuatu yang mirip akan terlihat di Bereaksi (atau di perpustakaan lain) ketika kerangka kerja melaporkan pengecualian.
Hasil dari menggunakan perintah console.assert () dan console.trace ()Perintah untuk bekerja dengan konsol dan kode produksi
Perintah untuk bekerja dengan konsol diperlukan pada tahap pengembangan aplikasi dan debugging. Ini berarti bahwa ketika saatnya tiba untuk rilis produk, perintah-perintah ini harus dihapus dari kode. Anda dapat melupakannya dan, beberapa saat setelah merakit versi produksi proyek, perhatikan bahwa program menulis sesuatu ke konsol ketika tidak diperlukan. Jangan memuat komputer dengan pekerjaan yang tidak perlu, meskipun tampaknya tidak signifikan seperti mengeluarkan data ke konsol. Pada saat yang sama, mengingat fakta bahwa perintah untuk bekerja dengan konsol dapat berguna selama pengembangan aplikasi, yang terbaik adalah tidak menghapusnya dari kode sumber program secara permanen, tetapi menghapusnya hanya dari versi produksinya. Di sini, dana untuk merakit proyek akan datang untuk membantu kami. Jadi, saya terus menggunakan Webpack, baik di tempat kerja maupun di proyek saya sendiri. Alat ini memungkinkan Anda untuk menghapus semua perintah yang tidak perlu untuk bekerja dengan konsol (itu dapat membedakannya dari perintah lain) dari rakitan produksi menggunakan
uglifyjs-webpack-plugin .
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; ..... optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // uglifyOptions: { // comments: false, compress: { // warnings: false, // drop_console: true }, } })] : [] }
Konfigurasi ini sangat sederhana, tetapi memudahkan pekerjaan sehari-hari programmer dan menghilangkan masalah perintah konsol yang terlupakan.
Ringkasan
Pada artikel ini, kami berbicara tentang beberapa perintah yang berguna untuk bekerja dengan konsol. Mereka memungkinkan, menggunakan alat yang merupakan bagian dari browser modern, untuk memecahkan banyak masalah yang menyertai pengembangan dan debugging aplikasi JavaScript sisi klien.
Pembaca yang budiman! Apa jenis perintah untuk bekerja dengan konsol JavaScript yang Anda gunakan?
