Hotwire/Turbo CSS Debugger

Hotwire Turbo Debugger.md

• Install Stylebot or another CSS extension
• Paste CSS
• Enjoy highlighted turbo-frames, forms, and changed elements on the page

turbo-debugger.css

form {
  content: "form";
  display: block;
  border: 2px solid cyan;
  padding: 1.25rem;
  position: relative;
}

form:before {
  content: "form#" attr(id);
  background: cyan;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
}


turbo-frame {
  display: block;
  border: 4px solid lightgreen; 
  padding: 1.25rem;
  position: relative;
}

turbo-frame:before {
  content: "turbo-frame#" attr(id);
  background: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
}

body * {
  animation: highlight 0.5s ease;
}

@keyframes highlight {
  0% {
    outline: 2px solid orange;
    outline: 2px solid orange;
  }
  100% {
    outline: 0px solid orange;
  }
}