Test and debug apps

The Koji platform provides a variety of tools for testing apps. Many tests can be run inside the editor, so you don’t have to go back and forth between the editor and a separate tab or window. For example, you can customize your app and preview what it will look like on social media without ever leaving the editor.

Typically, you begin testing in the Koji editor. After you publish your Koji app for the first time, you will also be able to use the Koji debugger, which provides many additional tools for troubleshooting.

Testing in the Koji editor

The Koji editor provides various ways to preview an app’s behavior.

Using previews

Your app might provide different experiences for different modes, called contexts. For example, you might provide a different UI during customization than when the app is running. The preview pane enables you to preview several standard contexts inside the editor.

Learn more about previewing your Koji.

Writing to the console

You can test JavaScript code by using the console.log method, which prints to the console.

Although the console.log method can be implemented in the Koji editor, the results must be viewed in the console, which is only available when the app is run remotely. You can use the remote staging button in the preview pane to open a preview in a new browser tab. Then you can access the console through the browser’s menu. See Using browser tools for testing.

For example, the following code snippet prints Key pressed to the console every time you press a key.

    $(window).keydown(function (e) {
        KEY_STATUS.keyDown = true;
        if (KEY_CODES[e.keyCode]) {
            e.preventDefault();
            KEY_STATUS[KEY_CODES[e.keyCode]] = true;
        }
        console.log("Key pressed");
    }).keyup(function (e) {
        KEY_STATUS.keyDown = false;
        if (KEY_CODES[e.keyCode]) {
            e.preventDefault();
            KEY_STATUS[KEY_CODES[e.keyCode]] = false;
        }
    });

Testing a social media share

When a user shares an app on social media, the Koji platform renders a rich preview (Open Graph) image based on a screenshot of the app. You can preview this image by selecting More › Thumbnail in the preview pane. For information about how to customize the image, see thumbnail-image.html.

Using browser tools for testing

All modern browsers provide tools for debugging websites. For example, in Google Chrome, you can open the debugging tools by clicking More tools › Developer tools or by pressing the F12 key.

Using the Koji debugger

The Koji debugger enables live testing and debugging. It allows you to follow the communication happening between the Koji platform and the app.

To use the debugger, go to Developer Portal and click the Koji app.
Click Open in Debugger on the project overview page.
Click Open Debugger Settings. A list of the available debugging environments will be displayed. This will include one or more of the following.
- Published Koji - Available after the app is published.
- Web IDE - Available if you have your app running in the Koji code editor.
- Localhost - Always available. If you select this option, you will be prompted to enter the URL of your localhost. See Working from your development machine.

Tip	You can also open the debugger from the Koji editor by clicking Launch Debugger in the preview pane.

Debugging contexts

Your app might provide different experiences for different modes, called contexts. Select the tab of a context to display relevant tools for debugging it. For example, select Remix to display tools for debugging editable elements of your app.

Tip	To enable certain contexts, you must enable the associated entitlement. If the selected context is not enabled, a message will be displayed saying that it is unavailable.

Many contexts display an events pane for debugging communication between the platform and the app. For information on how to use this tool, see Viewing events.

The following contexts are available in the Koji debugger:

Default – Debug the running app. You can view real-time events from the app and the platform. You can also filter for events related to specific features, such as in-app purchases and auth grants.
Remix – Debug the editable elements of your app. You can view real-time events related to your changes.
Thumbnail – See exactly how your app will look if you share it on social media. Thumbnail shows sharing images in both square and rectangular format. For information about how to customize the image, see thumbnail-image.html.
Dynamic Receipt – Debug the receipts that are sent to the buyer and seller, when in-app purchases are implemented with dynamic receipts. You can view real-time events related to the receipts.

Viewing events

The app generates events that are sent to the Koji platform, and the Koji platform generates events that are sent to the app. In most cases, selecting one of the contexts in the debugger displays an events pane where you can see these events in real time, as you interact with the app in the selected context.

The information for each event includes:

The type of event – PLATFORM or TEMPLATE
The name of the event – For example: Checked
Properties set by the event (optional) – This may include descriptions of the properties.
New values for the properties (optional) – The new values for the properties set by the event.

Here’s an example of the events that you might see when you open the Remix context:

TEMPLATE
Ready

PLATFORM
Changing remix state
VALUE
Remixing

TEMPLATE
Set value
PATH
[general, title]
NEW VALUE
""

If you click in an editable field on the editable elements page, a Clicked event will appear in the event pane. For example:

TEMPLATE
Clicked
POSITION
(131, 583)

If you then change the value of the field you clicked, a Set Value event will appear. For example:

TEMPLATE
Set value
PATH
[general, goal]
NEW VALUE
"21.00"
TYPE
Skip update

Overriding settings for a debugging session

The Environment info panel displays your app’s App Id and Frame Source.

To override settings for the debugging session, click Open Debugger Settings.

You can use this override to debug an app that is running locally or in a staging environment (in the Koji editor).

Debugging database views

If your app uses the Koji database, the Database panel lists the views for every collection and enables you to view and delete records.

You can also test database transactions in the debugger.

In the Database panel, click a view to display its contents.

You can now use the Default context to test your database setup. Perform an action in the preview that should write a record to the selected collection, then click Refresh in the Database panel. If the record insertion worked, you should see the new record displayed.

Note	It may take a few seconds for the database to be updated. If the new record does not appear in the collection, try refreshing again.

To delete a record from the collection, click Delete at the end of the row. The preview will not be updated automatically. You can force it to refresh by clicking the refresh icon on the Default tab.

To open the creator’s view of the data, click the icon at the top of the panel. A list of database views opens in a new tab.

Debugging in-app purchases

If in-app purchases are implemented in your app, the In-app purchase receipts panel allows you to view and delete receipts.

You can also use the debugger to test in-app purchase transactions.

Log into your Koji account and click your profile icon to open the main menu.
Click KojiPay Wallet.
In another browser window, open the app in the debugger.
Try paying yourself a small amount.

Note
If you don’t already have money in your KojiPay Wallet, you’ll need to use a credit card to make the payment.
Go back to your Wallet to check that the transaction was successful.

If all went well, you’ll see the amount you paid deducted from your balance. The transaction will be marked pending.
You should be able to refund the transaction, resetting your balance to its original value and cancelling the transaction fee.

Note
If KojiPay doesn’t allow you to refund the transaction, it might not be finished processing the payment. Wait a minute or two and try again.

Debugging auth grants

If auth grants are implemented in your app, the Auth grants panel allows you to view and delete them.