Add a debugger class.

scss/_debug.scss

@@ -0,0 +1,44 @@
+@if $enable-debugger-classes {
+  .debug {
+    &::before {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 2000;
+      padding: $spacer * .5 $spacer;
+      font-family: $font-family-base;
+      color: $black;
+      background-color: $white;
+      border-radius: 0 0 4px; // stylelint-disable-line property-disallowed-list
+      @include font-size($h1-font-size);
+    }
+
+    @each $breakpoint, $value in $grid-breakpoints {
+      @include media-breakpoint-up($breakpoint) {
+        &::before {
+          content: "#{$breakpoint}";
+        }
+      }
+    }
+
+    [class^="container"],
+    &[class^="container"],
+    .row,
+    &.row {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1999;
+        pointer-events: none;
+        content: "";
+        background: repeating-linear-gradient(to right, transparent, transparent calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc(100% / 12)); // stylelint-disable-line function-disallowed-list
+        opacity: .3;
+      }
+    }
+  }
+}

scss/_variables.scss

@@ -383,6 +383,7 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
+$enable-debugger-classes:     false !default;
 
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`

scss/bootstrap-debugger.scss

@@ -0,0 +1,3 @@
+$enable-debugger-classes: true; // stylelint-disable-line scss/dollar-variable-default
+
+@import "bootstrap";

scss/bootstrap-grid.scss

@@ -58,5 +58,6 @@ $utilities: map-get-multiple(
     "padding-start",
   )
 );
+@import "debug";
 
 @import "utilities/api";

scss/bootstrap.scss

@@ -46,6 +46,7 @@
 
 // Helpers
 @import "helpers";
+@import "debug";
 
 // Utilities
 @import "utilities/api";