Cara menggunakan DEBUGG pada JavaScript

1 September 201412 August 2022

Proses debugging bagi developer javascript bisa sangat melelahkan. Untungnya beberapa browser modern mempunyai fitur Developer Tools. Nah Dev Tools itu punya fitur console, dimana kita bisa mengakses fungsi/variabel javascript lewat command line di browser. Bagaimana cara debug javascript melalui browser?

Contoh menggunakan Google Chrome (bisa juga memakai Firefox) View > Developer > JavaScript Console untuk mengaktifkan jendela developer console.

Ada 2 fungsi console yang sering saya gunakan, yaitu console.log() dan console.table()

Semisal kita punya variabel object

var data = [  
    { name: "Andi", age: "21", city: "Tuban" },  
    { name: "Ani", age: "25", city: "Trenggalek" },  
    { name: "Adi", age: "30", city: "Kediri" }  
];

Nah melalui jendela developer console, kita bisa mengetahui isi variabel data dengan menggunakan perintah

console.log(data)

atau

console.table(data)

Yah kira-kira begitu, kalau ada yang bingung silahkan tanya saja atau langsung ke dokumentasi resminya di https://developer.mozilla.org/en-US/docs/Web/API/console

Dah gitu aja cara debug javascript melalui console di browser 🙂

Oh iya, baca juga cara Menghindari error javascript console.log di browser lama.

sumber: http://www.hongkiat.com/blog/tabular-data-browser-console/ 

console, javascript, log, table

Jika Anda menguji aplikasi web dengan perangkat yang menjalankan Android 4.4 atau yang lebih tinggi, Anda dapat melakukan debug pada halaman web dari jarak jauh dalam WebView dengan Developer Tools Chrome, selagi melanjutkan dukungan ke versi Android sebelumnya. Untuk informasi selengkapnya, lihat Proses Debug Jarak Jauh di Android.

Jika Anda tidak memiliki perangkat yang menjalankan Android 4.4 atau yang lebih tinggi, Anda dapat men-debug JavaScript menggunakan API console JavaScript dan melihat keluaran pesan ke logcat. Jika Anda memahami proses debug halaman web, baik dengan Firebug atau Web Inspector, maka Anda mungkin terbiasa menggunakan console (seperti console.log()). Framework Webkit Android mendukung sebagian besar API, sehingga Anda dapat menerima log dari halaman web saat proses debug di Browser Android atau di WebView Anda sendiri. Dokumen ini menjelaskan cara menggunakan konsol API untuk proses debug.

Lihat resource terkait berikut:

• Proses Debug Jarak Jauh di Android
• Men-debug Aplikasi Anda

Menggunakan API Konsol di Browser Android

Saat Anda memanggil fungsi console (di objek window.console DOM), hasilnya akan muncul di logcat. Misalnya, jika halaman web Anda menjalankan JavaScript berikut:

    console.log("Hello World");
    

Maka pesan logcat akan terlihat seperti ini:

    Console: Hello World http://www.example.com/hello.html :82
    

Format pesan mungkin terlihat berbeda bergantung pada versi Android mana yang Anda gunakan. Pada Android 2.1 dan yang lebih tinggi, pesan konsol dari Browser Android akan diberi tag dengan nama "browser". Pada Android 1.6 dan yang lebih rendah, pesan Browser Android diberi tag dengan nama "WebCore".

WebKit Android tidak menerapkan semua API konsol yang tersedia di browser desktop lain. Namun, Anda dapat menggunakan fungsi logging teks dasar:

• console.log(String)
• console.info(String)
• console.warn(String)
• console.error(String)

Fungsi konsol lainnya tidak menimbulkan error, tetapi mungkin tidak berperilaku sama seperti yang Anda inginkan dari browser web lain.

Menggunakan API Konsol di WebView

Semua API konsol yang ditampilkan di atas juga didukung saat menjalankan proses debug di WebView. Jika Anda menargetkan Android 2.1 (API level 7) dan yang lebih tinggi, Anda harus memberikan WebChromeClient yang menerapkan metode onConsoleMessage() agar pesan konsol dapat muncul di logcat. Lalu, terapkan WebChromeClient ke WebView dengan setWebChromeClient().

Misalnya, untuk mendukung API level 7, kode Anda untuk onConsoleMessage(String, int, String) mungkin terlihat seperti:

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.webChromeClient = object : WebChromeClient() {

        override fun onConsoleMessage(message: String, lineNumber: Int, sourceID: String) {
            Log.d("MyApplication", "$message -- From line $lineNumber of $sourceID")
        }
    }
    

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebChromeClient(new WebChromeClient() {
      public void onConsoleMessage(String message, int lineNumber, String sourceID) {
        Log.d("MyApplication", message + " -- From line "
                             + lineNumber + " of "
                             + sourceID);
      }
    });
    

Namun, jika versi terendah yang didukung adalah API level 8 atau yang lebih tinggi, sebaiknya Anda menerapkan onConsoleMessage(ConsoleMessage) sebagai gantinya. Contoh:

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.webChromeClient = object : WebChromeClient() {

        override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
            consoleMessage?.apply {
                Log.d("MyApplication", "${message()} -- From line ${lineNumber()} of ${sourceId()}")
            }
            return true
        }
    }
    

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebChromeClient(new WebChromeClient() {
      public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d("MyApplication", cm.message() + " -- From line "
                             + cm.lineNumber() + " of "
                             + cm.sourceId() );
        return true;
      }
    });
    

ConsoleMessage juga menyertakan objek MessageLevel untuk menunjukkan jenis pesan konsol yang sedang dikirim. Anda dapat membuat kueri level pesan dengan messageLevel() untuk menentukan tingkat keparahan pesan, lalu gunakan metode Log yang sesuai atau mengambil tindakan lain yang sesuai.

Baik Anda menggunakan onConsoleMessage(String, int, String) atau onConsoleMessage(ConsoleMessage), saat Anda menjalankan metode konsol di halaman web, Android memanggil metode onConsoleMessage() yang sesuai sehingga Anda dapat melaporkan error. Misalnya, dengan kode contoh di atas, pesan logcat dicetak seperti yang terlihat berikut:

    Hello World -- From line 82 of http://www.example.com/hello.html
    

Logcat

Logcat adalah alat yang mengeluarkan log pesan sistem. Pesan tersebut menyertakan pelacakan tumpukan saat perangkat menampilkan error, serta pesan yang tertulis dari aplikasi Anda dan yang tertulis dengan menggunakan API console JavaScript.

Untuk menjalankan logcat dan melihat pesan dari Android Studio, pilih View > Tool Windows > Logcat.

Untuk informasi selengkapnya, lihat Menulis dan Menampilkan Logs dengan Logcat.