Efficient debugging with Google Chrome developer tools

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:

  1. Executing the same script multiple times in the console
  2. Avoiding the need to re-upload edited customization files over and over
  3. Leaving output of a log in the console after page transitions
  4. 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.

01.gif

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.

02.gif

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

  1. Create a local folder that is okay to be accessed from Google Chrome.
  2. Open the developer tools while on a screen of the Kintone App to apply the customization.
  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.

    03.gif

  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.

    04.gif

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.
05.gif

 

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.

06.png


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

07.gif

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. 

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!