A simple Stimulus controller to help debug and log Turbo-Drive events. This controller listens to various Turbo events and logs messages to the console, aiding in the development and debugging process.

debug_turbo_listener_controller.js

// // Add this to your HTML to activate the Stimulus controller
//
<div data-controller="debug--turbo-listener"></div>

// application.js (or wherever you're importing your controllers)
//
import DebugTurboListenerController from "./debug_turbo_listener_controller";
application.register("debug--turbo-listener", DebugTurboListenerController);

// With folder
import Debug__TurboListenerController from "./debug/turbo_listener_controller";
application.register("debug--turbo-listener", Debug__TurboListenerController);

// debug_turbo_listener_controller.js (inside app/javascript/controllers/
//
import { Controller } from "stimulus";

// Connects to data-controller="debug--turbo-listener"
//
export default class extends Controller {
  connect() {
    console.log("Debug Turbo Listener connected.");

    // Uncomment the group of functions you'd like to use:

    this.basicNavigationAndLinkEvents();
    // this.fetchLifecycleEvents();
    // this.formSubmissions();
    // this.rendering();
    // this.turboFrames();
    // this.turboStream();
    this.debugEventEnabled = false;
  }

  basicNavigationAndLinkEvents() {
    this.listenToEvents({
      "turbo:click": "Click on a Turbo-enabled link.",
      "turbo:before-visit": "Before visiting a location, excluding history navigation.",
      "turbo:visit": "Immediately after a visit starts.",
    });
  }

  fetchLifecycleEvents() {
    this.listenToEvents({
      "turbo:before-fetch-request": "Before Turbo issues a network request.",
      "turbo:before-fetch-response": "After the network request completes.",
      "turbo:fetch-request-error": "When a fetch request fails due to network errors.",
    });
  }

  formSubmissions() {
    this.listenToEvents({
      "turbo:submit-start": "During a form submission.",
      "turbo:submit-end": "After the form submission-initiated network request completes.",
    });
  }

  rendering() {
    this.listenToEvents({
      "turbo:before-cache": "Before Turbo saves the current page to cache.",
      "turbo:before-render": "Before rendering the page.",
      "turbo:render": "After Turbo renders the page.",
      "turbo:load": "Once after the initial page load, and again after every Turbo visit.",
    });
  }

  turboFrames() {
    this.listenToEvents({
      "turbo:before-frame-render": "Before rendering the turbo-frame element.",
      "turbo:frame-render": "After a turbo-frame element renders its view.",
      "turbo:frame-load": "When a turbo-frame element finishes loading.",
      "turbo:frame-missing":
        "When a response to a turbo-frame request does not contain a matching turbo-frame.",
    });
  }

  turboStream() {
    this.listenToEvents({
      "turbo:before-stream-render": "Before rendering a Turbo Stream update.",
      "turbo:stream-render": "A Turbo Stream update has been rendered.",
      "turbo:after-stream-render": "After a Turbo Stream update has been rendered.",
    });
  }

  listenToEvents(events) {
    Object.keys(events).forEach((eventName) => {
      document.addEventListener(eventName, (event) => {
        console.log(`!!! => ${eventName}: ${events[eventName]}`);
        if (this.debugEventEnabled) {
          console.log(event);
        }
      });
    });
  }

  turboStream() {
    this.listenToEvents({
      "turbo:before-stream-render": "Before rendering a Turbo Stream update.",
      "turbo:stream-render": "A Turbo Stream update has been rendered.",
      "turbo:after-stream-render": "After a Turbo Stream update has been rendered.",
    });
  }

  disconnect() {
    // This will disconnect all events to clean up.
    // Comment out if you'd like to keep them persistent.
    Object.values(arguments).forEach((events) => {
      Object.keys(events).forEach((eventName) => {
        document.removeEventListener(eventName);
      });
    });
  }
}