Start using Avo Visual Debugger in code

When implementing analytics on web and mobile apps it’s hard to know if the events are being sent successfully or not, and if they are being sent at the correct time.

Our Visual Debuggers provide a way to control the events flow in your app, making implementing analytics way easier and pleasant in web and mobile products.

Web Visual debugger is integrated into the Avo generated file and mobile debuggers are distributed as standalone open source libraries.

Each Avo function will automatically show events in the debugger with timestamp and all the properties.

If Avo detects errors the visual debugger will highlight those.

Debuggers are disabled in the noop mode

Accessing the web debugger

The Web Debugger is on by default in development.

To disable the Web Debugger in development provide webDebugger = false to initAvo options:

JavaScript
Copy
1
Avo.initAvo({ webDebugger: false, ... }, ...);

To access it in production add the ?avo_debug=1 query parameter to the URL.

Setting up the mobile debuggers

The following pseudocode would give you the idea, head to platform docs for specific integration instructions.

1. Create the debugger

JavaScript
Copy
1
val debugger = Debugger()

2. Pass debugger when you initialize Avo, so Avo can show all tracked events

JavaScript
Copy
1
Avo.initAvo(AvoEnv.DEV, ..., debugger)

3. Show the debugger

JavaScript
Copy
1
debugger.showDebugger(this, DebuggerMode.bar)

4. Post your own events

JavaScript
Copy
1
2
3
4
5
6
7
debugger.post(
    timestamp,
    "EventName",
    errors: [{propertyId:"id0", message:"error in property 'event prop' with id 'id0'"}],
    eventProperties: [{id:"id0", name:"event prop", value:"val"}],
    userProperties: [{id:"id1", name:"user prop", value:"val"}]
);

Open source repositories and platform specific integration docs

We store the source code, platform docs and example apps in the corresponding github repositories.

• Android
• iOS
• React Native