Ferramentas de produtividade do desenvolvedor: o 40 abro na verdade toda semana

Eu mantenho uma janela do navegador aberta no meu segundo monitor que não passa de guias de utilidade. JSON Formatter, Conversor de carimbo de data/hora, testador regex, gerador de hash. Ele está lá há anos, por meio de WP Adminify Releases, por meio de projetos paralelos Laravel, por meio de todas as sessões de depuração tarde da noite, onde uma carga útil do webhook chega minificada e eu preciso ver o que está realmente nisso.

Por muito tempo aquelas abas apontavam para sete sites diferentes Alguns estavam bem Alguns eram fazendas de anúncios que carregavam minha carga útil para um servidor I & #39; nunca tinha ouvido falar Um deles - I & #39; não vou nomeá-lo - EU colei uma encenação JWT antes que o pensamento me alcançasse: Esse token simplesmente passou pelo fio para a caixa de outra pessoa. Foi um sinal de encenação, nada queimado, mas a sensação presa. Eu construí o Toolz.dev em parte porque queria minha própria guia de tabulação e em parte porque nunca mais quis cometer esse erro em particular.

Portanto, esta não é uma lista de 500 ferramentas raspadas de um diretório. É o conjunto que realmente está vivo Toolz.dev neste momento - 40-odd deles - organizado da maneira que EU usá-los: pelo momento no dia de trabalho quando EU chegar para um Cada um executa em seu navegador Nada uploads Não há conta.

tl;dr: Os cinco eu mais abro, por uma milha: formatador json Para respostas de API ilegíveis, conversor de carimbo de data/hora Para forense de log, testador regex Para trabalhos de padrões, conversor de base64 Para JWTs e URIs de dados, e gerador de uuid para semear dados de teste Tudo abaixo é executado no lado do cliente - sua carga útil nunca sai da guia Se você marcar apenas uma coisa, marque o formatador JSON.

Por que não usar a CLI?

Pergunta justa, e eu uso a CLI. jq É melhor do que qualquer ferramenta da web para scripts. base64 -d são dois pressionamentos de tecla. Se uma tarefa estiver entrando em um script de shell, ela pertence a um script de shell.

Mas existem três situações em que uma guia do navegador realmente vence e, após cerca de uma década fazendo isso, parei de me sentir culpado por eles:

1. Loops de feedback visual. Regex é o óbvio. Ver 14 correspondências acenderem em uma amostra de texto real enquanto você digita é uma atividade diferente de executar grep -P e obtendo um sim/não. O mesmo para gradientes e cores - você não pode usar um código hexadecimal.
2. A máquina não é sua. Laptop cliente, máquina de trabalho bloqueada, mesa de outra pessoa durante uma sessão de emparelhamento. não jq, sem direitos de instalação, sem tempo.
3. A tarefa é genuinamente única. Não estou escrevendo um script Python para converter um CSV em JSON. Vou colar, clicar e seguir em frente com minha vida.

Aqui está a comparação honesta que daria a um desenvolvedor júnior perguntando sobre qual usar:

Essa última linha é a regra real que eu sigo. Se eu vou fazer uma coisa mais que duas vezes, ele vai em um script. Todo o resto recebe uma guia.

Quais ferramentas eu abro durante um dia ruim de API?

Este é o cluster que ganha seu sustento. Uma API de terceiros está se comportando mal, você tem uma carga útil e precisa entendê-la antes de consertar qualquer coisa.

JSON Formatter - aquele que eu e #39; manteria se eu pudesse manter apenas um

JSON minificado é ilegível e pior quando é invalidar O erro do navegador informa "Token inesperado" e um deslocamento de personagem que não significa nada para um humano. o formatador json pretty-prints-lo com recuo real e pontos na linha real que & #39; s quebrado. Noventa por cento do tempo o culpado é uma vírgula à direita, que é legal em literais objeto JavaScript e ilegal em JSON - uma distinção que me custou mais horas do que EU quero somar Mergulho mais profundo: Como formatar JSON online.

Conversor Base64 - para JWTs e URIs de dados

Um JWT é três segmentos de base64URL separados por pontos. Cole o do meio no conversor de base64 e você pode ler as reivindicações - emissor, vencimento, escopos - sem enviar o token para um decodificador de terceiros. (Eu uso o decodificador jwt quando EU quero todos os três segmentos analisados de uma vez, mas EU ainda alcanço o Base64 bruto quando uma carga parece estranha e EU quero ver os bytes.) O Unicode entendi e por quê btoa() joga um emoji, está no Guia de codificação de base64.

Conversor de carimbo de data/hora - log forensics

1752278400. Isso é ontem ou 2029? o conversor de carimbo de data/hora gira Unix segundos, milissegundos e ISO 8601 em algo que um ser humano pode raciocinar, no fuso horário com o qual você se preocupa Dois terços da minha depuração de incidentes estão alinhando carimbos de data/hora de três serviços que cada um registrou em um formato diferente, e um deles está em UTC enquanto os outros são & #39; t.

Validador YAML - porque o recuo é de suporte de carga

Kubernetes Manifestos, GitHub Actions, Docker-compose. YAML é significativo em espaços em branco e irá reinterpretar silenciosamente sua intenção em vez de errar. o Validador YAML Captura o espaço em relação ao espaço e o não aspas no Esse YAML 1.1 analisa como booleano false. (Sim, realmente. O problema da Noruega é real: o código do país NO torna-se false A menos que você cite.)

JSON Diff - o que realmente mudou?

Duas respostas da API, uma de trabalho e outra não. Olhar para eles lado a lado em um editor de texto é um jogo perdido. json diff Mostra as três chaves que diferem e ignoram as 200 que não.

o resto da prateleira de depuração

• formatador sql- para a consulta de 90 linhas com quatro junções que alguém escreveu em uma linha.
• gerador de haxixe- MD5/SHA-1/SHA-256/SHA-512, principalmente para verificar um download ou uma chave de cache.
• analisador de cron- porque 0 */2 * * * e */2 * * * * Diferem por um personagem e cerca de sessenta vezes a carga.
• desmarcar-PHP serialize() saída de um wp_options linha. Se você já depurado as configurações armazenadas de um plugin do WordPress, sabe exatamente por que isso existe.

O que eu uso quando estou escrevendo código, não depurando?

Regex, sem adivinhar

eu escrevo regex no testador regex Antes mesmo de tocar uma base de código. Cole uma amostra realista, escreva o padrão, assista ao destaque das partidas. o Construtor Regex é a outra metade disso - it' s para quando você sabe o que quer em inglês e can't lembre-se se it's \b ou \B. A folha de dicas de padrão completo, além da armadilha catastrófica de retrocesso que pode congelar um servidor com um quantificador aninhado, está no Guia do Construtor Regex.

UUIDs para semear

Vinte linhas de teste, vinte IDs exclusivas, agora mesmo. gerador de uuid faz v1, v4 e v7 em massa. Use v7 para novas chaves primárias - it' s ordenada no tempo, para que seu índice da árvore B não seja ' t seja destruído por inserções aleatórias. Aprendi isso da maneira cara e escrevi no Guia do gerador UUID.

Codificação, ambos os sabores

codificador de url Para strings de consulta que contêm & e = e um espaço. entidades html Por enquanto você precisa exibir <script> em uma página como texto e não como um relatório de incidente. Esses dois são chatos e eu os uso constantemente.

disputa de formato

Os dados chegam na forma errada, aproximadamente sempre. O conjunto de conversões cobre os movimentos que eu realmente faço:

• json para csv- quando uma parte interessada pede o & quot; os dados" e significa uma folha de cálculo Os objectos aninhados são achatados em colunas de notação de pontos Detalhes no Guia JSON para CSV.
• csv para json- o inverso, para semeadura.
• json para yaml- para transformar um blob de configuração em algo que um ser humano editará.
• xml para json- toda integração SOAP legada, para sempre.
• tradutor binário- texto ↔ binário/hex/decimal/octal. Principalmente para ensino e para byte de protocolo ímpar.

Toda a prateleira de codificação, com o raciocínio por trás de cada um, está no Guia de ferramentas de codificação.

Quais devo usar para texto e conteúdo?

Eu escrevo muito - documentos de plugins, changelogs, este blog Estas são as ferramentas entre rascunho e publicação.

• contador de palavras- palavras, caracteres, tempo de leitura Também a maneira mais rápida de verificar uma meta descrição em relação ao orçamento de 160 caracteres antes que o Google a trunque Mais no Guia do contador de palavras.
• conversor de caixa- camelCase, snake_case, kebab-case, PascalCase. Eu renomeio variáveis em massa dessa forma com mais frequência do que uso minha ferramenta de refator editor & #39; s, que é levemente embaraçosa, mas verdadeira. guia do conversor de caixa.
• gerador de slug- título do URL, com diacríticos tratados adequadamente. Café Décor deve se tornar cafe-decor, não caf-dcor.
• Diferença de texto- dois ficheiros de configuração, ou duas versões de um parágrafo, lado a lado.
• Lorem ipsum- cópia de espaço reservado para um layout que ainda não possui conteúdo.
• corda reversa- nicho, mas aparece na preparação de entrevistas e nas verificações do palíndromo mais do que você e #39; eu acho.

O conjunto de texto completo é abordado no Guia de ferramentas de texto.

E quanto ao design e ao trabalho de front-end?

Sou um desenvolvedor que precisa fazer as coisas parecerem aceitáveis, não um designer. Esse é um trabalho específico, e esses três fazem isso.

• seletor de cores- HEX ↔ RGB ↔ HSL, com verificação de contraste para que você faça don' t enviar texto corporal 3:1. HSL é o formato que torna os estados de hover uma subtração em vez de um palpite Tratamento completo: Seletor de cores e guia do conversor.
• gerador de gradiente- linear, radial, cônico, com visualização ao vivo e CSS copiável. Escrita conic-gradient() Cego é um tipo especial de miséria. Guia do gerador de gradiente CSS.
• Minificador de CSS e Minificador de HTML- no momento você precisa inserir algo em um <style> Marca e quer pequeno.
• Gerador de meta tags- título, descrição, Gráfico aberto, cartões do Twitter e JSON-LD em uma passagem. Construí isso porque estava escrevendo à mão as mesmas quatorze tags em todos os projetos.

O que eu uso para arquivos - imagens, PDFs, tudo mais?

Todas as ferramentas de imagem são executadas por meio da API do Canvas do navegador, o que significa que um PNG de 4 MB nunca sai da sua máquina. Isso não é marketing; é apenas o que acontece quando o processamento é um <canvas> E não um pedido de postagem.

• imagem compactar- controle deslizante de qualidade, leitura de tamanho ao vivo A maioria das capturas de tela que envio deixam cair 708% sem diferença visível Veja o. Guia de compressão de imagens.
• Redimensionamento da imagem- dimensões exatas ou uma porcentagem, proporção bloqueada.
• conversor de formato- PNG/JPEG/WebP/AVIF. WebP é o padrão que envio agora.
• removedor de fundo- executa o modelo de segmentação no navegador It' é a única ferramenta onde noto a primeira carga.
• Gerador QR- URLs, credenciais WiFi, vCards. Escrevi o codificador ISO/IEC 18004 para este à mão, correção de erros e tudo, o que foi um ótimo uso de um fim de semana ou terrível.
• gerador de senha- usos crypto.getRandomValues(), não Math.random(). Essa distinção importa mais do que o controle deslizante de comprimento.

E algumas probabilidades e fins que eu construí porque precisei delas uma vez e depois continuei precisando delas: conversor de unidade, calculadora de porcentagem, Diferença de data, texto para caligrafia.

O conjunto de imagens mais amplo está no Guia de ferramentas de imagem, e os PDFs recebem seu próprio tratamento no Guia de ferramentas de PDF.

Como essas cadeias juntas no trabalho real?

Individualmente, cada ferramenta economiza um minuto. A composição acontece quando você os encadeia. Aqui está uma sequência real de uma semana atrás, depurando uma integração que retornava 401s intermitentemente:

1. Copie a solicitação com falha Authorization Cabeçalho. Dividir nos pontos, cole o segmento dois no conversor de base64. compreender exp.
2. exp É um timestamp Unix. no conversor de carimbo de data/hora. Ele expirou 41 segundos antes do pedido ser disparado.
3. Esse é um problema de distorção do relógio, não um problema de autenticação. Verifique o cron de atualização com o analisador de cron- foi refrescar o token a cada 60 minutos para um token com um TTL de 60 minutos. Sem margem. Condição de corrida.
4. Altere o cron para 50 minutos. FEITO.

Quatro ferramentas, talvez três minutos, e a resposta foi uma mudança de um caractere para uma expressão cron A alternativa - adicionar registro, reimplantar, esperar que ele se repetisse - era meio dia.

A outra rede que eu corro constantemente é a do conteúdo: rascunho → contador de palavras → gerador de slug → imagem compactar Para a imagem do cabeçalho → Gerador de meta tags → Publicar.

Por que "o cliente" realmente importa?

Por causa da história do token no topo desta postagem, principalmente. Mas deixe-me ser preciso sobre a afirmação em vez de ondulada à mão, pois "privacidade primeiro" é uma frase que foi drenada de todo o significado.

Quando uma ferramenta é do lado do cliente, o arquivo ou a string que você cola é manipulada por JavaScript em execução em sua guia. Ele entra em uma variável na memória do seu navegador e é resultado. não existe fetch(), não FormData, sem upload. Você pode verificar isso em cerca de dez segundos: abra o DevTools, vá para a guia Rede, cole algo em qualquer ferramenta no Toolz.dev e veja nada acontecer. Essa é a prova inteira. Se uma solicitação de rede for atendida ao clicar em "Converter", seus dados estão no servidor de alguém.

O que isso te compra concretamente:

• Você pode colar segredos. Preparação de tokens, respostas internas da API, CSV do cliente do cliente. Não vai a lugar nenhum.
• É rápido. Não há ida e volta. Um arquivo JSON de 5 MB, no tempo que o navegador leva para analisá-lo.
• Sem tamanho de arquivo Além do seu próprio RAM.
• Sem limite de taxa, Porque não há servidor para limitar você.

A troca é real e eu o nomeei: trabalho pesado (um vídeo de 200 MB, um OCR que ultrapassa 500 páginas) é genuinamente mais lento em um navegador do que em um servidor com uma GPU. O lado do cliente é o padrão correto, não uma resposta universal.

Perguntas frequentes

Essas ferramentas de produtividade do desenvolvedor são realmente gratuitas?

Sim - sem conta, sem limite de uso, sem teste que expira As ferramentas são executadas em sua máquina, o que significa que elas não me custam efetivamente nada por uso, o que significa que não há nada para medir.

Preciso de uma conta para usá-los?

não Abra uma ferramenta, use-a, feche a guia. Não há um mural de inscrição e, como o processamento é do lado do cliente, não há sessão para anexar seus dados em primeiro lugar.

É seguro colar dados confidenciais, como chaves de API ou tokens?

Para as ferramentas do lado do cliente, sim - e você pode confirmá-lo em vez de confiar em mim. Abra seu navegador & #39; s DevTools Network aba, cole e observe as solicitações de saída Existem & #39; t qualquer. A única coisa que I & #39; ainda evite em qualquer lugar, inclusive aqui, é colar um produção segredo você pode & #39; t girar - não por causa da ferramenta, mas porque pranchetas, compartilhamentos de tela e extensões de navegador são todas superfícies de ataque reais.

Essas ferramentas funcionam offline?

A página precisa carregar uma vez. Depois disso, a maioria das ferramentas continua funcionando se sua conexão cair, porque o JavaScript que faz o trabalho já está na sua guia. Recarregue a página enquanto estiver offline e você não receberá nada.

Como eles se comparam a ferramentas da CLI, como JQ ou OpenSSL?

Trabalhos diferentes CLI ganha por qualquer coisa com script, repetido, ou em CI - it' s composable e reprodutível As ferramentas do navegador ganham para tarefas pontuais, qualquer coisa que se beneficie de uma visualização visual (regex, gradientes, cores, qualidade de imagem), e máquinas onde você pode' t instalar software Eu uso tanto diariamente e don' t think it' s uma competição.

Quais ferramentas devo marcar primeiro?

Se você escrever um código: JSON Formatter, Timestamp Converter, Regex Tester, Base64 Converter. Se você escrever conteúdo: contador de palavras, gerador de lesmas, compactação de imagem. Se você fizer frontend: seletor de cores, gerador de gradiente, gerador de meta tag. Marque-os como uma pasta e clique com o botão em meio na pasta para abri-los de uma vez.

As ferramentas funcionam no celular?

Eles're responsivo e eles funcionam, mas I & #39; vai ser honesto - EU projetei-los para um teclado e uma ampla janela de visualização tarefas de colar e copiar são bem em um telefone Qualquer coisa que envolva um espectro de cores ou uma amostra regex vai ser uma luta.

Existe uma API para essas ferramentas?

Atualmente não. Tudo é do lado do cliente por design, o que está fundamentalmente em desacordo com uma API do lado do servidor. Para uso programático, as operações subjacentes estão todas a uma chamada de biblioteca em qualquer idioma que você e #39; já está escrevendo - json_encode, base64_decode, preg_match, e assim por diante.

Quais são as melhores ferramentas online gratuitas para desenvolvedores?

Depende do seu trabalho, mas um núcleo sólido cobre a formatação e inspeção (JSON Formatter, Base64 Converter), o tempo e o texto (conversor de carimbo de hora, contador de palavras, gerador de slug), trabalho de padrão (testador regex) e mídia (imagem compactada, seletor de cores). O Toolz.dev mantém mais de 600 deles em um só lugar, todos gratuitos e do lado do cliente. A melhor ferramenta geralmente é aquela já aberta em uma guia quando você atinge o atrito.

Posso usar essas ferramentas de desenvolvedor sem instalar nada?

Sim - não há nada para instalar e nenhuma extensão para adicionar Cada ferramenta é uma página web que executa sua lógica em seu navegador, então você abre uma URL e começa a trabalhar em qualquer sistema operacional Uma vez que a página carregada continua funcionando mesmo que sua conexão caia.

a versão curta

A produtividade do desenvolvedor não é um grande desbloqueio. É a remoção de uma centena de pequenos atritos: a carga útil que você não pode ler, o registro de tempo que você não pode analisar, o regex que você está imaginando, a captura de tela de 4 MB quando deveria ser de 400 KB. Nenhum deles individualmente vale uma postagem no blog. Coletivamente, eles são a maior parte da diferença entre um dia em que você enviou algo e um dia em que estava ocupado.

Tudo aqui está em Toolz.dev, grátis, no seu navegador, com seus dados permanecendo em sua máquina. Comece com o formatador json- se você pegar apenas uma guia deste post, essa é a 39a; é aquele que se paga na hora do almoço.