ReferenceAvo DebuggersWeb

Start using Avo Visual Debugger in code

Currently the web visual debugger is only available when you use Avo Codegen.

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:

Avo.initAvo({ webDebugger: false, ... }, ...);
Avo.initAvo(~webDebugger=true, ...);
Avo.initAvo(~webDebugger=true, ...)

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

Setting the position of the web debugger

The default position of the Web Debugger is at the bottom right of the screen. However, if you wish to move it you can pass in the position object to the webDebuggerOptions. The bubble may be anchored to each corner of the screen (BottomRight, BottomLeft, TopRight or TopLeft) and each area will take a more fine grained offset relative to it’s corner.

💡 Using WebDebuggerPosition will guide you to pass the correct parameters.

import Avo, { WebDebuggerPosition } from './path/to/Avo';
Avo.initAvo({
    webDebuggerOptions: {
        position: WebDebuggerPosition.BottomRight({ bottom: 20, right: 20 }),
    },
    ...
});
Avo.initAvo({
    webDebuggerOptions: {
        position: Avo.WebDebuggerPosition.TopLeft({ top: 20, left: 20 }),
    },
    ...
});
Avo.initAvo(~webDebuggerOptions={position: BottomLeft{"bottom": 20, "left": 30}}, ...);
Avo.initAvo(~webDebuggerOptions={position: TopRight{"top": 20, "right": 30}}, ...)
MobileOverview