Anos atrás meu & quot; dev tools" bookmark folder tinha cerca de vinte entradas, cada uma um site de propósito único diferente, cada uma com seu próprio layout de anúncio, seu próprio banner de cookies e - essa é a parte que finalmente me incomodou - seu próprio servidor para o qual meus dados estavam sendo carregados silenciosamente Colei um token de API de teste em um deles para decodificá-lo, e no meio do caminho pensei: Eu não tenho ideia do que esse site faz com essa string Esse foi o dia em que parei de confiar em sites de ferramentas aleatórias e comecei a construir Toolz.dev, onde todas as ferramentas são executadas no seu navegador e nada que você cola sai da guia.
Este é o kit de ferramentas que saiu disso Não é um & quot; top 600 tools" listicle - Toolz.dev tem pouco mais de cinquenta ferramentas agora, e EU preferiria mostrar-lhe aquelas que um desenvolvedor web de trabalho abre toda semana do que preencher a contagem Eles são agrupados aqui pelo trabalho que você está fazendo: moldando dados, discutindo texto, escrevendo CSS, preping images, enviando SEO, e as tarefas de segurança e codificação no meio Tudo é gratuito, não precisa de conta e processa localmente.
tl;dr: Mantenha um grupo de guias do navegador aberto enquanto cria. Para dados: formatador json, json diff, Validador YAML, Visualizador de CSV. Para tokens de depuração: decodificador jwt, conversor de base64, conversor de carimbo de data/hora. Para Regex: testador regex. Para CSS: gerador de gradiente, seletor de cores, Minificador de CSS. Para imagens: redimensionar, compressa, conversor de formato. Para SEO: Gerador de meta tags, Abrir visualização do gráfico. Todos do lado do cliente, todos gratuitos.
Por que se preocupar com as ferramentas do navegador quando você tem um terminal?
Pergunta justa - Eu vivo em um terminal também A resposta honesta é que, para tarefas pontuais, olhe-at-it, uma ferramenta visual com feedback instantâneo bate lembrando o jq encantamento ou o openssl Bandeira. Quando uma API me entrega um blob minificado às 2 da manhã, não quero escrever um script de formatação; quero colá-lo e vê-lo. Quando preciso observar se duas respostas JSON diferem, um diferencial vermelho/verde é mais rápido do que passar por qualquer coisa.
Mas o fator decisivo não é a conveniência, é Para onde vão os dados. Um número enorme de & quot; online & quot grátis; ferramentas carregam o que você colar em um servidor para processá-lo Isso é bom para uma amostra pública e um problema genuíno para um token de produção, um registro de cliente ou um ativo inédito Toda ferramenta neste guia é executada inteiramente em seu navegador - o processamento acontece em JavaScript em sua máquina, e não há etapa de upload com a qual se preocupar Essa combinação, visual-e-instantâneo mais privado-por-padrão, é toda a razão para mantê-los em um grupo de guias em vez de descascar.
Dados de modelagem: JSON, YAML, CSV, XML
Esta é a categoria que mais uso, porque a maior parte do desenvolvimento da Web está movendo dados estruturados entre os sistemas e apertando os olhos quando ele quebra.
o formatador json é o cavalo de batalha - colar uma resposta API minificada e obter saída recuada e legível com o erro de sintaxe localizado quando o JSON é inválido. Quando você precisa saber O que mudou Entre duas cargas úteis, o json diff Compara estruturalmente em vez de linha por linha, portanto, as chaves reordenadas não criam diferenças fantasmas. Para o lado de configuração do trabalho, o Validador YAML pega as armadilhas silenciosas do YAML - guias em recuo, chaves duplicadas e as surpresas de coerção de tipo que giram version: 1.10 no número 1.1 - antes que um arquivo Kubernetes ou CI exploda uma implantação.
Os dados raramente permanecem em uma forma. o json para csv e csv para json Os conversores se movem entre a saída da API e as planilhas, o Visualizador de CSV Renderiza um CSV confuso como uma tabela real para que você possa realmente lê-lo, e o xml para json e json para yaml As ferramentas cobrem o formato de saltos que você acessa com APIs e arquivos de configuração legados. Se você deseja a versão mais profunda desta categoria, o Guia completo para ferramentas JSON Percorre todo o fluxo de trabalho.
Tokens e tempo de depuração: JWT, Base64, timestamps
Autenticação e hora são onde "o código parece certo" bugs vêm para se esconder, e quase sempre são resolvidos por Olhando para os dados Em vez de reler a lógica.
o decodificador jwt divide um token em cabeçalho, carga útil e assinatura e mostra as reivindicações - que é como você descobre isso exp você jurou que estava bem, na verdade está no passado. Alcance em vez de um decodificador genérico, porque os JWTs usam base64url (RFC 4648 §5), não padrão Base64, e uma planície conversor de base64 é a ferramenta certa para todo o resto - cabeçalhos de autenticação básicos, URIs de dados, cargas codificadas. O conversor de carimbo de data/hora Transforma os segundos e milissegundos do UNIX em datas reais (a mistura de segundos-vs-milisegundos é o bug de auth mais comum que vejo), e o conversor de fuso horário e Diferença de data As ferramentas lidam com as "que horas foram para o usuário" e "quanto tempo entre esses dois eventos". Eu escrevi todo o fluxo de depuração no Guia de ferramentas de depuração de API Se você quiser as histórias de guerra.
Regex sem adivinhação
Expressões regulares são write-once, debug-forever. o testador regex Permite criar um padrão em relação ao texto de amostra com o realce de partida ao vivo, para que você veja o que corresponde ao momento em que o digita em vez de implantar um validador e esperar. Se preferir montar um padrão de blocos de construção, o Construtor Regex se aproxima da outra direção. De qualquer forma, o ponto é o mesmo: teste o padrão contra strings reais antes de guardar um formulário ou analisar um log. o Guia do Construtor Regex Abrange os padrões comuns que valem a pena memorizar.
Disputa de texto: contagem, revestimento, diffing, espaço reservado
As tarefas de corda não glamourosas se somam. o contador de palavras Verifica o conteúdo em relação aos limites de comprimento (meta descrições, tweets, títulos). o conversor de caixa flips entre camelCase, snake_case, kebab-case e PascalCase - inestimável quando você está portando nomes de variáveis em uma base de código O Diferença de texto Compara dois blocos e destaca cada alteração, que é uma revisão de código fora do Git e a auditoria de configuração é feita em uma.
Para construir e prototipagem especificamente: o Gerador Lorem Ipsum Preenche as maquetes com o direito soma de texto de espaço reservado (existe um Guia completo para dimensionar o texto do espaço reservado), o gerador de slug Transforma os títulos em caminhos de URL limpos e o corda reversa A ferramenta lida com o estranho. o Guia de ferramentas de texto une-os juntos.
CSS e cor
O polonês front-end vive aqui. o gerador de gradiente fornece um editor visual para gradientes lineares e radiais e CSS de produção manual - sem adivinhação em ângulos e paradas (o guia de gradiente vai mais fundo). o seletor de cores Converte entre hexadecimal, RGB e HSL e é onde eu verifico o contraste antes que uma cor acabe falhando em uma auditoria de acessibilidade; o guia de seleção de cores Abrange a matemática do contraste. Na hora de enviar, o Minificador de CSS e Minificador de HTML Tira o espaço em branco e os comentários para raspar os bytes do fio.
Imagens para a web
As imagens geralmente são a coisa mais pesada em uma página, então esta categoria se paga Principais sinais vitais da Web. o Redimensionamento da imagem A ferramenta define as dimensões exatas (e há uma armadilha de retina que vale a pena conhecer, coberta em seu guia), o compressor de imagem diminui o tamanho do arquivo enquanto mantém a qualidade e o conversor de formato de imagem Move-se entre PNG, JPG e WebP para que você atenda o formato certo para o trabalho. o removedor de fundo é um removedor de teclas coloridas - rápido e privado, ótimo em fundos planos e honesto sobre seus limites guia. o Guia de ferramentas de imagem é o pilar deste conjunto.
Envio: SEO, compartilhamento e segurança
A última milha antes de uma página ser lançada. o Gerador de meta tags constrói seu título, descrição, Gráfico aberto, e etiquetas de cartão do Twitter, e o Abrir visualização do gráfico Mostra como o link ficará quando for compartilhado antes de você descobrir da maneira mais difícil nas redes sociais. o Gerador de Robôs.txt e Construtor UTM Lidar com as regras de rastreamento e o rastreamento de campanhas, e o Gerador QR Faz um código digitalizável para impressão ou slides. Do lado da higiene-segurança, o gerador de senha e gerador de haxixe cobrir fortes segredos e verificações de integridade, e o gerador de uuid Distribui identificadores para dados de teste e chaves de banco de dados.
Ferramentas do lado do cliente versus ferramentas baseadas em upload: a comparação que importa
| Toolz.dev (cliente) | Típico "ferramenta online grátis" | |
|---|---|---|
| Onde o processamento acontece | no seu navegador | Em um servidor remoto |
| Seus dados (tokens, arquivos, código) | Nunca sai da guia | enviado a terceiros |
| Cadastro/Login | nenhum | Freqüentemente exigido para recursos completos |
| Limites de uso | nenhum nas ferramentas | Freqüentemente limitado ou com paredes remuneradas |
| apressar | Instantâneo, sem ida e volta | Depende do upload + servidor |
| Funciona com dados confidenciais | Sim, por design | Arriscado - você está confiando no servidor deles |
| Número de ferramentas | Pouco mais de cinquenta, com curadoria | Geralmente uma ferramenta por site |
A linha com que mais me importo é a segunda Para uma amostra pública não importa onde o processamento acontece; para um segredo de produção é muito importante Construir todo o conjunto de ferramentas do lado do cliente significa que nunca tenho de perguntar ao & quot; é este o site seguro para colar isto no & quot; - todos eles são.
Como eu realmente uso isso: encadeie as ferramentas
A maioria das tarefas reais são um pequeno pipeline, nem um único clique:
Depurando uma resposta de API: cole-a na formatador json, decodifique qualquer token com o decodificador jwt, gire o exp reivindicar uma data com o conversor de carimbo de data/hora, então compare a resposta quebrada com uma de trabalho com o json diff.
Preparando uma imagem de herói: removedor de fundo Se ele precisa de um recorte, então Redimensionamento da imagem Para dimensões exatas, então compressor de imagem Para atingir o orçamento do peso da página, convertendo para o WebP com o conversor de formato Na saída.
Envio de uma nova página: gere tags com o Gerador de meta tags, verifique o cartão de compartilhamento no Abrir visualização do gráficoe confirme se a sua cópia se encaixa com o contador de palavras.
Mantenha os cinco ou seis que você toca diariamente em um grupo de tabulações fixados. O resto está a uma busca na paleta ⌘K quando você precisar deles.
Perguntas frequentes
Essas ferramentas de desenvolvedor web são realmente gratuitas?
Sim. Todas as ferramentas no Toolz.dev são gratuitas para usar sem nível premium, sem portão de recurso e sem limite de uso nas próprias ferramentas. Não é necessária uma conta para usá-los.
Tenho que criar uma conta ou fazer login?
não Abra uma ferramenta e use-a imediatamente. Não há inscrição e, como as ferramentas são executadas no seu navegador, não há nada para sincronizar com um perfil.
É seguro colar tokens, chaves ou dados privados?
Sim, e essa é a decisão de design principal As ferramentas processam tudo do lado do cliente em JavaScript, então o que você cola - um JWT, uma resposta de API, uma imagem inédita - é tratado em sua máquina e não é carregado em um servidor Essa é a principal razão para usá-los em vez de alternativas baseadas em upload.
Quantas ferramentas o Toolz.dev possui?
Pouco mais de cinquenta no momento, abrangendo categorias de dados, texto, codificação, CSS, cor, imagem, SEO, segurança e calculadora Eu preferiria aumentar o conjunto deliberadamente do que reivindicar um número que é principalmente de preenchimento - cada ferramenta listada aqui existe e funciona hoje.
As ferramentas funcionam no celular?
Sim, as interfaces são responsivas e funcionam em navegadores móveis Trabalhos mais pesados - processamento de imagens grandes especialmente - são mais rápidos e confortáveis no desktop, mas as próprias ferramentas são executadas de qualquer maneira.
Essas ferramentas funcionam offline?
Principalmente sim. Como cada ferramenta é executada em JavaScript no seu navegador, uma ferramenta continua funcionando sem conexão depois que sua página é carregada - útil em um plano ou em uma rede escamosa. Você só precisa estar online para abrir uma ferramenta na primeira vez; depois disso, o processamento em si não precisa de servidor.
Qual é a diferença entre as ferramentas online do lado do cliente e do lado do servidor?
Uma ferramenta do lado do cliente faz seu trabalho em seu navegador, de modo que os dados que você cola nunca saem de sua máquina Uma ferramenta do lado do servidor carrega sua entrada em um computador remoto para processá-la e envia o resultado de volta A saída pode parecer idêntica, mas apenas as ferramentas do lado do cliente mantêm um token de produção, arquivo privado ou registro do cliente fora de outra pessoa & #39; s servidor - e é por isso que cada ferramenta aqui é construída no lado do cliente.
Posso usá-los em vez de meu terminal ou ferramentas IDE?
Para tarefas pontuais e visuais - formatar um blob, decodificar um token, globo ocular um diff, construir um gradiente - eles são muitas vezes mais rápidos do que lembrar o equivalente da linha de comando Para o trabalho script, repetível você ainda vai querer seu terminal Na prática eles sentam lado a lado: disparar o pedido em seu cliente habitual, em seguida, colar a saída nestes para lê-lo.
Quais ferramentas devo marcar primeiro?
Comece com os que você tocará diariamente: o formatador json, decodificador jwt, testador regex, conversor de carimbo de data/horae qualquer uma das ferramentas de CSS ou de imagem que corresponda ao seu trabalho. Adicione o resto enquanto você acerta as tarefas que precisam deles.
Embrulhando
Um moderno web developer' s toolkit não é um grande aplicativo - é uma dúzia de ferramentas pequenas e afiadas que você alcança sem pensar A armadilha está espalhando-os em uma dúzia de sites esboçados que carregam seus dados para processá-lo A correção é manter os que você confia em um único grupo de guias, todos rodando localmente, todos gratuitos, todos a um toque de tecla de distância.
isso é o que Toolz.dev É: pouco mais de cinquenta dessas ferramentas, construídas para o cliente para que seus tokens e arquivos permaneçam seus. Fixe o formatador json, o testador regex, e o conversor de carimbo de data/hora hoje, e adicione o resto conforme o trabalho exigir. Gratuito para sempre, privado por design.
