Testing and debugging apps

The Koji platform provides a variety of tools for testing templates. 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 remix your template and preview what it will look like on social media without ever leaving the editor.

Typically, you begin testing in the Koji editor. Later, you’ll want to publish the template as Unlisted, so you can test it in a production environment before giving access to general users. After you publish your Koji 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 a template’s behavior.

Using previews

Your app might provide different experiences for different modes, called contexts. For example, you might provide a different UI during a remix than when the template 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 template 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 a remix of your template on social media, the Koji platform renders a rich preview (Open Graph) image based on a screenshot of the template. 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.

Testing in the production environment

You can publish the template as Unlisted to limit access while you finish testing and development. Some features, such as the Koji feed, can only be tested in the production environment.

Publishing an unlisted template

If you publish your template as Unlisted, you can test it under exactly the same conditions as a general user, but no one else will have access unless you send them the direct link.

Click Publish Now.
Review the name and description, and update them if desired.
Select Unlisted.
Click Publish New Version.
When publishing is completed, click the link to view and test your updated template.
When you’re ready to give general users access, clear Unlisted and republish the template.

Testing feed autoplay

If you have video or audio files in your template that play automatically, you might want them to play only when they are visible to the user. For example, if the user scrolls past a video, it should start playing when it first scrolls into view and stop playing when it scrolls off screen.

To test the autoplay feature, open the published template in production and append ?feedDebug=true to the URL. The template is loaded in the feed 10 times and you can swipe or scroll through to ensure the animation starts and stops as expected.

Note	You cannot test autoplay from the Koji editor because the feed feature is not available in the staging environment.

Using the Koji debugger

The Koji debugger enables live testing and debugging in a production environment. It allows you to follow the communication happening between the Koji platform and the template.

Note	You must publish your template before you can debug it using the Koji debugger.

To open the debugger, go to Developer Portal and click the project. Then, click Open in Debugger on the project overview page. 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 the remixing experience.

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 template. For information on how to use this tool, see Viewing events.

The following contexts are available in the Koji debugger:

Default – Debug the running template. You can view real-time events from the template 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 template. You can view real-time events related to your changes.
Thumbnail – See exactly how your template 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 template generates events that are sent to the Koji platform, and the Koji platform generates events that are sent to the template. 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 template 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 remixing 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 template’s App Id and Frame Source, and VCC editor source.

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

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

To change the VCC editor source, click Modify and select Override and use different VCC editor data. The VCC data is displayed in JSON format. Then, you can directly edit the JSON code to override the live values.

If you’re working on a new version of a template that uses different VCCs from the currently published template, you can override the URL and edit the VCC data to test your changes without republishing the template.

For example, suppose the new version of the template uses a profile video where the previous version used a profile image. You can override the live data by changing the type, from image to video, and changing the name, from Profile Image to Profile Video.

Debugging database views

If your template 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 template, 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 Wallet.
If your Wallet is empty, top it up.
In another browser window, open the template in the debugger.
Try paying yourself a small amount.
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 template, the Auth grants panel allows you to view and delete them.