How to Debug Custom JavaScript Snippets

Introduction

When using Custom JavaScript, you may encounter issues with preset JavaScript snippets or your own custom JavaScript that require debugging.

This tutorial walks you through how to debug custom JavaScript snippets within the tool.

1) Open the ‘JS Snippet Editor’

To edit or test a Custom JavaScript snippet, click the ‘JS’ box to the right-hand side of the relevant snippet row in the Custom JavaScript tab.

2) Test the JavaScript

Enter the URL in the bottom right hand-corner and use the ‘Test’ button to see the results from the snippet in the right hand-side JS tester panel.

In the example above, there is a ‘TypeError: Failed to fetch’ error message displayed.

3) Debug Using External Browser

If you see an error in the JavaScript tester window, then you can debug it by selecting the ‘External Browser’ button in the bottom right-hand corner.

This will open a Chromium browser when you press the ‘Test’ button.

4) Select Dev Tools

Click the ‘Test’ button to open up our inbuilt Chromium browser. You can then select ‘Developer Tools’.

This will bring up Chrome Dev Tools, that many will be familiar with already.

5) View Console Errors

If you select the ‘Console’ tab, you will see the specific errors from your JavaScript Snippet displayed.

You can add console.log() lines to your snippet and these will be shown in the ‘Console’ tab also.

Common Errors

A common error you may see with a ChatGPT snippet is shown in our example above.

This error reads:

TypeError: Failed to fetch

If you go into the Chromium ‘Console’ tab as described above, you will often see the following error:

Refused to connect to 'https://api.openai.com/v1/chat/completions' because it violates the following Content Security Policy directive

This means that that the site has a ‘Content-Security-Policy’ header that disallows the OpenAI domain. Hence, you cannot run any OpenAi ChatGPT snippet for that URL.