From 531facd74cfc2fbe62aaf838bf23d64a4f7ca2c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20H=C3=B6benreich?=
 <64426524+jonas-hoebenreich@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:00:20 +0100
Subject: [PATCH] feat: add debug mode via url parameter (#2039)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>
---
 .../getting-started/framework-guides/page.mdx | 47 ++++++++++++++++++-
 packages/js/src/lib/initialize.ts             |  4 +-
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
index 8c600fb5aa..02f2f2e742 100644
--- a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
+++ b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
@@ -46,8 +46,8 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 ```html {{ title: 'index.html' }}
 <!-- START Formbricks Surveys -->
 <script type="text/javascript">
-    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.4.0/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
-    </script>
+!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.5.1/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
+</script>
 <!-- END Formbricks Surveys -->
 ```
 </CodeGroup>
@@ -388,6 +388,49 @@ To this:
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
+## Debugging Formbricks Integration
+
+Enabling Formbricks debug mode in your browser is a useful troubleshooting step for identifying and resolving complex issues. This section outlines how to activate debug mode, covers common use cases, and provides insights into specific debug log messages.
+
+### Activate Debug Mode
+
+To activate Formbricks debug mode:
+
+1. **In Your Integration Code:**
+   - Locate the initialization code for Formbricks in your application (HTML, ReactJS, NextJS, VueJS).
+   - Set the `debug` option to `true` when initializing Formbricks.
+
+2. **View Debug Logs:**
+   - Open your browser's developer tools by pressing `F12` or right-clicking and selecting "Inspect."
+   - Navigate to the "Console" tab to view Formbricks debugging information.
+
+     **How to Open Browser Console:**
+     - **Google Chrome:** Press `F12` or right-click, select "Inspect," and go to the "Console" tab.
+     - **Firefox:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab.
+     - **Safari:** Press `Option + Command + C` to open the developer tools and navigate to the "Console" tab.
+     - **Edge:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab.
+
+3. **Via URL Parameter:**
+   - For quick activation, add `?formbricksDebug=true` to your application's URL.
+
+   This parameter will enable debugging for the current session.
+
+### Common Use Cases
+
+Debug mode is beneficial for scenarios such as:
+- Verifying Formbricks functionality.
+- Identifying integration issues.
+- Troubleshooting unexpected behavior.
+
+### Debug Log Messages
+
+Specific debug log messages may provide insights into:
+- API calls and responses.
+- Event tracking and form interactions.
+- Integration errors.
+
+**Note:** Disable debugging in production to prevent unnecessary logs and improve performance.
+
 ## Overwrite CSS Styles for In-App Surveys
 
 You can overwrite the default CSS styles for the in-app surveys by adding the following CSS to your global CSS file (eg. `globals.css`):
diff --git a/packages/js/src/lib/initialize.ts b/packages/js/src/lib/initialize.ts
index 4986605b66..c0ba4657f8 100644
--- a/packages/js/src/lib/initialize.ts
+++ b/packages/js/src/lib/initialize.ts
@@ -26,9 +26,9 @@ const logger = Logger.getInstance();
 let isInitialized = false;
 
 const setDebugLevel = (c: TJsConfigInput): void => {
-  if (c.debug) {
-    logger.debug(`Setting log level to debug`);
+  if (c.debug || window.location.search.includes("formbricksDebug=true")) {
     logger.configure({ logLevel: "debug" });
+    logger.debug(`Setting log level to debug`);
   }
 };