DevTools CSS: Descubra os Segredos da Produtividade Front-End

No front end moderno, há ferramentas indispensáveis para CSS. Saiba como usar essas ferramentas para bombar sua produtividade CSS!

Todos os que mexemos no front end sabemos que o Chrome tem um excelente kit de ferramentas para inspecionar CSS, as Chrome Developer Tools (ou DevTools para os íntimos).

São ferramentas muito boas para vários aspectos do desenvolvimento front end, incluindo muitas possibilidades para analisar e trabalhar com CSS.

Mas a maioria conhece somente as possibilidades básicas da DevTools para CSS, ficando muitas das ferramentas fora do leque de opções dos devs front-end.

Nesse vídeo, conheça ferramentas incríveis para CSS nas DevTools, indo muito além do básico, explorando as DevTools para desenvolvimento CSS de maneira mais aprofundada.

Saiba quais as melhores ferramentas para inspecionar CSS direto do navegador e aprenda a como inspecionar CSS LIKE A PRO usando DevTools para bombar a produtividade CSS.

CSS + DevTools: o combo infalível para web dev moderno!

💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo

==========

📷 Equipamentos usados para gravar este vídeo

==========

⏱️ Timestamps
00:00 Explicação inicial sobre DevTools para CSS
01:12 Diferentes maneiras de acessar as DevTools
01:39 Como alterar a posição das DevTools na tela
03:23 Elements: inspecionar e manipular o DOM
08:08 Styles: visualizar e manipular estilos CSS
15:19 Manipular classes CSS com as DevTools: o jeito certo
16:51 Como forçar estados em elementos
17:55 Computed: uma das mais poderosas das DevTools
19:55 Layout: facilitadores de Flexbox e CSS Grid
21:25 CSS Overview: relatório de CSS direto nas DevTools
24:38 Coverage: cobertura de CSS para análises de performance
26:25 Dicas rápidas de DevTools para CSS

==========

Music Credit: LAKEY INSPIRED
Track Name: "Blue Boi"
License for commercial use: Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License.

==========

[dpwoficial]

E aí, qual dessas ferramentas você mais usa?

[yurionthecode]

Sensacional! não conhecia ou simplesmene ignorava bastante coisa. obrigado

[Sigameosbons]

Já começo o vídeo curtindo. Sempre trazendo conteúdo foda.

[pedropauloteodoro]

Já tenho uns 5 meses praticamente que estou estudando e eu não sabia muito bem como utilizar a dev tools, e cara esse video é incrível, minha mente expandiu com isso tornando o desenvolvimento muito mais prático e rápido.
Parabéns pelo vídeo !!!

[marcelosurfpaiva]

Boaa .... legal o vídeo !!
Só um comentário p dar um up no engajamento .... hehe

[gilsonconceicao]

Excelente. Eu não sabia de varias coisas aí

[gabrielcantuaria]

cara, tu é mto bom, to viciado nos videos

[Luis]

Amigão, simplesmente sensacional. Sua didática é sensacional e irá me salvar aqui. nota 1000 pra você.

[jferreiraplaygames]

Confesso que 8 anos de Dev descobrir realmente como usar o devtools no seus vídeos, parabéns agregou muito na minha vida.

[krillAmorim]

Você poderia fazer uma série mostrando todo o poder da DevTools

[carloseduardoramos]

Mano... sem palavras pra descrever o quão incríveis esse Coverage e CSS Overview são. Quanto tempo já passei limpando os arquivos CSS tentando ver quais propriedades coloquei atoa... e podia ter descoberto isso com alguns cliques. kkkk
Muito obrigado por mais essa aula!

[MarceloGranadeiro]

Rapaz que vídeo magnifico;; parabéns pela didática

[programadorprincipiante]

Show de conteúdo...
E fica a dica ai pra fazer o Vídeo DevTools como Editor... ;)

[luciopereirabrito]

Incrível, sempre trazendo novos conhecimentos tornando a vida do desenvolvedor mil vezes mais fácil. 🤝🏿❤

[matheusoliveira]

Muito bom seus vídeos. Sensacional, conteúdo riquíssimo, sem enrolação.

[PaulaFlavia]

Outro video de dev tool...mais um mais um

[leandrocamargo]

Sensacional! Muito bom sempre aprender coisas novas e relembrar outras que as vezes caem no esquecimento.

[visaogeralservicenow]

Eu uso muito para saber qual elemento está sendo afetado pelas tags, quando estou codando, excelente aula!!! Entrei hje aqui, mas ja tirei bastantes duvidas! principalmente sobre media query.

[robsonrdsaraiva]

Incrivelmente, incrível! Que vídeo foi esse, hein?! Obrigado e parabéns! Tooop 🤯

[alexalannunes]

Caraca.🥳🥳🥳🥳 esse css overview é mágico.. lindo lindo . Ansioso pra usar nos projetos.
Depois quero uns vídeos sobre debuggar animações css com o devTools.
Lá em mais ferramentas > Animation .
Tipo gráfico easing, performance.
... vídeo excelente 🥳🥳