diff --git a/themes/debug.css b/themes/debug.css
new file mode 100644
index 0000000000..d0c3938777
--- /dev/null
+++ b/themes/debug.css
@@ -0,0 +1,41 @@
+/**
+ * This file can be included in your page to help you debug which `ais-*`
+ * classes are added to the widgets.
+ * It will outline every added node and display the class name on hover
+ **/
+[class^=ais-] {
+  outline: 1px solid red !important;
+  position:relative;
+}
+[class^=ais-]:hover:after {
+  background:red;
+  background: grey;
+  color: black;
+  content:attr(class);
+  font-size:1rem;
+  height:20px;
+  left:0;
+  padding:0.5rem;
+  position:absolute;
+  top:0;
+  white-space: nowrap;
+  z-index:10;
+}
+[class^=ais-] [class^=ais-] {
+  outline: 1px solid orange !important;
+  position:relative;
+}
+[class^=ais-] [class^=ais-]:hover:after {
+  background: orange;
+  top:20px;
+  z-index:100;
+}
+[class^=ais-] [class^=ais-] [class^=ais-] {
+  outline: 1px solid yellow !important;
+  position:relative;
+}
+[class^=ais-] [class^=ais-] [class^=ais-]:hover:after {
+  background: yellow;
+  top:40px;
+  z-index:1000;
+}