Debug Kintone with Google Chrome Developer Tools

Contents

Overview

This article introduces tips for using the Google Chrome developer tools when customizing and debugging Kintone.

Run the Same Script Multiple Times in the Console

When to use

  • When a script is frequently executed in the browser’s console

Why it’s convenient

  • Eliminates the need to type or copy and paste the same script over and over again

How to implement

With the developer tools open, click the Sources tab. If the Snippets tab is not displayed, either widen the menu with the Page and Filesystem tabs, or click the double arrow icon and select Snippets. In the Snippets tab, click New snippet.

Name the snippet in the left-hand menu, and then enter the script to run on the right. After entering the script, press Ctrl + Enter (Windows) or Command + Enter (Mac) to execute the entered snippet. The snippet can also be executed by clicking the play button in the bottom right of the screen.

Animated GIF: With the developer tools open, click the Sources tab.

Once created and executed, the snippet will be saved in the developer tools unless manually deleted and can be reused by entering the same keyboard commands or clicking the play button.

Additionally, the Sources > Snippets screen can also be opened using the command in the developer tools Run Command menu.

Command name Execution contents
Create new snippet Display new snippet creation screen
Show snippets Display existing snippet list screen

Open the developer tools Run Command menu by clicking Customize and control Devtools (the three vertical dots next to the X button in the upper right-hand corner) and then Run command. The menu can also be opened with Control + Shift + p (Windows) or Command + Shift + p (Mac) while the developer tools screen is open.

Animated GIF: Open the developer tools Run Command menu by clicking Customize and control Devtools and then Run command.

Avoid the Need to Re-upload Customization Files

When to use

  • When a customization file applied to an App needs to be modified, but it is troublesome to continually re-upload the file each time for debugging

Why it’s convenient

  • The modified customization can be checked in the browser without uploading the locally modified customization file from the App settings page

How to implement

  1. Create a local folder that is okay to be accessed from Google Chrome.

  2. Navigate to the page on the Kintone App where the customization runs. Open the developer console.

  3. Click the Sources tab. If the Overrides tab is not displayed, either widen the menu with the Page and Filesystem tabs, or click the double arrow icon and select Overrides. Click Select folder for overrides and then select the folder created in step 1.

  4. In the browser header, a message with “Allow developer tools to access the selected folder” will appear. Click Allow.

  5. Click the Page tab, and select the customization file to apply to the App. Right click the file and then select Save for overrides.

    Animated GIF: Click the Page tab, and select the customization file to apply to the App. Right click the file and then select Save for overrides.

  6. The customization file which was selected earlier will be in the folder which was created locally. Open it with any text editor, edit it and save it.

  7. As the file is saved, the customization file displayed in the App in the browser will also be changed.

    Animated GIF: As the file is saved, the customizations file displayed in the App in the browser will also be changed.

While the developer tools are open and Enable Local Overrides is checked at the top of the Overrides tab screen, reloading the page will still apply the customization file. Un-checking Enable Local Overrides will cancel this state, but the locally edited files will remain edited.

Notes

This method does not directly edit the customization file applied to the Kintone app. It only runs the local customization file. Therefore, after editing the customization file locally, the customization file applied to the App needs to be updated separately.

Preserve the Console’s Output Log After Page Transitions

When to use

  • When debugging customizations involving page transitions

Why it’s convenient

  • Even after changing pages, logs outputted to the console remain in the console

    Use-case: When debugging the process within the event handlers for the Save Submit Event and Save Submit Success Event on the Add/Edit record pages

How to implement

Open the console in the developer tools and click the gear icon for the Console settings. Check Preserve log. Outputted logs now remain in the console even after page transitions.

Animated GIF: Open the console in the developer tools and click the gear icon for the Console settings.

Take Screenshots of the Entire Browser page

When to use

  • When it is desirable to have a screenshot that shows the entire browser screen

Why it’s convenient

  • It is possible to take a screenshot of the entire browser screen without using the functions or dedicated software installed for each OS.

How to implement

Navigate to a page where the screenshot will be taken. Open the developer tools and click Customize and control Devtools (the three vertical dots), then Run Command.The menu can also be opened with Control + Shift + p (Windows) or Command + Shift + p (Mac) while the developer tools screen is open.

Next, enter “Capture full size screenshot” on the command input screen, and the following command will appear. A screenshot will be taken.

Screenshot: Enter 'Capture full size screenshot' on the command input screen.

Then, press Enter to download the screenshot of the browser screen you are currently viewing.

Animated GIF: Press Enter to download the screenshot of the browser screen.

Reference

Chrome Dev Tools Docs (External link)