何年も前に私の "dev tools" bookmark フォルダーには約 20 のエントリがあり、それぞれが異なる単一目的の Web サイトで、それぞれに独自の広告レイアウト、独自の Cookie バナーがあり、そして - これが最終的に私を悩ませた部分です - 私のデータが静かにアップロードされていた独自のサーバーにステージング API トークンを貼り付けてデコードしました。途中で私はこう思いました。このサイトがその文字列で何をしているのか全く分かりません。その日、ランダムなツール サイトの信頼をやめて構築を開始しました Toolz.devでは、すべてのツールがブラウザーで実行され、何も貼り付けられなくてもタブから出ます。
これがその中から生まれたツールキットです。 "top 600 tools" listicle - Toolz.dev には現在 50 を超えるツールがあり、数えるよりも稼働中の Web 開発者が毎週開くツールを紹介します。これらは、データの整形、テキストの絞り込み、CSS の作成、画像の準備、SEO の出荷、およびその間のセキュリティとエンコードの雑務など、行っている仕事ごとにグループ化されています。すべてが無料で、アカウントは必要なく、ローカルで処理されます。
tl;dr: ビルド中は、ブラウザー タブ グループを 1 つ開いたままにします。 データの場合: JSON フォーマッタ、 json 差分、 YAML バリデータ、 CSVビューア。 トークンのデバッグの場合: JWT デコーダ、 Base64 コンバーター、 タイムスタンプ コンバーター。 正規表現の場合: 正規表現テスター。 CSS の場合: グラデーションジェネ、 カラーピッカー、 CSS ミニファイア。 画像の場合: リサイズする、 圧縮する、 フォーマット変換。 SEOの場合： メタ タグ ジェネレーター、 グラフのプレビューを開く。 すべてのクライアント側、すべて無料。
端末を持っているのに、なぜわざわざブラウザ ツールを使うのですか?
公正な質問 - 私も端末に住んでいます。正直な答えは、1 回限りのルック アット イット タスクの場合、インスタント フィードバックを備えたビジュアル ツールが、その記憶に拍車をかけるということです jq 呪文か openssl フラグ。 午前 2 時に API が小規模な BLOB を渡したとき、フォーマット スクリプトを作成したくないので、貼り付けて表示したいと考えています。 2 つの JSON 応答が異なるかどうかに注目する必要がある場合、赤と緑の差分は、何かを通過するよりも高速です。
しかし、決定要因は利便性ではありません。 データがどこに行くのか。 "free online" tools upload whatever you pasted to server to process it.公開サンプルならそれでいいし、本番トークン、顧客レコード、未公開アセットなら真の問題だ このガイドのツールはすべてブラウザーで完全に動作します - 処理はマシン上の JavaScript で行われ、心配するアップロード手順はありません。 visual-and-instant プラス private-by-default という組み合わせが、これらをシェリングアウトするのではなくタブグループに保つ理由のすべてです。
データのシェーピング: JSON、YAML、CSV、XML
これは、ほとんどの Web 開発がシステム間で構造化データを移動し、それが壊れたときに目を細めているため、私が最もよく使用するカテゴリです。
ザ・ JSON フォーマッタ is the workhorse - paste a minified API response and get indented, readable output with the syntax error located when the JSON is invalid.は、ワークホースです。 知る必要があるとき 何が変わった 2 つのペイロードの間で、 json 差分 行ごとではなく構造的に比較するため、キーを並べ替えてもファントムの違いは生じません。 ジョブの構成側では、 YAML バリデータ 静かな YAML トラップをキャッチします。インデントのタブ、キーの複製、および型強制の驚きが回転します version: 1.10 数字 1.1 に - Kubernetes または CI ファイルがデプロイを爆破する前に。
データが 1 つの形にとどまることはほとんどありません。 ザ・ JSONからCSVへ あんど CSVからJSONへ コンバーターは、API 出力とスプレッドシートの間を移動します。 CSVビューア 乱雑な CSV を実際のテーブルとしてレンダリングして、実際に読み取ることができます。 XML から JSON へ あんど JSON から YAML へ ツールは、レガシー API と構成ファイルでヒットした形式のホップをカバーしています。 このカテゴリのより深いバージョンが必要な場合は、 JSON ツールの完全なガイド ワークフロー全体を説明します。
トークンと時間のデバッグ: JWT、Base64、タイムスタンプ
認証と時間は、「コードが正しく見える」バグが隠れる場所であり、ほとんどの場合、それらは解決されます。 データを見る ロジックを再読する代わりに。
ザ・ JWT デコーダ トークンをヘッダー、ペイロード、署名に分割し、クレームを表示します。これが、トークンを発見する方法です exp あなたは大丈夫だった誓った実際には過去です。 jwtsはbase64urlを使用しているため、ジェネリックデコーダの代わりにそれに到達します ()RFC 4648 §5)、標準の Base64 ではなく、プレーンです Base64 コンバーター は、他のすべて - 基本的な auth ヘッダー、データ URI、エンコードされたペイロード - にとって適切なツールです タイムスタンプ コンバーター UNIX 秒とミリ秒を実際の日付に変えます (秒とミリ秒の組み合わせは、私が見ている最も一般的な認証バグです)。 タイムゾーン コンバーター あんど 日付の違い ツールは、「ユーザー」と「これら 2 つのイベント間の時間」に関する質問を処理します。 デバッグの流れ全体を API デバッグ ツール ガイド 戦争の話が欲しいなら。
推測なしの正規表現
正規表現は、書き込みを一度にして、debug-forever です。 ザ・ 正規表現テスター ライブ マッチのハイライト表示を使用してサンプル テキストに対してパターンを作成できるようにすると、バリデーターを展開して期待する代わりに、入力した瞬間に一致するものが表示されます。 ビルディング ブロックからパターンを組み立てる場合は、 正規表現ビルダー 別の方向から近づく。 いずれにしても、ポイントは同じです。フォームをガードするか、ログを解析する前に、実際の文字列に対してパターンをテストします。 ザ・ 正規表現ビルダーガイド 覚えておく価値のある一般的なパターンをカバーしています。
テキスト ラングリング: カウント、ケーシング、ディフ、プレースホルダー
魅力的でない弦楽器が加算されます。 ザ・ ワードカウンター コンテンツを長さ制限 (メタの説明、ツイート、見出し) と照らし合わせてチェックします。 ザ・ ケースコンバーター camelcase、snake_case、kebab-case、pascalcase の間をフリップします - コードベース間で変数名を移植する場合に非常に貴重です。 the テキスト差 2 つのブロックを比較し、すべての変更を強調します。これは、Git 以外のコード レビューと構成監査が 1 つにまとめられているということです。
具体的には、構築とプロトタイピングの場合: ローレムイプサムジェネレーター モックアップを右に埋めます 金額 プレースホルダー テキストの ( プレースホルダー テキストのサイズ設定の完全なガイド）、 スラッグジェネレーター タイトルをクリーンな URL パスに変換します。 文字列の逆 ツールは奇妙な 1 回限りの処理を行います。 ザ・ テキスト ツール ガイド これらを結びつけます。
CSSと色
フロントエンドのポーランド人が住んでいます。 ザ・ グラデーションジェネ 線形および半径方向の勾配とハンドバック生産 CSS のビジュアル エディターを提供します。角度や停止時の推測はありません (the) グラデーションガイド より深くなります）。 ザ・ カラーピッカー 16 進、RGB、HSL の間で変換し、色がアクセシビリティの監査に失敗する前にコントラストをチェックします。 カラーピッカーガイド 対比数学について説明します。 出荷の時間になったら、 CSS ミニファイア あんど HTML ミニファイア 空白とコメントを取り除き、バイトをシェーディングします。
Web の画像
画像は通常、ページ上で最も重いものであるため、このカテゴリはそれ自体を支払います コア Web Vitals。 ザ・ 画像のサイズ変更 ツール セットの正確な寸法 (そして、知っておくべき Retina トラップがあり、その中でカバーされています。 ガイド）、 画像圧縮機 品質を保持しながらファイル サイズを縮小し、 画像フォーマット変換器 PNG、JPG、および WebP の間を移動して、ジョブに適切な形式を提供します。 ザ・ バックグラウンド リムーバー カラーキーリムーバーです - 高速でプライベート、フラットな背景で素晴らしく、その限界について正直です ガイド。 ザ・ イメージ ツール ガイド このセットの柱です。
配送: SEO、共有、およびセキュリティ
ページが公開される前の最後の 1 マイル。 ザ・ メタ タグ ジェネレーター あなたのタイトル、記述、造ります オープングラフ、 と Twitter カード タグ 、 と グラフのプレビューを開く ソーシャルで難しい方法を見つける前に、リンクが共有されたときにリンクがどのように見えるかを示します。 ザ・ Robots.txt ジェネレーター あんど UTM ビルダー クロール ルールとキャンペーンの追跡を処理し、 QRジェネレーター 印刷またはスライドのスキャン可能なコードを作成します。 セキュリティー衛生面では、 パスワード ジェネレーター あんど ハッシュジェネレーター 強力な秘密と整合性チェックをカバーし、 uuid ジェネレーター テスト データとデータベース キーの識別子を吐き出します。
クライアント側のツールとアップロードベースのツール: 重要な比較
| Toolz.dev (クライアント側) | 典型的な「無料のオンライン ツール」 | |
|---|---|---|
| 処理が行われる場所 | ブラウザで | リモートサーバーで |
| あなたのデータ (トークン、ファイル、コード) | タブから離れない | サードパーティにアップロード |
| サインアップ/ログイン | なし | 完全な機能が必要な場合が多い |
| 使用制限 | ツールには何もありません | 頻繁に上限または有料 |
| 速度 | すぐに、往復はありません | アップロードとサーバーによって異なります |
| 機密データで動作します | そう、デザインによる | 危険な - あなたは彼らのサーバーを信頼しています |
| ツールの数 | 50 を過ぎたところで、キュレーションされています | 通常、サイトごとに 1 つのツール |
私が最も気にかけている行は2 番目のものです 公開サンプルの場合、処理が行われる場所は関係ありません; 生産秘密の場合、それは非常に重要です ツールキット全体のクライアントサイドを構築するということは、私が尋ねる必要がないことを意味します " これはこれを貼り付けるための安全なサイトです " - それらはすべてです。
これを実際に使用する方法: ツールをチェーンする
実際のタスクのほとんどは、小さなパイプラインであり、クリックは 1 回ではありません。
API 応答のデバッグ: に貼り付けます。 JSON フォーマッタ、トークンをデコードして、 JWT デコーダ、回します exp とのデートへの主張 タイムスタンプ コンバーターで、破損した応答と、機能している応答を比較して、 json 差分。
ヒーローのイメージを準備する: バックグラウンド リムーバー カットアウトが必要な場合は、 画像のサイズ変更 正確な寸法については、 画像圧縮機 ページの重みを設定するには、WebP に変換して、 フォーマット変換 出かける途中。
新しいページの出荷: タグを生成する メタ タグ ジェネレーターで、シェアカードをチェックしてください グラフのプレビューを開く、そしてあなたのコピーが ワードカウンター。
毎日触れる 5 つまたは 6 つをピン留めされたタブ グループに保管してください。 残りは、必要なときに 1 回の検索で 1 つだけ離れています。
よくある質問
これらの Web 開発者ツールは本当に無料ですか?
はい。 Toolz.dev のすべてのツールは、プレミアム層も機能ゲートも、ツール自体に使用率を設定することもなく、自由に使用できます。 それらを使用するために必要なアカウントはありません。
アカウントを作成するか、ログインする必要がありますか?
いやー ツールを開いてすぐに使用してください。 サインアップはありません。また、ツールはブラウザーで実行されるため、プロファイルに同期するものは何もありません。
トークン、キー、またはプライベート データを貼り付けても安全ですか?
はい、それが設計の中心的な決定です。ツールは JavaScript でクライアント側ですべてを処理するため、貼り付けたもの (JWT、API レスポンス、未公開画像) はマシン上で処理され、サーバーにアップロードされないため、アップロード ベースの代替手段よりもツールを使用する主な理由になります。
Toolz.dev にはいくつのツールがありますか?
現時点では 50 を超えるだけで、データ、テキスト、コーディング、CSS、カラー、画像、SEO、セキュリティ、電卓のカテゴリにまたがっています。私は、ほとんどがフィラーである数値を主張するのではなく、意図的にセットを増やしたいと考えています。ここにリストされているすべてのツールは現在存在し、動作しています。
ツールはモバイルで動作しますか?
はい、インターフェースは応答性が高く、モバイルブラウザで動作します。デスクトップでは、より重いジョブ (特に大きな画像処理) の方が高速で快適ですが、ツール自体はどちらにしても実行されます。
これらのツールはオフラインで動作しますか?
ほとんどはい 各ツールはブラウザのJavaScriptで実行されるため、ツールは、そのページがロードされると、接続なしで動作し続けます - 平面または薄片状のネットワークで役立ちます ツールを初めて開くにはオンラインであるだけで済みます; その後、処理自体はサーバーを必要としません。
クライアント側とサーバー側のオンライン ツールの違いは何ですか?
クライアント側ツールはブラウザで動作するため、貼り付けたデータはマシンから離れることはありません。サーバー側ツールは入力をリモート コンピュータにアップロードして処理し、結果を返します。出力は同じように見えますが、クライアント側ツールのみが、他の人からプロダクション トークン、プライベート ファイル、または顧客レコードを保持します。's サーバー - これが、ここにあるすべてのツールがクライアント側で構築されている理由です。
ターミナルまたは IDE ツールの代わりにこれらを使用できますか?
一回限りの視覚的なタスクの場合 - ブロブのフォーマット、トークンのデコード、差分の目盛、グラデーションの構築 - コマンドライン相当のものを覚えているよりも速いことがよくあります スクリプト化された再現可能な作業の場合、端末は引き続き必要になります 実際には、それらは並んで座っています: 通常のクライアントでリクエストを起動し、出力に出力を貼り付けて読みます。
最初にどのツールをブックマークする必要がありますか?
毎日触れるものから始めます。 JSON フォーマッタ、 JWT デコーダ、 正規表現テスター、 タイムスタンプ コンバーター、CSS または画像ツールのいずれかがあなたの仕事に一致します。 必要なタスクに到達したら、残りを追加します。
まとめ
A modern web developer' s toolkit is not one big app - it is a dozen small, sharp tools you reach for without thinking.トラップは、それらを処理するためにデータをアップロードするダースの大ざっぱなウェブサイトに散らばらせています。修正は、信頼できるものを単一のタブ グループに保持し、すべてローカルで実行し、すべて無料で、すべて 1 つのキーストロークで実行することです。
それは何 Toolz.dev : 50 強のツールがクライアント側で構築され、トークンとファイルが自分のものにとどまります。 ピン JSON フォーマッタ、 正規表現テスター、そして タイムスタンプ コンバーター 今日、そして仕事が必要とする残りを追加します。 永遠に無料、プライベートなデザイン。
