About Debugging Your Code

There are several ways you can debug the code in your Wix site:

  • Debugging with the Developer Console
  • Debugging with functional testing in the backend
  • Debugging with your browser's developer tools
  • Debugging with Wix Logs

Debugging with the Developer Console

The Wix Developer Console is available at the bottom of the page when you are previewing your site. The console displays information that is useful when debugging, such as errors, warnings, and other messages.

It also displays debug messages that you added to the code using any console method. If you are new to debugging code, click here to learn how to log messages to the console.

Each message displays the page where the relevant code can be found and a link to the specific line of code (in the editor) that triggered the message.

Viewing the Developer Console

To view the Developer Console, open your site in Preview mode. The Developer Console appears at the bottom of the page.

If the console is minimized, click the arrow to expand it.

Clearing messages from the console

Click on the console menu bar.

Filtering console messages

Click Default View on the console menu bar, and then choose which kinds of messages you want to see.

  • Verbose: System log messages that can help you debug low-level code problems.
  • Debug: Messages you have logged to the console.
  • Info: Informational messages that require no action.
  • Warning: Messages about potential problems in your code. These are highlighted in yellow.
  • Error: Messages about actual errors in your code. These are highlighted in red.

Debugging with functional testing in the backend

Debugging code from the backend is challenging because you need to invest effort to trigger the code and test it. To save you time and effort, Wix Studio and Wix Editor enable quick testing of backend functions directly from the code editor. The output you see in the test tab is the same as the output you would see in the Developer Console if you previewed your site and triggered the function.

You can debug HTTP functions by adding console.log() calls to them. The information you log appears in the function output when using functional testing (Wix Editor) and in your site's Logs.

Debugging with your browser's developer tools

Wix allows you to debug your site's code as you would any modern JavaScript web-based application, by using developer tools to set breakpoints, log to the console, and more. These tools are not part of Wix - they come with your browser. If you are new to debugging, learn how to log messages to the console.

You can open a copy of your site's frontend code files in the browser's developer tools. For detailed instructions, read Access Frontend Source Files

You can debug your fully-published site's code directly, or without publishing using Preview mode. Read more about About Testing Your Code in Preview Mode.

Expected behaviors when debugging in Preview mode

Consider the following expected behaviors when debugging certain features in Preview mode:

  • Backend code Because of security concerns, messages in backend code might not be logged to the browser's console on the published version of your site.

  • HTTP functions Because HTTP functions are not browser-based, there is no console to display your logs.

    You can use Wix logs to view console messages in backend code and HTTP functions on your site.

Source maps

When you debug your code in the browser it looks just like your original source code. In reality, the code you write is not the actual code that is run. The usage of source maps means that you don't need to worry about what's going on behind the scenes. But if you're curious to know, this is what's happening.

Read more about source maps

Wix supports writing code using the ES2017 standard. But until this standard is fully implemented in all browsers, your code is transpiled from ES2017 code to ES5. Your code is also minified, and source files are combined to make their delivery from the server more efficient.

So the code that's actually being run on your site is transpiled, minified, and combined. You don't want to have to debug that generated code. You want to debug the code you wrote originally. That's where source maps come in. 

A source map is a file that maps the lines of code that the browser is actually running to the lines in your original source code. When you want to debug some code, the source map lets you find the code in the original version that you wrote, even though the debugger uses the source map to run the corresponding generated code. 

All this should happen without you having to do anything. If you’re having trouble, check your browser’s developer tools settings and make sure that source maps are enabled. 

Debugging with Wix Logs

Wix Logs is a tool that allows you to debug your site by generating and tracking logs. You can access the Logs tool directly from Preview mode. To get to Wix Logs, click on Live Site Logs then Wix Logs in your Developer Console.

You can use site logging to generate logs from frontend code, backend code, public code, HTTP functions, or anywhere else in your site.

You can monitor site logs in both Preview mode and on your published site.

You can also access the Wix Logs in the Code sidebar, under Developer Tools (Wix Editor), or in your site's dashboard, under Settings.

Live logs

You can view logs in real time in the Wix Logs window. Simply add a console message to any code in your site, trigger the code in Preview mode or on your published site, and the log will appear in your Wix Logs window.

You can click the log to view more information:

Google Cloud logs

For more robust log analysis, you can easily connect your Wix Logs to Google Cloud Logs, an external monitoring tool.

Learn more about:

Debugging FORBIDDEN (403) errors

Some functions require specific roles and permissions to run. Other functions may limit functionality depending on the site visitor's roles and permissions. If you are receiving a 403 or FORBIDDEN error when you run a function, try using the Wix Auth API's elevate() function. This function allows you to bypass permission requirements by elevating the site visitor's permissions to the highest level. Exercise caution when using this function to prevent security vulnerabilities.

See also

Did this help?