Add toggle button for DEBUG_TB_INTERCEPT_REDIRECTS to debug toolbar UI

example/app.py

@@ -1,4 +1,6 @@
-# Run using: `FLASK_DEBUG=True flask run`
+# Run using: `flask run` after setting env vars
+
+import os
 
 from flask import Flask
 from flask import redirect
@@ -9,29 +11,28 @@
 from flask_debugtoolbar import DebugToolbarExtension
 
 app = Flask(__name__)
-app.config["DEBUG_TB_INTERCEPT_REDIRECTS"] = True
-# app.config['DEBUG_TB_PANELS'] = (
-#    'flask_debugtoolbar.panels.headers.HeaderDebugPanel',
-#    'flask_debugtoolbar.panels.logger.LoggingPanel',
-#    'flask_debugtoolbar.panels.timer.TimerDebugPanel',
-# )
-# app.config['DEBUG_TB_HOSTS'] = ('127.0.0.1', '::1' )
+
+# Use a cross-platform-safe DB path
+basedir = os.path.abspath(os.path.dirname(__file__))
+app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///" + os.path.join(basedir, "test.db")
+
 app.config["SECRET_KEY"] = "asd"
 app.config["SQLALCHEMY_RECORD_QUERIES"] = True
-app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:////tmp/test.db"
-# This is no longer needed for Flask-SQLAlchemy 3.0+, if you're using 2.X you'll
-# want to define this:
-# app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+app.config["DEBUG_TB_INTERCEPT_REDIRECTS"] = True
+app.config["DEBUG"] = True  # ✅ Ensure app runs in debug mode
+app.debug = True  # ✅ Double-safe flag for debug
 
 db = SQLAlchemy(app)
 toolbar = DebugToolbarExtension(app)
 
 
+# Model
 class ExampleModel(db.Model):
     __tablename__ = "examples"
     value = db.Column(db.String(100), primary_key=True)
 
 
+# Routes
 @app.route("/")
 def index():
     app.logger.info("Hello there")
@@ -46,5 +47,6 @@ def redirect_example():
     return response
 
 
+# Create the database
 with app.app_context():
     db.create_all()

src/flask_debugtoolbar/__init__.py

@@ -357,3 +357,11 @@ def teardown_request(self, exc: BaseException | None) -> None:
     def render(self, template_name: str, context: dict[str, t.Any]) -> str:
         template = self.jinja_env.get_template(template_name)
         return template.render(**context)
+
+
+@module.route("/toggle_redirect_intercept", methods=["POST"])
+def toggle_redirect_intercept() -> Response:
+    current = current_app.config.get("DEBUG_TB_INTERCEPT_REDIRECTS", True)
+    new_value = not current
+    current_app.config["DEBUG_TB_INTERCEPT_REDIRECTS"] = new_value
+    return {"intercept_redirects": new_value}

src/flask_debugtoolbar/templates/base.html

@@ -10,6 +10,13 @@
     <ol id="flDebugPanelList">
       {% if panels %}
       <li><a id="flDebugHideToolBarButton" href="#" title="Hide Toolbar">Hide &raquo;</a></li>
+      <li>
+        <button id="toggleRedirectBtn"
+                style="background-color: {{ 'green' if intercept_redirects else 'gray' }};
+                      color: white; padding: 4px 8px; border: none; border-radius: 4px;">
+          Intercept: {{ 'ON' if intercept_redirects else 'OFF' }}
+        </button>
+      </li>
       {% else %}
       <li id="flDebugButton">DEBUG</li>
       {% endif %}
@@ -56,4 +63,19 @@ <h3>{{ panel.title()|safe }}</h3>
     {% endif %}
   {% endfor %}
   <div id="flDebugWindow" class="flDebugPanelContentParent"></div>
+  <script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", function () {
+      const btn = document.getElementById("toggleRedirectBtn");
+      if (!btn) return;
+
+      btn.addEventListener("click", () => {
+        fetch("/_debug_toolbar/views/toggle_redirect_intercept", { method: "POST" })
+          .then(res => res.json())
+          .then(data => {
+            btn.textContent = data.intercept_redirects ? "Intercept: ON" : "Intercept: OFF";
+            btn.style.backgroundColor = data.intercept_redirects ? "green" : "gray";
+          });
+      });
+    });
+  </script>
 </div>