Introduction
This article introduces tips for using the Google Chrome developer tools (hereafter, developer tools) to streamline customization debugging. For those new to browser developer tools, it is recommended to read the following article first.
In particular, the following four topics will be discussed:
- Executing the same script multiple times in the console
- Avoiding the need to re-upload edited customization files over and over
- Leaving output of a log in the console after page transitions
- Taking a screenshot of the entire browser screen
Executing 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.
Avoiding the need to re-upload editing customization files over and over
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.
- Open the developer tools while on a screen of the Kintone App to apply the customization.
- 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. Unchecking 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.
Leaving the output of a log in the console 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 screen in the developer tools, and click of the developer tool, and click the gear icon for the Console settings in the upper right-hand corner of the screen.
Check Preserve log. Outputted logs will now remain in the console even after page transitions.
Taking a screenshot of the entire browser screen
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
First, open the developer tools on the screen to take a screenshot of and click 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.
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.
Finally
This article introduced a few tips for using the Google Chrome developer tools that will hopefully assist in streamlining the debugging of customizations. They are all fairly easy-to-use tips that can be implemented immediately, so try them out to reduce time spent debugging.
For the latest information on Google Chrome developer tools, also check out the Chrome DevTools documentation from the Google website.
This article was verified with the May 2020 edition of Kintone.