# Modo dev El modo dev es una característica de EDgrid que nos permite saber el breakpoint actual y los componentes del layout (ed-grid, ed-container y ed-item). Al activarlo el navegador muestra el layout de la siguiente manera: 1. Los `ed-container` y `ed-grid` tienen un borde rojo y en la parte superior una franja roja que imprime sus clases html. 2. Los `ed-item` e hijos directos de `ed-grid` se colorean de azul y a su vez imprimen sus clases html en una franja azul.

Modo dev en Flexbox

1
2
3

Modo dev en Grid

1
2
3
## Activar modo dev con clases HTML Basta con añadirle la clase `dev` al elemento body ```html ``` ## Activar el modo dev en Sass Redefinir la variable `$dev` a `true` antes de importar `ed-grid` ```scss $dev: true; @import 'path/ed-grid/ed-grid'; ``` ## Modo dev hover Si sólo quieres inspeccionar un elemento a la vez y no toda la página, puedes usar el modo desarrollo con hover, donde sólo funcionará con `ed-grid`, `ed-container` y `ed-item` que tengan el estado de hover.

Modo dev con hover

1
2
3

Activar modo dev hover con clases HTML

Basta con añadirle la clase `dev-hover` al elemento body ```html ```

Activar modo dev hover en Sass

Redefinir la variable `$dev-hover` a `true` antes de importar `ed-grid` (no es necesario redifinir también la variable `$dev`). ```scss $dev-hover: true; @import 'path/ed-grid/ed-grid'; ```