> 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: Generate Logs to Debug Your Site

## Article: Generating a Log to Debug Your Site

## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/generate-logs-to-debug-your-site.md

## Article Content:

# Tutorial | Generate Logs to Debug a Site

This tutorial demonstrates how to generate logs from site code. We will then view the generated logs using [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md).

In this tutorial, we will:

1. Add a button to a site's home page.
1. Create an event handler that generates a log whenever the button is clicked.
1. View the generated log using Wix Logs.

> **Note**: In this tutorial, logs are generated from page code. However, you can also generate logs from backend code.

## Step 1 | Add a button to your site

Add a button to your site and create an event handler:

1.  Add a button labeled `button1` to your site's home page, like this:
    
    <div style="text-align:left">

    <img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/949a3dd03f5f11dd9dc3211af1b2c85f.png" style="max-width:40vw" />

    </div>
    
1.  In the site's home page code, add an [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) that runs whenever the button is clicked. 

    For the purposes of this tutorial, let's produce an error by defining `factor3` instead of `factor2.`

    ```js
        $w("#button1").onClick(() => {
        const factor1 = 10;
        const factor3 = 5;
        try {
            console.log("Button clicked!");
            console.log(factor1 + " * " + factor2 + " = " + (factor1 * factor2));
        } catch (error) {
            console.error("An error occurred during multiplication:", error);
            console.warn("Make sure to specify 2 factors for multiplication.");
        }
    });
    ```

1.  Preview or publish your site.

    > **Note:** You can generate logs when previewing your site, but some log information is available only when your site is published.

## Step 2 | Generate and view a log

Generate a log and view it [using Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-wix-logs.md) as follows:

1. In a separate browser tab or window, [open the Wix Logs page](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-wix-logs.md).

    <div style="text-align:left">

    <img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/6f82b8af9105b4198ffe5babf7d6114d.png" style="max-width:50vw" />

    </div>

1. In your live site's home page or in Preview mode, click the button you created.

    The logs appear in the Wix Logs page:

    <div style="text-align:left">

    <img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/dbf2dc66af923e4d2c64564f8332de90.png" style="max-width:40vw" />

    </div>
    
1. Click **View** for the log with the error to see its full details on the right:

    <div style="text-align:left">

    <img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/123b0719f98d5699cf242c68c1813b02.png" style="max-width:50vw" />

    </div>
    
    Check out the `jsonPayload` to see an explanation for the error.
    
    
## See also

- [About logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md)
- [View logs using Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-wix-logs.md)
- [View logs using Google Cloud Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md)
- [View logs using an external monitoring tool](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-an-external-monitoring-tool.md)
- [Log object structure](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/log-object-structure.md)