JavaScript
Android
Debugging
Mobile Development
Developer Tools

How can I debug javascript on Android?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

The standard way to debug JavaScript on Android is remote debugging with Chrome DevTools. If the code runs in Chrome on the device, attach to the tab from desktop Chrome. If it runs inside an Android WebView, enable WebView debugging in the app and inspect it through the same DevTools workflow.

Remote Debugging a Chrome Tab

For JavaScript running in Chrome on Android, the basic workflow is:

  1. enable Developer Options on the device
  2. enable USB debugging
  3. connect the device to your computer
  4. open desktop Chrome and go to chrome://inspect/#devices
  5. select the tab and click Inspect

Once attached, you get the same tools you use on desktop:

  • Console
  • Sources and breakpoints
  • Network panel
  • Performance tools
  • Elements inspector

A simple debugging target might look like this:

javascript
1document.querySelector("button")?.addEventListener("click", () => {
2  const text = document.querySelector("#status")?.textContent;
3  console.log("status:", text);
4  debugger;
5});

When you trigger the event on the phone, DevTools pauses at debugger and lets you inspect variables, the call stack, and network activity.

Debugging JavaScript in an Android WebView

If the JavaScript is inside your own app's WebView, the app must allow DevTools to connect. Android's current documentation recommends enabling WebView debugging in application code.

kotlin
1import android.os.Bundle
2import android.webkit.WebView
3import androidx.appcompat.app.AppCompatActivity
4
5class MainActivity : AppCompatActivity() {
6    override fun onCreate(savedInstanceState: Bundle?) {
7        super.onCreate(savedInstanceState)
8
9        WebView.setWebContentsDebuggingEnabled(true)
10
11        val webView = WebView(this)
12        setContentView(webView)
13        webView.settings.javaScriptEnabled = true
14        webView.loadUrl("https://example.com")
15    }
16}

After that, the WebView appears in chrome://inspect/#devices, and you can debug it almost like a normal browser tab.

A practical improvement is to enable this only in development builds rather than production builds.

Console Logs Are Useful, But Not Enough

console.log is still useful for quick checks.

javascript
1function calculateTotal(items) {
2  console.log("items:", items);
3  return items.reduce((sum, item) => sum + item.price, 0);
4}

But logs are only the starting point. Real debugging often needs breakpoints, source stepping, network inspection, and DOM inspection. If you rely only on logging, you miss timing bugs, event-order issues, and failed requests that DevTools would show immediately.

Source Maps Matter for Modern Apps

If your app uses bundlers or transpilers, enable source maps. Without them, DevTools may show minified or generated JavaScript instead of the files you actually wrote.

That is especially important in React, Vue, Angular, TypeScript, and hybrid mobile stacks. Missing source maps make mobile debugging look much harder than it really is.

ADB and Newer WebView Tooling

For unusual cases, you can debug through adb and the Chrome DevTools Protocol directly, but that is a specialist path. For most developers, chrome://inspect is the correct entry point.

Android also now documents a WebView DevTools app for newer Android versions to manage WebView-specific debugging features. That can help with WebView development, but the core JavaScript inspection workflow still centers on Chrome DevTools.

Common Pitfalls

The most common mistake is forgetting to approve the USB debugging prompt on the phone. If that authorization is missing, the device may not appear in DevTools.

Another mistake is trying to debug a WebView without calling WebView.setWebContentsDebuggingEnabled(true).

Developers also often skip source maps, then wonder why the debugger shows bundled code that is almost impossible to read.

Summary

  • Use Chrome DevTools remote debugging for JavaScript running on Android.
  • Open chrome://inspect/#devices in desktop Chrome to attach to the device.
  • Enable WebView.setWebContentsDebuggingEnabled(true) for app WebView content.
  • Use breakpoints and network inspection, not just console.log.
  • Turn on source maps if your JavaScript is bundled or transpiled.

Course illustration
Course illustration