Debug with Developer Tools

Contents

Overview

When debugging Kintone customizations, using Developer Tools is essential. This article introduces how to use the browsers’ built-in Developer Tools for Kintone Customizations.

Prepare Developer Tools

Shortcuts

The Developer Tools can be opened up in browsers using the following shortcuts:

Browser Tool Name Windows Shortcut Mac Shortcut
Chrome DevTools Ctrl + Shift + I ⌘ + Option + I
Firefox Firefox Developer Tools Ctrl + Shift + I ⌘ + Option + I
Edge Developer Tools F12 ⌘ + Option + I

Using Developer Tools on desktop view

On the desktop browser, navigate to a Kintone page that needs debugging. Open the Developer Tools to debug scripts that run on that page.

Screenshot of the Developer Tools opened up on the desktop view Kintone page

Using Developer Tools on mobile view

On the desktop browser, navigate to a Kintone page that needs debugging. The mobile view of the page can be checked by inserting /m within the URL. For example:

  • desktop view URL: https://{subdomain}.kintone.com/k/{appId}
  • mobile view URL: https://{subdomain}.kintone.com/k/m/{appId}

Screenshot of the Developer Tools opened up on the mobile view Kintone page

Debug JavaScript errors

Solving “Cannot read property of ‘value’ of undefined”

A common error displayed in the console when debugging Kintone is the Cannot read property error. Screenshot of console showing a Cannot read property error

This usually occurs when an incorrect Field Code (External link) is stated within the code. For example, the code may have been intended to reference a field with the Field Code of company. Instead, a non-existent Field Code companyname may have been stated.

1
2
3
4
5
6
7
8
(function() {
  'use strict';
  kintone.events.on(['app.record.detail.show'], function(event) {
    var record = event.record;
    alert(record.companyname.value);
    return event;
  });
})();

The bug can be fixed by changing record.companyname.value into record.company.value.

Solving “Uncaught ReferenceError: xxx is not defined”

Another common bug is the xxx is not defined error.

Screenshot of console showing a xxx is not defined error

This is usually due to a non-existent variable being declared in the script. If the variable is declared, but the error continues to be displayed, there may be other reasons. First, check that the variable is available in the current scope. Second, check that the variable is spelled correctly.

1
2
3
4
5
6
7
8
(function() {
  'use strict';
  kintone.events.on(['app.record.detail.show'], function(event) {
    var record = event.record;
    alret(record.company.value);
    return event;
  });
})();

For the example script above, alert was incorrectly declared as alret, causing the error to be displayed.

Adding breakpoints

Developer Tools commonly come with a feature to add breakpoints. Running code can be paused, and the contents of variables can be checked. For more information, check the Chrome Developers page (External link) for debugging code with breakpoints.

Running Kintone APIs

Kintone APIs can also be run when typed directly into the console. For example, the Get Record Details API can be run in the console to get the record data of the currently viewed record.

A gif of running a Kintone JavaScript API in the console

Debug REST API errors

If the error seems to be specific to a REST API call, check the following:

  • Permissions Check that the authentication method used for the REST API has permission to access the target App/Record/Space. REST APIs that access records can be authenticated by either API Tokens or Password Authentication. In the case of API tokens, check what permissions the API tokens have by viewing the App’s API Token settings (External link). In the case of Password Authentication, check the permissions of the user by viewing the App’s Permission settings (External link). A user may have access to records they have created, but not to records that other users have created.
  • Field Codes Check that the Field Code is specified correctly. A common mistake is specifying the Field Name instead of the Field Code.
  • JSON format Check that the JSON format is correct. Use services like JSONLint (External link) to check formatting.
  • Required fields Check that the Required fields within the App are included in the request when adding or updating records.
  • Lookups Check that the Lookup field is set to retrieve unique values. Lookup fields need the correct settings when adding/updating their data with REST API. On the GUI, the Lookup field may give back a number of choices for the searched keyword. However, REST APIs will only succeed with Lookups if it is set to give back a single response. With this logic in mind, the REST API will only succeed if the field set in the Key Field option has the Prohibit Duplicate Values option turned on.
  • Asynchronous requests Check that the asynchronous requests are not causing issues. Use the Kintone REST API Request to make REST API calls from within Kintone. This method supports promises and can handle asynchronous requests smoothly.

Debug code that does not run

When the code does not seem to be running at all, try the following:

  • Check to see if the latest JavaScript file was uploaded onto the App.
  • Check to see if the uploaded file was saved before uploading.
  • Check to see if the link to the JavaScript file is correct.
  • Check to see if the correct Kintone event was stated.
  • Check to see if all brackets are closed.
  • Check to see if any Kintone JavaScript coding Guidelines were handled incorrectly.

Ask the Community

If issues still exist in the code, try sharing the issues in the following developer community forums: