Extensões & Add-ons

[heliomsolivas]

Pessoal gostaria de uma troca de informações sobre extensões úteis na hora do desenvolvimento, no meu caso o dev tools do Chrome faz quase tudo, fora ele Colorzilla e o LiveReload, me mostraram uma extensão chamada Wappalyzer hoje também que mostra as tecnologias utilizada no site em que você está, achei bem maneira.

[rickbenetti]

Como estou mudando de área hoje mantenho estes:

• foco front: wappalyzer, awesome screenshot, gist box, colorzilla, toggl timer, github notifier.
• foco design: wappalyzer, awesome screenshot, screencastify, colorzilla, toogl timer.

outros que tenho: readability (no safari é nativo), pinterest, evernote, dropbox, convert to markdown.

[lucasbento]

• Wappalyzer: veja a stack que a página está utilizando;
• Markdown Here: escreva qualquer coisa em um campo WYSIWYG usando markdown (não é bem segmentado pra dev mas ajuda pra caralho);
• JSONView: JSON formatado;
• Octotree: Arquivos dos projetos no github exibidos em árvore;
• Colorzilla: colorpicker;
• Postman: Testar suas APIs REST;
• Firebug (Firefox): eu não sei porquê mas eu não gosto do Chrome DevTools :/

Não conhecia o LiveReload, vou testar!

[felipefialho]

Para foco:

• Tomato Timer - Para contar pomodoros

Extensões:

• DevTools - Básico
• Colorzilla - Colorzilla... padrão
• Page Ruler - Uma régua maneira para medir alinhamentos
• TechSmith Snagit - O melhor que testei para gravar videos e pegar screen das telas

---

Já usei muito mais coisas, mas atualmente só isso da conta do recado.

[mikejavier]

Meu navegador padrão é o FF e nele o devtools ja tem um Colorzilla embutido + page rules + page screenshot. Fora isso para complementar utilizo o Evernote Web clipper para salvar os artigos legais da net e wappalyzer.

@rkb81 Gostei de alguns add-ons que vc utiliza vou testar aqui tb.

[DevCarlosAugusto]

Vou testar essa 'TechSmith Snagit', 'Tomato Timer' e 'Octotree'.
Já uso o JSONView, colorzilla, the great suspender, editthiscookie e gridruler.

[vitor-mendrone-deel]

Por aqui eu utilizo:

• Save To Pocket (para salvar artigos interessantes)
• PerfectPixel (cria uma layer com transparência pra comparar uma imagem com o site)
• Google Tag Assistant (Como trampo com E-commerce, ajuda a saber quais tags (Analytics e Adwords) a loja utiliza e se foram implementadas corretamente)
• SEO Stats - Faz uma análise rápida do site com diversas outras informações úteis (número de páginas indexadas em diversos sites de busca, pagerank, etc)
• Page Ruler (Régua pra verificar alinhamentos)
• Emmet re:view (Mostra múltiplas versões da página em uma variedade de viewports *by Emmet Team)

[felipefialho]

Legal esse Emmet re:view, não conhecia.

[dougaraujos]

Além dos citados anteriormente:

• Dimensions (para mensurar elementos e imagens no browser)
• SVG Navigator (abrir arquivos SVG no Chrome)

[tcelestino]

Mesmo achando o DevTools do Chrome muito mais completo, uso o DevTools do Firefox e Firefox Developer para "debugar" as aplicações que estou desenvolvendo, além das extensões abaixo:

• GreaskeMonkey - se curte customizar, alterar, remover etc... algo em algum site, com essa extensão fica bem simples de realizar isso.
• Forest - para vc não sair do foco. Essa comecei usar recentemente
• JSONView - deixe a visualização de dados via JSON mais "pretty".
• RestClient - alternativa do POSTman do Chrome para o Firefox
• React DevTools - melhor ferramenta para debugar seus componentes React.
• Backbone Eye - debugar aplicações em Backbone. Só ativo quando uso o Firebug (só por causa dele)
• User Agent Override - o Firefox ainda não tem um gerenciador de user-agent nativo (parece que logo, logo, teremos), como o Chrome ou o Safari.

Extras

• Ghostery - desativa um monte de scripts que rodam por trás quando você acessa um site.
• GSantizer - remove o tracking do Google quando clica em algum link no resultado da busca.
• LastPass - gerenciador de senhas
• Pushbullet - compartilhe tudo em diversos dispositivos
• Hide Unwanted Results of Google Search - remove resultados de busca no Google que você não quer como referência. Eu uso por exemplo para esconder todos os links do W3Schools

[victorserpac]

To meio atrasado na Issue, mas eu gosto de usar o Fontface Ninja pra debugar fontes em geral.

[fabricionaweb]

@tcelestino testando esse forest caiu como uma luva, achei genial e estava buscando um pomodoro motivacional 😁