Developer Tools: como e quais vocês usam?

[fabiorocha]

Opa pessoal, tudo bom? Minha primeira issue, foi mal se for off topic...

Queria perguntar pra vocês um pouco das ferramentas e features delas que vocês usam. Eu vi que isso já foi discutido por alto em algumas issues (ex: #85, #369) mas eu to abrindo esse tópico porque gostaria de saber detalhes do que vocês usam para idenfiticar, debugar e consertar issues no código de vocês.

1 - DevTools. Quais? Por que?

Chrome DevTools / Firefox Developer Tools / Edge F12 DevTools / Safari Web Inspector / ...

Creio que a do Chrome ganhe em popularidade, mas alguém usa alguma outra? Por qual motivo?

2 - Tools mais usadas das DevTools. Quais? Por que?

Console / Debugger / Inspector / Emulation / Network / Memory / ...

3 - Features específicas mais usadas. Quais? Por que?

Console.log / Breakpoints / Extensions / DOM Breapoints / Call Stack / ...

4 - Editores mais usados. Quais? Por que?

Sublime / Atom / VS Code / vim / emacs / ...

5 - Uma coisa que falta na sua DevTool favorita que seria irado ter mas você usa outra ferramenta por enquanto?

:)

--

Meu objetivo é entender um pouco do flow de vocês (se quiserem falar um pouco disso por cima) pra iniciar uns projetos esse ano. Valeu pela ajuda. Abs

[mikejavier]

1 - Minha vida toda usei o FF Developer tools, mas o navegador começou a me deixar na mao e hoje trabalho com o Chrome.

2 - Inspector, Emulation, console, debugger respectivamente (primeiro faço toda a parte css e dps vou para os scripts)

3 - Breakpoints e console.log (mesma resposta de cima)

4 - Sublime sempre (já tentei outros mas até hoje sou beeeem produtivo com o sublime).

5 - Para o que faço hoje em dia as devtools resolvem tudo.

[fabiorocha]

@mikejavier

Primeiro faço toda a parte css e dps vou para os scripts.

Valeu! Justamente dessas nuances que to atrás. Legal saber que você usa emulation bastante tambem!

Breakpoints e console.log (mesma resposta de cima)

Isso eu já esperava mais ou menos. Curioso pra ver se alguém usa as funcionalidades mais avançadas com frequência.

Valeu pela resposta!

[gabrieldarezzo]

1 - Chrome DevTools
Quem usa recomendo a serie 'Segredos do Chrome DevTools' do Zeno:
https://www.youtube.com/watch?v=XUgfwYzv-WQ&list=PLiGzvgwA5Gmgnq5vPjJxW52hDiX3ndL53

2 - Console / Inspector / Insect Device (s2 Console no celular nativamente) / Network / Application

3 - Console -> console.log,console.table / Network -> Offline, Disable Cache s2 / Application -> Local Storage, Service Works /

4 - Editores mais usados. Quais? Por que?
Sublime3:
Usei minha vida toda Notepad++ (ainda uso), porem a necessidade de encontrar funções especificas (finder) foi vital para a migração devido a ter pegado um projeto muito grande (e desorganizado).
Após o período de adaptação e aprendizado não largo mais ele.
Ps: Não gosto de IDE.

5 - Uma coisa que falta na sua DevTool favorita que seria irado ter mas você usa outra ferramenta por enquanto?
Melhoria na exibição dos textos de 'bug'/retorno de HTML do Chrome no theme 'Dark', fonte preta + fundo dark é zoado haha
Falando em Dark Theme...
Vocês conhecem neh?!
http://www.felipefialho.com/blog/2016/dark-theme-no-dev-tools

[fabiorocha]

@gabrieldarezzo

2 - Console / Inspector / Insect Device (s2 Console no celular nativamente) / Network / Application

3 - Console -> console.log,console.table / Network -> Offline, Disable Cache s2 / Application -> Local Storage, Service Works /

Ótimo input cara! Valeu pelos links também. Incrível como mesmo com todas as funcionalidades das DevTools o console ainda é rei né? Eu particularmente uso muito mais o Debugger do que qualquer outra ferramenta. Mas sei que a maioria curte mais o console:

Tenho impressão que o console te dá um histórico melhor através dos logs do que o debugger que basicamente te dá a Call Stack de quando você tá parado em um breakpoint mas se você quiser testar outra coisa você tem que ir, colocar um breakpoint em outro lugar e investigar de novo. Acho que a onda de "debuggers inversos" que tá chegando vai ajudar muito com isso:

Time Travel (Debugging) with ReactNative
Time-Travel Debugging for JavaScript/Node.js

Valeu pela resposta cara. Ajudou bastante. Abs

[felquis]

Eu uso muito console, breakpoints a aba Performance, depende da natureza do problema... uso as outras também. Tem problemas que colocar milhares de console.log é mais simples principalmente quando for em um device especifico com dev tools fraco como o Firefox (sim, estou zoando o FF de propósito, mas eu sei que tem Dev Tools muito piores que nem existem)

Me sinto frustrado quando entrevisto um desenvolvedor, e a pessoa não demonstra conhecimento no DevTools.

[munizart]

1 - Firefox Developer Tools e as vezes Chrome DevTools. Em geral a do FF costuma ter mensagens de erro mais esclarecedoras no console. (e mais organizadas)
Por exemplo tente: Function.prototype.call.call(null) em cada um deles.
Como uso muito mais pra javascript, acaba pessando bastante.

Sem contar que aquele escopo do console do chrome quase nunca vem como TOP quando usa o debbuger.

As vezes, quando to dentro de uma closure, no devtools do chrome não consigo acessar variáveis dos escopos acima. No FF consigo sempre.

2 - Tools mais usadas das DevTools. Quais? Por que?
Debugger: Uso bastante o watch expression, pause on exceptions com ignore caugth exceptions e auto prettify minified sources que ficam escondido no ícone de config do painel de debugger (irrita por estar perto de outro ícone idêntico, mas com outra função).

Network: pra debuggar as requisições. As vezes uso o devtools do chrome pra debuggar conteúdo misto (se souber como fazer no FF, favor avisar hahaha)

3 - Features específicas mais usadas. Quais? Por que?

Console: console.time e console.timeEnd!

4 - Editores mais usados. Quais? Por que?

Atom, com pouquíssimos plugins. Pra ficar clean e pouco customizado mesmo.

5 - Uma coisa que falta na sua DevTool favorita que seria irado ter mas você usa outra ferramenta por enquanto?

Debuggar conteúdo misto sem precisar abrir o chrome seria ótimo.

=]

[TiagoDanin]

1 - DevTools. Quais? Por que?
Chrome DevTools, pois é mais prático e rápido.

2 - Tools mais usadas das DevTools. Quais? Por que?

• Console (Mais usado, pois nele faço uma boa parte do desenvolvimento)
• Network (Para verifica a velocidade da minha aplicação)
• Application (Ver dados de Cookie e SQL)

3 - Features específicas mais usadas. Quais? Por que?
O console.log(); para verificação de até onde meu script funciona :^) e o document.getElementById(); para obter elementos.

4 - Editores mais usados. Quais? Por que?
Atom, pois é mais prático e rápido. Ainda tem uma grande coleção de plugins.
Duas coisas que eu amor no editor é a integração com git e a personalização (Macro, cores, temas...).

5 - Uma coisa que falta na sua DevTool favorita que seria irado ter mas você usa outra ferramenta por enquanto?
Auto complete para nomes de class e id dentro do console.

[didiraja]

1 - DevTools. Quais? Por que?

Chrome DevTools pq já usava o chrome como navegador, e das vezes que tive que usar o do FF não curti muito design.

2 - Tools mais usadas das DevTools. Quais? Por que?

Toggle Device > Elements > Console > Network. Nessa ordem, sendo o network por eqnuanto sendo usado pouquíssimas vezes. (sou iniciante)

3 - Features específicas mais usadas. Quais? Por que?

Breakpoints e Console.log

4 - Editores mais usados. Quais? Por que?

Brackets mas conhecendo o VS Code

5 - Uma coisa que falta na sua DevTool favorita que seria irado ter mas você usa outra ferramenta por enquanto?

Algo que me ajudasse com Debug PHP seria bom mas nem sei se seria possível ou ao menos viável.

---

@gabrieldarezzo por mim todas as interfaces web teriam tema dark tbm hahaha meus olhos agradecem