Console Logs

Similar to the browser console, Draftbit's Console Log let's you see errors and log data during development. It's used as a debugging tool.

You can pass values, such as the result of an Action or a Variable, and it will be printed to the console log. The console logs are located in the bottom drawer of the Builder. Any errors resulting from your Custom Code or Imported Packages will also be logged here.


Not available in Draft Preview

Console Logs are only viewable when your Draftbit app is being previewed using Web, iOS, and Android previews.


Remove any console logs before publishing your app

Make sure to remove any console.log() statements in your app's Custom Code, and remove or disable any Console Log Actions, when you are preparing to publish your app.

These statements can cause performance and security issues in your production app. Reference.

Using Log to Console action with API requests

If you want to debug or preview the result of an API request action, you can add a Log to Console as a subsequent action. The results of the Log to Console action are shown in the Console Logs tab in the Bottom Panel.

Here is an example of a POST API request that returns an error when using a Log to Console action is used as subsequent action to the API request action. The error message is visible when the Console Logs tab is toggled from the Bottom Panel.

If the previous API request to submit new data returns a response and not an error, it logs the result (if) returned by the API request.

Console Log statements in Custom Code

If you have a console.log() statement in your Custom Code, you will see them logged in the Console Logs tab in the Bottom Panel.

In the example below, there is a Custom Code Component defined as follows:

import React from 'react';
import { Text } from 'react-native';

export const MyComponent = () => {
  console.log('Console statement inside Custom Code Component triggered!');

  return <Text>Hello world!</Text>;

Once the screen that uses the MyComponent from the above snippet is in focus, you can view the results of the log statements in the Console Logs tab (as shown below).