Cursos livres · Laboratório da aula de source maps · WebEscola

Cartão de teste

O que fazer no Chrome

  1. Abra o DevTools (Cmd+Option+I no Mac, F12 ou Ctrl+Shift+I no Windows e no Linux) e vá em Elements.
  2. Selecione o Botão. No painel Styles, a regra aparece como _botao.scss:3, não style.css:1.
  3. No Styles, clique em :hov e marque :hover: a regra .botao:hover aponta _botao.scss:10, o &:hover aninhado. Dê Cmd+clique no box-shadow dela: o Sources abre _variaveis.scss:5, o corpo do mixin.
  4. Selecione o título: .cartao .titulo aponta style.scss:8.
  5. Clique no link _botao.scss: o painel Sources abre o SCSS original.
  6. Veja o mapa sendo carregado: no menu ⋮ do DevTools, More tools → Developer resources. A linha do style.css.map mostra o Status do carregamento. Quem pede o mapa é o próprio DevTools, não a página; por isso ele não entra na lista normal da aba Network.
  7. Para baixar o mapa você mesmo, abra dist/style.css.map: é o JSON que o DevTools acabou de ler.
  8. Para comparar: DevTools → Settings (F1) → Preferences → Sources → desmarque CSS source maps e recarregue. O link volta a ser style.css.

Mais deste laboratório