#Debug Panel

The Sparkling Debug Panel is the in-app inspector for Sparkling debug builds. Use it when you need to inspect Lynx JS logs, Sparkling Method calls, and runtime GlobalProps without connecting a desktop debugger.

It is separate from Lynx's own DevTool and long-press debug menu. Sparkling opens this panel from the bottom-left sparkling debugTag.

#Open the Debug Panel

The debugTag appears only when all of these are true:

• The app is running a debug build.
• sparkling-debug-tool is integrated.
• The host enables the debug entry:
  • Android: call SparklingDebugTool.init(...) with enableFloatingBall = true.
  • iOS: call SparklingDebugTool.setFloatingBallEnabled(true).

Sparkling Go and the default app template already do this in their debug-only host wiring.

To open the panel, tap the blue sparkling tag pinned to the bottom-left edge of the screen:

Release builds do not show the tag. Sparkling also no longer installs a two-finger long-press entry, so this click target does not compete with Lynx's native debug gestures.

#Integration guide

#Apps created from the template

Apps created with the default Sparkling template already include the Debug Panel in debug builds and exclude it from release builds.

On Android, the template uses the remote Maven artifact debugImplementation("com.tiktok.sparkling:sparkling-debug-tool:<version>") and keeps the debug-tool setup in app/src/debug. The debug source set calls:

SparklingDebugTool.init(
    application,
    SparklingDebugTool.Config(
        enableJsConsole = true,
        enableFloatingBall = true,
    ),
)

The release source set is a no-op and does not initialize the debug tool.

On iOS, the template has two app targets:

The template wraps every debug-tool call with canImport(Sparkling_DebugTool). When the debug pod is linked, startup calls SparklingDebugTool.setup() and then enables the bottom-left debugTag with:

SparklingDebugTool.setFloatingBallEnabled(true)

This means a template-created app has the Debug Panel in its debug package by default, while its release package does not ship the panel, DebugRouter, or Lynx DevTool dependencies.

#Custom Android host

If you are integrating Sparkling into an existing Android app, keep the debug tool in debug-only dependencies:

dependencies {
    implementation("com.tiktok.sparkling:sparkling:<version>")
    debugImplementation("com.tiktok.sparkling:sparkling-debug-tool:<version>")
}

Then initialize it from debug-only app code:

SparklingDebugTool.init(
    application,
    SparklingDebugTool.Config(
        enableJsConsole = true,
        enableFloatingBall = true,
    ),
)

enableFloatingBall = true is the switch that makes each eligible SparklingView show the bottom-left sparkling debugTag.

#Custom iOS host

If you are integrating Sparkling into an existing iOS app, link Sparkling-DebugTool only in the development target or debug configuration. Then guard the calls so production builds can compile without the debug-tool module:

#if canImport(Sparkling_DebugTool)
import Sparkling_DebugTool
#endif

#if canImport(Sparkling_DebugTool)
SparklingDebugTool.setup()
SparklingDebugTool.setFloatingBallEnabled(true)
#endif

setup() enables the Lynx debug flags and DebugRouter integration. setFloatingBallEnabled(true) shows the bottom-left sparkling debugTag and wires the default tap action to the Debug Panel.

#Log

The Log tab shows JS console output emitted by the current Lynx page.

Use it to:

• Inspect console.log, console.warn, and console.error output in the app.
• Filter logs by level.
• Search log text.
• Clear the current log buffer.
• Copy a log row when you need to paste it into an issue or PR comment.

#Sparkling Method

The Sparkling Method tab records JS-to-native method invocations.

Use it to:

• See which Sparkling Method APIs were called.
• Check the platform, namespace, result code, and duration for each call.
• Spot calls that are still running or returned an error.
• Tap a row to expand request parameters and response data.
• Copy a method record for debugging bridge issues.

#GlobalProps

The GlobalProps tab shows the latest runtime snapshot for the live LynxView.

Use it to:

• Confirm which container and template URL are active.
• Inspect globalProps passed into Lynx.
• Expand queryItems, including the bundle or URL used to load the current page.
• Search keys and values.
• Refresh the snapshot after navigation or runtime updates.
• Copy a key-value row when reporting environment-specific issues.

#When the tag is missing

Check these in order:

1. Confirm the app is a debug build.
2. Confirm sparkling-debug-tool is included in the native target.
3. Confirm the host calls SparklingDebugTool.init(...) on Android or SparklingDebugTool.setup() plus setFloatingBallEnabled(true) on iOS.
4. On Android, the sparkling-debug-tool provider must be discoverable by the Sparkling SDK. The default template wires this through the debug source set.