Debugging Tips for Kintone JS

Introduction

While testing out the codes in the tutorials and samples sections, it is possible that issues may occur where the code doesn't run as intended. When there's a bug in the code, it's not always obvious of where and why the bug occurred.
This article goes through some regular debugging methods for Kintone customizations to alleviate these issues.

Use the developer console

Modern web browsers now have tools for debugging JavaScript,HTML and CSS. These "developer tools" can be opened up in the browsers using the following shortcuts:

  • Chrome: DevTools
    - Windows: Ctrl + Shift + I
    - Mac: Command + Option + I

  • Firefox: Development tools/Firebug
    - Windows: Ctrl + Shift + I
    - Mac: Command + Option + I

  • Internet Explorer / Edge : Developer tools
    - Windows: F12

US_1__1_.PNG

 

Simulate an error

This tutorial will use the Chrome developer tool. Simulate an error using some buggy code with the following steps:

  1. Create an App with a Text field, give it a field code of "company" and save the form.
  2. Copy the below code to a text editor, save it as a .js file, and upload it to the JavaScript and CSS customization settings.
  3. Add a new record with some data, and save it.

After saving the record, the code should run on the record details page, but it fails half-way through due to an error.

Check the console

  1. Open the Developer Tool (on the page where the code stopped running)
  2. Click the Console tab
  3. Check the error log

US_2__1_.PNG


As shown in the image above, the error shows up in the Console tab.

In this case, the console is reporting that the the "value" property could not be found from something that was "undefined". Looking back at the code, line 4 is stating the "value" property of record["companyname"], but no fields in this App have a field code named "companyname" - the code then treats this as an undefined value. The bug can be fixed by changing record["companyname"] into record["company"].


Typing wrong names is a common error when writing code, but can be found easily in the console log.
Even simple mistakes like writing "alret" instead of "alert" could be a cause to the issue:

US_3__1_.PNG

Useful features of the developer tools

The Chrome devtools can also pause running codes by adding break points, and also view the contents of variables. Check the below link for basic usage of the Chrome DevTools:

Get Started with Debugging JavaScript in Chrome DevTools


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

debug.gif

Resolving Kintone related errors

The errors introduced so far are specific to JavaScript. Here are some common scenarios where Kintone related errors occur.

When the code doesn't run at all

When the code doesn't seem to run at all, check the following:

  • Was the latest JavaScript file uploaded onto the App? Was the code saved before uploading?
  • If the JavaScript file was online (instead of uploading it), is Kintone accessing the correct link to the file?
  • Has the Kintone event been specified correctly?
  • Are all the brackets in the code properly closed?

When REST API related errors appear

Check the following when REST API related errors are appearing:

  • Permissions
    Check that the authentication used for the REST API has permission to control the target App/Record/Space.
    REST APIs that control records can be authenticated by either API Tokens or Password Authentication.
    In the case for API tokens, check what permissions the API tokens have by viewing the App's API Token settings
    In the case for Password Authentication, check the permissions of the user by viewing the App's Permission settings. It is possible that a user has control over records they have created, but not over records that other users have created.
  • Field codes
    Check that the field code stated in the code is the same as the field code of the field that should be modified. It is a common mistake to specify the field name, instead of the field code.
  • JSON format
    It is easy lose track of the structure of the JSON being constructed, causing it to have invalid format. Use online services like JSONLint to check your JSON structure.
  • Required fields
    Kintone fields have a "Required field" option. If this is enabled, those fields must be specified when adding records with REST APIs.
  • Lookups
    Lookups need the correct settings when adding/updating their data with REST API.
    When searching data through a lookup on the GUI, the lookup may give back a number of choices for the searched key word. However, REST APIs will only work with Lookups if it is set up to give back a single choice. With this logic in mind, the REST API will only work if the field set in the "Key Field" option has the "Prohibit Duplicate Values" option turned on (access settings for the datasource App are necessary to turn this option on).

  • Asynchronous requests
    When retrieving data from App A, and trying to add that data into App B, it may appear that the code tries to add empty content into App B. This is because Kintone REST APIs are asynchronous - depending on how the code is written, the code may be trying to place data into App B before the data is successfully retrieved from App A. The Kintone REST API Request (a JavaScript function that can be used for calling Kintone REST APIs) supports promises that will wait for the asynchronous request to finish before calling the next API.

Other errors

Debugging mobile views

By making changes to the URL of the App, the mobile layout can be viewed on the desktop browser:

  • PC View:https://{subdomain}.kintone.com/k/{appId}
  • Mobile View :https://{subdomain}.kintone.com/k/m/{appId}

mobileview.png

Finally

For other debugging issues not covered in this article, check out the following communities and a Kintone expert or fellow community member will be able to help:

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!