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;
+      }
+    }
+  }
+}