Debug Kintone with Google Chrome Developer Tools
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.
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.
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
-
Create a local folder that is okay to be accessed from Google Chrome.
-
Navigate to the page on the Kintone App where the customization runs. Open the developer console.
-
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.
-
In the browser header, a message with "Allow developer tools to access the selected folder" will appear. Click Allow.
-
Click the Page tab, and select the customization file to apply to the App. Right click the file and then select Save for overrides.
-
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.
-
As the file is saved, the customization 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 Event and Save 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.
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.
Then, press Enter to download the screenshot of the browser screen you are currently viewing.
