Personalize as ferramentas do desenvolvedor do Google Chrome com DevTools Author

Se você é um desenvolvedor frontend, já deve saber sobre o painel DevTools do Google Chrome. Isso vem com todas as versões do Chrome que oferecem ferramentas para edição de HTML / CSS bruto, além de um console JS e a capacidade de manipular o DOM em tempo real.

Um novo plug-in gratuito do Chrome chamado DevTools Author permite personalizar o painel DevTools com esquemas de cores de sintaxe extras, fontes exclusivas e tamanhos de fonte personalizados.

A configuração é bem direta. Basta instalar a extensão na Chrome Web Store e acessar este link em seu navegador: chrome: // flags / # enable-devtools-experiments

Você se encontrará no painel do Chrome Flags, onde deverá ativar os experimentos do DevTools. Assim que estiver ativado, você deverá reiniciar o Chrome, abrir o painel de configurações do DevTools e encontrar a guia "experimentos".

Em seguida, basta marcar "permitir temas personalizados da interface do usuário" e você é bom para ir!

Você pode escolher entre mais de 25 esquemas de cores de sintaxe diferentes que tornam o editor do Chrome muito mais fácil de usar. E você pode alterar o tamanho das fontes de 10px-22px ou até mesmo atualizar as fontes do console para qualquer fonte pré-instalada em seu sistema operacional.

Este plugin não adiciona nenhum recurso principal ao DevTools, mas permite que você altere o estilo e a aparência da sua janela DevTools. É surpreendentemente fácil de configurar e pode tornar a sua experiência com o DevTools muito mais personalizada.

Se você tiver algum problema durante a configuração, confira este vídeo de introdução guiado.