Atualmente, é raro encontrar um desenvolvedor web que não conheça e use DevTools. A ferramenta nativa do Chrome há anos ajuda (e muito) a vida de milhares de profissionais e, consequentemente, faz com que o desenvolvimento web possa acontecer de uma maneira melhor, mais prática e com resultados melhores.
Arriscaria a dizer que você também usa DevTools. Nem que seja para tarefas simples, como verificar a ordem de elementos no código ou alterar algumas propriedades CSS, ou para tarefas um pouco mais além, como verificar o cabeçalhos HTTP ou fazer profiles de seu JavaScript para identificar gargalos de performance.
E, dentre as muitas, muitas possibilidades oferecidas pela DevTools, uma que não é tão conhecida (mas surpreendentemente útil e simples de configurar) é relacionada a trabalhar com pré-processadores CSS diretamente na DevTools. Imagine que você possa, diretamente no inspetor de elementos da DevTools, usar todas as possibilidades de seu pré-processador, salvando o resultado e vendo o resultado em tempo real, sem a necessidade de recarregar a página!
É isso que este artigo mostrará como fazer: configurar apropriadamente a DevTools para trabalhar com pré-processadores e facilitar/agilizar o trabalho de desenvolvimento front-end absurdamente. Depois de ler e fazer tudo funcionar no seu próprio ambiente de desenvolvimento, provavelmente você vai se perguntar: “Como eu pude trabalhar sem isso durante tanto tempo?!”.
Preliminares
DevTools consegue trabalhar com SASS nativamente, mas, para que seja possível essa edição em tempo-real, algumas medidas preliminares devem ser tomadas. Afinal, não tem como a ferramenta “adivinhar” que você está usando pré-processador. Acredito que no futuro ele vai adivinhar isso e o que você comeu no café da manhã, mas, por enquanto, é assim que é.
“Experiências das Ferramentas do desenvolvedor”
A primeira medida é se certificar de que a diretiva “Experiências das Ferramentas do desenvolvedor” no Chrome está habilitada. Para isso, acesse as “flags” do navegador acessando o seguinte endereço: about:flags.
Se você desconhecia essas opções no navegador, não fique assustado com essa tela; só tenha cuidado para não mexer em alguma coisa que não tenha certeza para o que serve. O que interessa nesse momento é conferir se a opção “Experiências das Ferramentas do desenvolvedor” está habilitada.
Arquivo source map
Pense em source maps como a “ponte” entre uma linguagem de alto nível (higher-level) e uma de baixo nível (lower-level). Eles possuem a referência/relação entre a linguagem usada para se trabalhar (SASS, CoffeeScript etc) com o resultado gerado (CSS, JavaScript etc). Felizmente, desde a versão 3.3 do SASS já existe suporte a source maps.
Usando a sintaxe nativa do SASS em linha de comando, basta passar um parâmetro à instrução para que o arquivo seja gerado (sim, um arquivo será gerado):
|
1 |
$ sass sass/screen.scss:stylesheets/screen.css --sourcemap |
E, para ter certeza de que tudo correu bem, veja que agora, além do arquivo screen.css.map – há um “comentário especial” ao final do arquivo CSS gerado. Algo parecido com:
|
1 |
/*# sourceMappingURL=screen.css.map */ |
Caso esteja usando algum task runner – como Grunt ou Gulp -, é possível que a tarefa escolhida tenha suporte para a geração de source maps, também. Por exemplo, usando gulp-compass, basta usar a diretiva sourcemap como true:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
gulp.task('compileStyles', function() { gulp.src(srcStylesheet + '/style.scss') .pipe(compass({ bundle_exec: true, sourcemap: true, time: true, project: './', sass: 'src/assets/stylesheet', css: wpTheme, javascript: 'assets/js', font: 'assets/font' })) .on('error', function(err) {})); |
Suporte a source maps nas opções da DevTools
Agora que já se tem o arquivo do source map, é preciso garantir que o Chrome saberá tratar isso corretamente. Para tanto, vá até as opções da DevTools (
na parte superior direita) e garanta que as opções devidas estejam habilitadas.
Apesar de o Chrome usado para os screenshots ser em pt-br, as opções estão em inglês. Não se sabe se é algo normal ou algum bug da versão específica usada (36.0.1985.143), mas, em tradução livre, seria algo como “Habilitar source maps CSS” e “Auto-recarregar CSS gerado”.
Para que a atualização de estilos em tempo-real aconteça, é preciso que o SASS esteja gerando CSS automaticamente a cada mudança (parâmetro
--watch na linha de comando ou task runner em modo watch).Acesso via servidor
Para finalizar as preliminares (hummm!), é preciso que o acesso ao site esteja se dando (hummm!) através de um servidor, não uma URL file://. Isso é preciso porque um servidor deve servir o arquivo CSS, o de source map e os originais SASS.
Geralmente desenvolvedores que trabalham também com back-end já têm por prática configurar um servidor local (ou ambiente virtualizado) para desenvolver; se não é o seu caso e você mexe exclusivamente com front-end, começar a ter o ambiente de desenvolvimento também em um server trará outros tipos de benefício. Experimente.
Em ambiente de desenvolvimento, geralmente não se coloca arquivos de alto nível (SASS, CoffeeScript etc); somente o resultado que se tem disso. Em função disso, regra geral só será possível mexer diretamente com SASS pela DevTools em ambiente de desenvolvimento.
DevTools e alterações em arquivos SASS
Relembrando, os 4 pontos preliminares para se trabalhar com SASS diretamente pela DevTools são:
- Habilitar a opção “Experiências das Ferramentas do desenvolvedor” em
about:flags - Ter um arquivo source map (independente de qual maneira foi gerado)
- Habilitar suporte a source maps nas opções da DevTools
- Acesso via servidor (inclusive local ou virtualizado)
Tendo seguido estas 4 etapas, ao abrir a página que esteja em seu ambiente de desenvolvimento, agora, ao invés de o inspetor mostrar em qual linha do arquivo CSS se encontram as regras, ele mostrará a linha no arquivo SASS!
E perceba o seguinte: no projeto usado para a inspeção mostrada na imagem acima, o arquivo _elements.scss é importado por um outro arquivo SASS para a geração do CSS final. A edição integrada à DevTools é tão poderosa que identifica e mostrar exatamente em qual arquivo a regra está, mesmo se este estiver importado em uma estrutura de organização de seus códigos SASS!
Salvando alterações em disco
Até aqui já é possível visualizar em qual arquivo se encontra determinada regra de estilo e realizar as já conhecidas “mudanças de teste” na DevTools, tal como é possível ser feito tradicionalmente com CSS. Mas é possível ir além: fazer alterações diretamente nos arquivos SASS pela DevTools e salvá-las em disco!
O primeiro passo é acessar a aba Source (Códigos) da DevTools e, à esquerda, clicar com o botão direito do mouse em qualquer área do espaço em branco e selecionar Add Folder to Workspace (Adicionar Pasta ao Workspace). Selecione a pasta de seu projeto (ou subpasta, desde que seja lá que os arquivos SASS estejam).
Na parte superior da janela ativa aparecerá um alerta pedindo permissão para que a DevTools tenha permissões para alterar arquivos diretamente em disco. Clique em “Permitir”.
Quando fizer isso, à esquerda da aba Sources aparecerá, além dos arquivos do próprio domínio (inclusive se for local ou virtualizado), a estrutura de diretórios correspondendo ao que foi escolhido ao adicionar a pasta ao workspace.
Para completar, é preciso vincular os arquivos SASS que estão vindo do domínio com os que estão no sistema de arquivos, propriamente dito. Na mesma aba Sources, bem no início, há os arquivos referentes ao domínio – ficam sob o nome do domínio sendo acessado. Procure o arquivo SASS que quer editar, clique com o botão direito do mouse e selecione Map to Filesystem Resource (em tradução livre, “Mapear Recurso do Sistema de Arquivos”).
Nesse momento, será preciso escolher qual é o arquivo do filesystem que corresponde ao arquivo de domínio procurando através dos diretórios – geralmente a DevTools já o encontra automaticamente, mas, caso não aconteça, será preciso uma busca manual.
A partir de agora você pode inspecionar um elemento qualquer e, ao clicar no nome do arquivo SASS e realizar qualquer alteração, você poderá salvar o resultado (Ctrl+S) e ver as mudanças acontecerem em tempo real, sem a necessidade de recarregar a página!
Conclusão
Indubitavelmente, o advento da DevTools foi um grande ganho para o mundo do desenvolvimento web. Através de suas várias ferramentas e possibilidades, desenvolver a web pode ser mais fácil e – por que não? – mais divertido!
A capacidade de trabalhar de maneira muito mais eficiente com SASS através da DevTools é algo que deve ser considerado com muita atenção por qualquer desenvolvedor que trabalhe com pré-processadores. Afinal, é o objetivo de todos nós aprimorar a produtividade no dia-a-dia e, certamente, uma das maneiras de se fazer isso é com o uso de boas ferramentas.
DevTools, com seu suporte nativo a source maps e permitindo a edição direta de arquivos de pré-processadores (como SASS) com visualização de resultados em tempo-real cumpre bem o papel a que se propõe.