Platform Guide
Integrations LibraryGet in Touch!

Inspecting Kinetic Forms in the Browser

Suggest Edits

Using Developer Tools to Debug Kinetic Portals

Front-end development with the Kinetic Platform is deeply integrated with standard browser development tools. Whether you're troubleshooting form issues, testing field logic, or inspecting API calls, tools like the Console, Sources, and Network tabs in your browser's DevTools are essential for understanding how your portal behaves under the hood.

This guide walks through how to effectively use these tools to inspect form state, debug workflows, and monitor real-time interactions with the platform.

Console Tab

The Console tab is your first stop when something doesn’t look right. It logs warnings, errors, and messages from your JavaScript environment—and gives you an interactive playground to test logic and access runtime variables.

Example: Inspect a Field Value

If your form has a field with the name Key, you can check its value directly in the console:

K('field[Key]').value();

This is especially useful for checking hidden fields or validating the results of dynamic logic.

Breakpoints + Console Power

When you've paused execution at a breakpoint (via the Sources tab), the console is scoped to that exact moment in the code. You'll have access to all in-scope variables and can manually inspect or modify them. This combination makes it easy to debug conditional rendering, submission logic, or constraint issues.

Sources Tab

The Sources tab allows you to view and debug the actual code running in your portal, whether it's your React bundle, custom form overrides, or vendor libraries.

Key Use Cases

  • Set breakpoints in bundle.config overrides, field renderers, or form callbacks
  • Step through CoreForm logic or submission handlers
  • Inspect variables like form, field or response during form lifecycle events
  • View your live bundle and verify that the latest code is deployed

Example Workflow

  1. Open a form powered by your custom bundle.
  2. In the Sources tab, find your React component or override logic.
  3. Set a breakpoint in a render, callback or onCompleted function.
  4. Trigger the form action (load, change, submit).
  5. Use the console to inspect values in real time. No need to reload or recompile.

Network Tab

The Network tab is where you can watch every API call the portal makes, from form loads to submissions to bridge resource lookups. It's vital for debugging data flow, permission issues, and server errors.

What to Look For

  • submissionSearch calls from searchSubmissions()
  • submission POST/PUT requests triggered by form submissions
  • Bridge requests fetching external data
  • OAuth/session traffic (e.g., login redirects, token refreshes)

Example Debugging Flow

  1. Open the Network tab and filter by XHR to isolate SPI calls.
  2. Submit a form or load a record list.
  3. Click on a request to see:
  • Headers: endpoint, auth token, content type
  • Payload: what values were submitted
  • Response: any success data or failure details
  1. Identify common issues:
  • 403 Forbidden user lacks permissions
  • 422 Unprocessable Entity failed constraints or missing values
  • 500 Internal Server Error bridge or backend failures

💡

Use the Preview sub-tab to quickly view JSON results, especially when rendering submission lists, custom field data, or bridge responses.

Tips for Effective Debugging

  • Always test with include: ['values', 'details'] in your queries to get rich submission data
  • Use console.log() statements during development and remove them before deploying
  • Bookmark forms or views with real-world test data for faster debugging
  • If you're overriding form behavior, add temporary breakpoints or console output inside your bundle.config to verify it’s being applied

Related Topics

Updated 8 days ago