Debugging Tips for kintone JS

Introduction

When you try out our codes in our Tips and Samples, you may regulary run into issues where the code doesn't run. When there's a bug in the code, it's not always obvious of where and why the bug occured.
Wether you are an experienced JavaScript developer, or a JavaScript newbie, this article should help you tackle your issue by going through some regular debugging methods for kintone customization.

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

Let's take a look at how we use the developer tool to resolve errors.
In this example, we will use Chrome's developer tool. Let's 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 your record, the code should run on the record details page, but it fails half-way through due to an error. Let's see where we can view this 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, we are being told that the the "value" property could not be found from something that was "undefined". If we look 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 can be 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


You can also type code directly into the console, and run them. For example, you can run Get Record Details to get the record data of the current record you are viewing.

debug.gif

Resolving kintone related errors

The errors introduced so far are specific to JavaScript. Let's go though some common scenarios where kintone related errors occur.

When the code doesn't run at all

Let's face it - we all run into this issue somewhere in our lives, and we get completely lost on the starting line. Relax, and just check the following:

  • Are you sure you uploaded your latest JavaScript file onto your App? Are you sure you've saved that code before uploading it?
  • If you've hosted the JavaScript file online (instead of uploading it), are you sure kintone is accessing the correct link to the file?
  • Have you specified the kintone event correctly?
  • Did you close all of the brackets in your code?

When you have REST API related errors

These are some checkpoints when you are getting errors from REST APIs.

  • Perimssions
    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. You may find 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 your code is the same as the field code of the field that you are trying to control. It's quite common to accidentally specify the field name, instead of the field code.
  • JSON format
    Sometimes you might lose track of the structure of the JSON you are constructing, 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 if you are adding/updating their data with REST API.
    You may have noticed on the GUI that when you search data through a lookup, the lookup may give back a number of choices for the key word that you entered. REST APIs though will only work with Lookups if it's setup up to give back only one 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 (you'll have to access the settings of the datasource app to turn this option on).

  • Asynchronous requests
    When you get data from App A, and try to add that data into App B, you may find that your code tries to add empty content into App B. This is because kintone REST APIs are asynchronous - depending on how you write your code, you may be trying to place data into App B before data is successfully retrieved from App A. The kintone REST API Request (a JavaScript function you can use 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, you can view the mobile layout on your desktop browser:

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

mobileview.png

Finally

If this article does not solve your debugging issues, you can post your queries on online community forums so that other developers can help you out:

Was this article helpful?
0 out of 0 found this helpful
Comments
Please sign in to leave a comment.