Il Web Developer Toolkit che conservo in un gruppo di schede del browser (gratuito, nessun caricamento)

Anni fa il mio & quot;dev tools" bookmark folder aveva una ventina di voci, ognuna un diverso sito web monouso, ognuna con il proprio layout di annunci, il proprio banner di cookie, e - questa è la parte che alla fine mi ha dato fastidio - il proprio server su cui i miei dati venivano caricati silenziosamente Ho incollato un token API di staging in uno di essi per decodificarlo, e a metà ho pensato: Non ho idea di cosa faccia questo sito con quella stringa Quello è stato il giorno in cui ho smesso di fidarmi di siti di strumenti casuali e ho iniziato a costruire Toolz.dev, dove ogni strumento viene eseguito nel tuo browser e nulla che incolla lascia la scheda.

Questo è il toolkit che ne è uscito Non un & quot;top 600 tools" listicle - Toolz.dev ha poco più di cinquanta strumenti in questo momento, e preferirei mostrarvi quelli che uno sviluppatore web che lavora apre ogni settimana piuttosto che riempire il conteggio Sono raggruppati qui per il lavoro che stai facendo: modellare i dati, disputare il testo, scrivere CSS, preparare le immagini, spedire SEO e le faccende di sicurezza e codifica nel mezzo Tutto è gratuito, non ha bisogno di account ed elabora localmente.

tl; dr: Tieni aperto un gruppo di schede del browser durante la compilazione. Per i dati: Formattatore JSON, JSON DIFF, Condivisore di yam, Visualizzatore CSV. Per i token di debug: Decoder JWT, convertitore base64, Convertitore di timestamp. Per regex: tester regex. Per CSS: Generatore di sfuma, selettore, Minifier CSS. Per le immagini: ridimensionare, comprimere, convertitore di formato. per SEO: Generatore di meta tag, Apri l'anteprima del grafico. Tutto lato client, tutto gratuito.

Perché preoccuparsi degli strumenti del browser quando hai un terminale?

Domanda giusta - Anch'io vivo in un terminale La risposta onesta è che per attività una tantum, look-at-it, uno strumento visivo con feedback istantaneo batte il ricordare il jq incantesimo o il openssl Bandiera. Quando un'API mi consegna un blob minimizzato alle 2 del mattino, non voglio scrivere uno script di formattazione, voglio incollarlo e vederlo. Quando ho bisogno di guardare in modo che due risposte JSON siano diverse, un differenziale rosso/verde è più veloce di qualsiasi cosa.

Ma il fattore decisivo non è la convenienza, lo è Dove vanno i dati. Un numero enorme di & quot; online&quot gratuiti; gli strumenti caricano qualunque cosa incolli su un server per elaborarla Va bene per un campione pubblico e un problema autentico per un token di produzione, un record del cliente o una risorsa inedita Ogni strumento in questa guida viene eseguito interamente nel browser: l'elaborazione avviene in JavaScript sulla tua macchina e non c'è alcun passaggio di caricamento di cui preoccuparsi Quella combinazione, visuale e istantanea più privato per impostazione predefinita, è l'intera ragione per mantenerli in un gruppo di schede invece di sborsare.

Dati di modellatura: JSON, YAML, CSV, XML

Questa è la categoria che utilizzo di più, perché la maggior parte dello sviluppo web sta spostando i dati strutturati tra i sistemi e gli strizza gli occhi quando si rompe.

la Formattatore JSON è il cavallo di battaglia - incolla una risposta API minificata e ottieni un output rientrato e leggibile con l'errore di sintassi localizzato quando il JSON non è valido Quando devi sapere Cosa è cambiato Tra due payload, il JSON DIFF Confronta strutturalmente anziché riga per riga, quindi le chiavi riordinate non creano differenze fantasma. Per il lato di configurazione del lavoro, il Condivisore di yam cattura le tranquille trappole YAML: schede in rientro, chiavi duplicate e le sorprese di coercizione del tipo che girano version: 1.10 nel numero 1.1 - prima che un file Kubernetes o CI faccia saltare in aria una distribuzione.

I dati raramente rimangono in una forma. la JSON a CSV e CSV a JSON I convertitori si spostano tra l'output dell'API e i fogli di calcolo, il Visualizzatore CSV rende un CSV disordinato come una tabella reale in modo da poterlo effettivamente leggere e il XML a JSON e JSON a Yaml Gli strumenti coprono il formato di hop che colpisci con API e file di configurazione legacy. Se vuoi la versione più profonda di questa categoria, il Guida completa agli strumenti JSON cammina attraverso l'intero flusso di lavoro.

Token e ora di debug: JWT, Base64, timestamp

Auth e Time sono dove "il codice sembra giusto" i bug si nascondono e sono quasi sempre risolti da Guardando i dati Invece di rileggere la logica.

la Decoder JWT divide un token in intestazione, payload e firma e ti mostra le affermazioni, ed è così che lo scopri exp hai giurato che andava bene in realtà è nel passato Raggiungilo invece di un decoder generico, perché i JWT usano base64url (RFC 4648 §5), non la Base64 standard, e una pianura convertitore base64 è lo strumento giusto per tutto il resto - Intestazioni di autenticazione di base, URI di dati, payload codificati Il Convertitore di timestamp Trasforma i secondi e millisecondi di Unix in date reali (il mix-up dei secondi contro i millisecondi è il singolo bug di autenticazione più comune che vedo) e il Convertitore di fusi orari e DATA DIFFERENZA Gli strumenti gestiscono il "che ora era questo per l'utente" e "quanto tempo tra questi due eventi" domande. ho scritto l'intero flusso di debug nel Guida agli strumenti di debug dell'API Se vuoi le storie di guerra.

regex senza le congetture

Le espressioni regolari sono una volta, debug-forever. la tester regex Ti consente di creare un modello contro il testo di esempio con l'evidenziazione della partita dal vivo, in modo da vedere cosa corrisponde al momento in cui lo digiti invece di distribuire un validatore e sperare. Se preferisci assemblare un modello da elementi costitutivi, il Costruttore di regex si avvicina dall'altra direzione. In ogni caso, il punto è lo stesso: testa il modello contro stringhe reali prima che protegga un modulo o analizzi un registro. la Guida alla creazione di regex Copre i modelli comuni che vale la pena memorizzare.

Disturbi del testo: conteggio, involucro, diff, segnaposto

Le faccende d'archi non glamour si sommano. la Contatore di parole Controlla il contenuto rispetto ai limiti di lunghezza (meta descrizioni, tweet, intestazioni). la convertitore di borsa capovolge tra camelCase, snake_case, kebab-case e PascalCase - prezioso quando si stanno portando nomi di variabili attraverso una base di codice Il testo Differenza Confronta due blocchi ed evidenzia ogni modifica, che è una revisione del codice al di fuori di git e il controllo della configurazione trasformato in uno.

Per la costruzione e la prototipazione in particolare: Generatore di Ipsum di Lorem riempie i modelli con la destra somma del testo segnaposto (c'è a Guida completa al dimensionamento del testo segnaposto), il generatore di lumache Trasforma i titoli in percorsi URL puliti e il Stringa inversa Tool gestisce lo strano one-off. la Guida agli strumenti di testo legali insieme.

CSS e colore

Lo smalto front-end vive qui. la Generatore di sfuma ti offre un editor visivo per gradienti lineari e radiali e restituisce la produzione CSS: nessuna ipotesi ad angoli e arresti (il Guida al gradiente va più in profondità). la selettore converte tra hex, rgb e hsl ed è dove controllo il contrasto prima che un colore finisca per non riuscire a un audit di accessibilità; il Guida al selettore di colori Copre la matematica del contrasto. Quando è il momento di spedire, il Minifier CSS e Minifier HTML Striscia lo spazio bianco e i commenti per radere i byte dal filo.

immagini per il web

Le immagini sono di solito la cosa più pesante su una pagina, quindi questa categoria si ripaga da sola Vitali Web principali. la Ridimensionamento immagine lo strumento imposta le dimensioni esatte (e c'è una trappola per retina che vale la pena conoscere, coperta nella sua guida), il compressore di immagini riduce le dimensioni del file mentre si tiene in mano la qualità e il Convertitore di formati immagine Si sposta tra PNG, JPG e WebP in modo da servire il formato giusto per il lavoro. la solvente per sfondo è un dispositivo di rimozione dei tasti di colore: veloce e privato, ottimo su sfondi piatti e onesto riguardo ai suoi limiti guida. la Guida agli strumenti di immagine è il pilastro di questo set.

Spedizione: SEO, condivisione e sicurezza

l'ultimo miglio prima che una pagina venga pubblicata. la Generatore di meta tag costruisce il tuo titolo, descrizione, Grafico apertoe tag di carte Twitter e il Apri l'anteprima del grafico Mostra come apparirà il collegamento quando verrà condiviso prima di scoprirlo a proprie spese sui social. la Generatore robots.txt e Costruttore di UTM gestire le regole di scansione e il monitoraggio della campagna e il Generatore QR Crea un codice scansionabile per la stampa o le diapositive. Dal punto di vista della sicurezza-igiene, il Generatore di password e Generatore di hash coprire forti segreti e controlli di integrità, e il Generatore di UUID Sputa gli identificatori per i dati di test e le chiavi del database.

Strumenti lato client e strumenti basati sul caricamento: il confronto che conta

La riga che mi interessa di più è la seconda Per un campione pubblico non importa dove avviene l'elaborazione; per un segreto di produzione conta enormemente Costruire l'intero toolkit lato client significa che non devo mai chiedere a & quot; è questo il sito sicuro per incollarlo in& quot; - lo sono tutti.

Come lo uso effettivamente: incatenare gli strumenti

La maggior parte delle attività reali sono una piccola pipeline, non un solo clic:

Debug di una risposta all'API: incollala nel Formattatore JSON, decodifica qualsiasi token con il Decoder JWT, girare il exp reclamo in una data con il Convertitore di timestamp, quindi confrontare la risposta rotta con una funzionante con il JSON DIFF.

Preparare un'immagine da eroe: solvente per sfondo Se ha bisogno di un ritaglio, allora Ridimensionamento immagine Per le dimensioni esatte, quindi compressore di immagini per raggiungere il tuo budget per il peso della pagina, convertendo in WebP con il convertitore di formato In uscita.

Spedizione di una nuova pagina: genera tag con il Generatore di meta tag, controlla la carta di condivisione in Apri l'anteprima del grafico, e conferma che la tua copia si adatta al Contatore di parole.

Tieni i cinque o sei che tocchi ogni giorno in un gruppo di schede bloccato. Il resto è a una ricerca nella tavolozza ⌘K quando ne hai bisogno.

Domande frequenti

Questi strumenti per sviluppatori web sono davvero gratuiti?

si. Ogni strumento su Toolz.dev è gratuito da utilizzare senza livello premium, senza gate di funzionalità e senza limite di utilizzo sugli strumenti stessi. Non è richiesto alcun account per utilizzarli.

Devo creare un account o accedere?

no Aprire uno strumento e usarlo immediatamente. Non c'è registrazione e poiché gli strumenti vengono eseguiti nel browser non c'è nulla da sincronizzare con un profilo.

È sicuro incollare token, chiavi o dati privati?

Sì, e questa è la decisione di progettazione principale Gli strumenti elaborano tutto lato client in JavaScript, quindi ciò che incolli - un JWT, una risposta API, un'immagine inedita - viene gestito sulla tua macchina e non viene caricato su un server Questo è il motivo principale per utilizzarli su alternative basate su upload.

Quanti strumenti ha Toolz.dev?

Poco più di cinquanta al momento, che spaziano tra categorie di dati, testo, codifica, CSS, colore, immagine, SEO, sicurezza e calcolatrice, preferirei far crescere il set deliberatamente piuttosto che rivendicare un numero che è per lo più riempitivo - ogni strumento qui elencato esiste e funziona oggi.

Gli strumenti funzionano su dispositivi mobili?

Sì, le interfacce sono reattive e funzionano nei browser mobili Lavori più pesanti - soprattutto l'elaborazione di immagini di grandi dimensioni - sono più veloci e più comodi sul desktop, ma gli strumenti stessi funzionano in entrambi i modi.

Questi strumenti funzionano offline?

Per lo più sì. poiché ogni strumento viene eseguito in JavaScript nel browser, uno strumento continua a funzionare senza connessione una volta caricata la sua pagina - utile su un aereo o su una rete traballante. Devi solo essere online per aprire uno strumento la prima volta; dopodiché l'elaborazione stessa non necessita di server.

Qual è la differenza tra gli strumenti online lato client e lato server?

Uno strumento lato client fa il suo lavoro nel browser, quindi i dati che incolli non lasciano mai la tua macchina Uno strumento lato server carica il tuo input su un computer remoto per elaborarlo e invia indietro il risultato L'output può sembrare identico, ma solo gli strumenti lato client mantengono un token di produzione, un file privato o un record cliente da qualcun altro e il server n. 39; s - motivo per cui ogni strumento qui è costruito lato client.

Posso usarli al posto del mio terminale o degli strumenti IDE?

Per attività visive una tantum - formattare un blob, decodificare un token, osservare un diff, costruire un gradiente - sono spesso più veloci che ricordare l'equivalente della riga di comando Per il lavoro con script e ripetibili vorrai comunque il tuo terminale In pratica si siedono fianco a fianco: attiva la richiesta nel tuo client abituale, quindi incolla l'output in questi per leggerlo.

Quali strumenti devo aggiungere per primo ai segnalibri?

Inizia con quelli che toccherai ogni giorno: il Formattatore JSON, Decoder JWT, tester regex, Convertitore di timestamp, e qualsiasi dei CSS o degli strumenti di immagine corrisponda al tuo lavoro. Aggiungi il resto mentre colpisci le attività che ne hanno bisogno.

incasso

Un moderno sviluppatore web's toolkit non è una grande app - è una dozzina di piccoli strumenti taglienti che si raggiunge senza pensare La trappola li sta sparpagliando su una dozzina di siti web abbozzati che caricano i tuoi dati per elaborarlo La correzione sta mantenendo quelli di cui ti fidi in un singolo gruppo di schede, tutti in esecuzione localmente, tutti gratuiti, tutti a una sola sequenza di tasti.

ecco cosa Toolz.dev IS: Poco più di cinquanta di questi strumenti, lato client costruito in modo che i tuoi token e file rimangano tuoi. Appunta il Formattatore JSON, il tester regex, e il Convertitore di timestamp oggi, e aggiungi il resto a seconda del lavoro. Gratuito per sempre, privato di progettazione.