> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Debugging Your Code ## Article: Testing and Troubleshooting Your Code ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md ## Article Content: # 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](https://developer.mozilla.org/en-US/docs/Web/API/console). If you are new to debugging code, click [here](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) 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. ![Developer Console](https://wixmp-833713b177cebf373f611808.wixmp.com/images/61a21a6485d5f527d42fc5417df978f5.png) If the console is minimized, click the arrow ![developer console arrow](https://wixmp-833713b177cebf373f611808.wixmp.com/images/c27735328334e1589ef91c4f0dfb4aa7.png) to expand it. ### Clearing messages from the console Click ![clear console button](https://wixmp-833713b177cebf373f611808.wixmp.com/images/c79b7d7b6b7b7229338ba32f083e6fdf.png) 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. ![Default View menu](https://wixmp-833713b177cebf373f611808.wixmp.com/images/003d8881d8517049e8b5430f866be849.png) + **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](https://support.wix.com/en/article/velo-testing-your-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](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/test-backend-functions-with-functional-testing.md) (Wix Editor) and in your site's [Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md). ## Debugging with your browser's developer tools Wix allows you to [debug](https://developer.chrome.com/docs/devtools/javascript/) your site's code as you would any modern JavaScript web-based application, by using [developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_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](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md). You can open a copy of your site's frontend code files in the browser's developer tools. For detailed instructions, read [Locate and Open Frontend Source Files](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/locate-and-open-frontend-source-files.md) 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](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-testing-your-code-in-preview-mode.md). ### 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](#debugging-with-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](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) allows you to debug your site by generating and tracking logs in real-time by adding [console messages](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) to any code in your site. This includes frontend code, backend code, public code, HTTP functions, or anywhere else in your site. Logs are generated when in Preview mode and when working on a published site. To access Wix Logs while previewing, click **Logging Tools** and then **Wix Logs** in your [Developer Console](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md). ![Logging tools button](https://wixmp-833713b177cebf373f611808.wixmp.com/images/5226fd913de0195684564357453b3541.png) Here is sample log: ![Logs](https://wixmp-833713b177cebf373f611808.wixmp.com/images/36338a0bd9887dabd3c1cd24d45d328b.png) Learn more about working with [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md#about-wix-logs). > **Note**: For more robust log analysis, you can connect to [Google Cloud Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md) and other [external monitoring tools](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-an-external-monitoring-tool.md). Learn more about: - [Viewing logs in your Wix Logs window](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-wix-logs.md) - [Connecting to Google Cloud Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md) - [How to generate a log using Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/generate-logs-to-debug-your-site.md) - [Wix Logs' logging details](https://www.wix.com/velo/reference/spis/site-monitoring/logentry) ## 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()`](https://www.wix.com/velo/reference/wix-auth/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 - [About Testing Your Code in Preview Mode](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-testing-your-code-in-preview-mode.md) - [Locate and Open Frontend Source Files](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/locate-and-open-frontend-source-files.md) - [About Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md)