幾年前我的"開發工具和引用;書籤資料夾有大約二十個條目,每個條目都是不同的單一用途網站,每個條目都有自己的廣告佈局、自己的cookie 橫幅,以及- 這是最終困擾我的部分- 我的資料被悄悄上傳到自己的伺服器。我把一個暫存 API 令牌貼到其中一個中進行解碼,中途我想:我不知道這個網站用這個字串做了什麼。那天我不再信任隨機工具網站並開始建立 工具。dev,每個工具都在瀏覽器中運行,您貼上的任何內容都不會離開選項卡。
這就是由此產生的工具包。不是"頂部 600 個工具和報價; listicle - toolz。dev 現在有 50 多個工具,我寧願向您展示正在工作的 Web 開發人員每週打開的工具,也不願填充計數。它們按您正在執行的工作進行分組:塑造資料、爭論文字、編寫 CSS、準備圖像、運輸 SEO 以及其間的安全和編碼雜務。一切都是免費的,不需要帳戶,並在本地處理。
TL;DR: 建置時保持一個瀏覽器選項卡組開啟。對於資料: json 格式化程式, JSON 差異, yaml 驗證器, CSV 檢視器. 對於調試令牌: 中國航空解碼器, Base64 轉換器, 時間戳轉換器. 對於正規表示式: 正規表示式測試儀. 對於 CSS: 梯度產生器, 選色器, CSS 縮小器. 對於圖像: 調整大小, 壓縮, 格式轉換器. 對於 SEO: 元標記產生器, 開啟圖形預覽. 所有客戶端,全部免費。
當您有終端機時為什麼要費心使用瀏覽器工具?
公平的問題 - 我也住在終端。誠實的答案是,對於一次性、即時查看的任務,具有即時回饋的視覺工具可以擊敗記憶 jq 咒語或 openssl 標誌。當 API 在凌晨 2 點遞給我一個迷你斑點時,我不想寫格式腳本;我想貼上它並查看它。當我需要查看兩個 JSON 回應是否不同時,紅色/綠色差異比透過任何內容傳輸都要快。
但決定因素不是便利,而是便利 數據去向. 大量&報價;免費線上&報價;工具將您貼上到伺服器上的任何內容上傳到伺服器進行處理。這對於公共樣本來說很好,對於生產代幣、客戶記錄或未發布的資產來說也是一個真正的問題。本指南中的每個工具都完全在您的瀏覽器中運行 - 處理在您的電腦上的 JavaScript 中進行,無需擔心上傳步驟。這種組合,視覺即時加預設私有,是將這些內容保留在選項卡組而不是刪除的全部原因。
整形資料:JSON、YAML、CSV、XML
這是我最常用的類別,因為大多數 Web 開發都是在系統之間移動結構化資料並在資料中斷時瞇著眼睛看它。
的 json 格式化程式 是主力 - 貼上縮小的 API 回應並獲得縮排的可讀輸出,並在 JSON 無效時找到語法錯誤。當你需要知道的時候 什麼改變了 在兩個有效載荷之間, JSON 差異 在結構上比較而不是逐行比較,因此重新排序的鍵不會產生虛數差異。對於作業的配置側, yaml 驗證器 捕捉安靜的 YAML 陷阱 - 縮排選項卡、重複的按鍵以及轉動的類型強制驚喜 version: 1.10 進入數字 1.1 - 在 Kubernetes 或 CI 檔案炸毀部署之前。
數據很少保持一種形狀。這 json 到 csv 和 csv 到 json 轉換器在 API 輸出和電子表格之間移動 CSV 檢視器 將混亂的 CSV 渲染為真實的表格,以便您可以實際閱讀它,並且 XML 到 JSON 和 JSON 到 YAML 工具涵蓋了您使用舊版 API 和設定檔點擊的格式跳轉。如果您想要此類別的更深層版本,則 JSON 工具的完整指南 瀏覽整個工作流程。
調試令牌和時間:JWT、Base64、時間戳記
作者和時間是 "代碼看起來正確"錯誤逐漸隱藏起來,幾乎總是被解決 查看數據 而不是重新閱讀邏輯。
的 中國航空解碼器 將令牌分成標頭、有效負載和簽名,並向您顯示聲明 - 這就是您發現這一點的方式 exp 你發誓沒事,實際上已經過去了。使用通用解碼器而不是通用解碼器,因為 JWT 使用 base64url (RFC 4648 §5),不是標準的 Base64,而且是普通的 Base64 轉換器 是其他一切的正確工具 - 基本驗證標頭、資料 URI、編碼有效負載。這 時間戳轉換器 將 Unix 秒和毫秒轉換為真實日期(秒與毫秒混淆是我看到的最常見的驗證錯誤),並且 時區轉換器 和 日期差異 工具處理 "這對使用者來說是什麼時間"和"這兩個事件之間的時間間隔有多長"問題。我寫下了整個調試流程 API調試工具指南 如果你想要戰爭故事。
沒有猜測的正規表示式
正規表示式是一次寫入、永遠調試。這 正規表示式測試儀 讓您根據帶有即時匹配突出顯示的範例文字建立模式,這樣您就可以看到什麼與輸入它的那一刻相匹配,而不是部署驗證器並希望。如果您想從構建塊中組裝模式,則 正規表示式建構器 從另一個方向接近它。無論哪種方式,該點都是相同的:在保護表單或解析日誌之前,根據真實字串測試模式。這 正規表示式建構器指南 涵蓋了值得記住的常見模式。
文字爭論:計數、大小寫、差異、佔位符
乏味的弦樂雜務加起來。這 字計數器 根據長度限制檢查內容(元描述、推文、標題)。這 變形器 在 camelCase、snake_case、kebab-case 和 PascalCase 之間翻轉 - 當您在程式碼庫中移植變數名稱時,這是非常寶貴的。這 文字差異 比較兩個區塊並突出顯示每個更改,即 Git 之外的程式碼審查和整合的配置審核。
專門用於建造和原型設計: lorem ipsum 發電機 用右側填滿模型 金額 佔位符文字(有一個) 佔位符文字大小調整的完整指南), 蛞蝓發電機 將標題轉換為乾淨的 URL 路徑,並且 弦反向 工具處理奇怪的一次性。這 文字工具指南 將這些聯繫在一起。
CSS 和顏色
前端拋光劑就住在這裡。這 梯度產生器 為您提供線性和徑向梯度的視覺編輯器,並回傳生產 CSS - 無需猜測角度和停止點 (the) 梯度引導 更深一點)。這 選色器 在 HEX、RGB 和 HSL 之間進行轉換,並且是在顏色最終無法通過可訪問性審核之前檢查對比度的地方;這 選色指南 涵蓋對比數學。當需要發貨時, CSS 縮小器 和 HTML 縮小器 剝離空白和註釋以從電線上剃除位元組。
網路圖像
圖像通常是頁面上最重的東西,因此這個類別是值得的 核心網路生命徵象. 的 圖像調整大小 工具設定了精確的尺寸(並且有一個值得了解的視網膜陷阱,覆蓋在其中) 指南), 影像壓縮器 縮小文件大小,同時保持質量,並且 圖像格式轉換器 在 PNG、JPG 和 WebP 之間移動,以便您提供適合作業的格式。這 背景刪除器 是一款色鍵去除器 - 快速且私密,非常適合平面背景,並且誠實地了解其局限性 指南. 的 圖像工具指南 是這套的支柱。
運輸:SEO、共享和安全
頁面上線前的最後一英里。這 元標記產生器 建立您的標題、描述、 打開圖,還有 Twitter 卡標籤,以及 開啟圖形預覽 顯示在您發現社交上的困難之前共享連結時的外觀。這 robots.txt 發電機 和 utm 建設者 處理爬行規則和活動跟踪,以及 二維碼產生器 製作列印或投影片的可掃描程式碼。在安全衛生方面, 密碼產生器 和 哈希產生器 掩蓋強烈的秘密和完整性檢查,以及 uuid 生成器 吐出測試資料和資料庫金鑰的識別碼。
客戶端工具與基於上傳的工具:重要的比較
| toolz。dev(客戶端) | 典型&報價;免費線上工具和報價; | |
|---|---|---|
| 處理發生的地方 | 在您的瀏覽器中 | 在遠端伺服器上 |
| 您的資料(令牌、文件、代碼) | 切勿離開標籤 | 上傳到第三方 |
| 註冊/登入 | 沒有 | 通常是完整功能所必需的 |
| 使用限制 | 工具上沒有 | 經常有上限或付費牆 |
| 速度 | 即時,無往返 | 取決於上傳+伺服器 |
| 適用於敏感資料 | 是的,按照設計 | 風險 - 您信任他們的伺服器 |
| 工具數量 | 剛五十多歲,策劃 | 通常每個站點一個工具 |
我最關心的行是第二行。對於公共樣本來說,處理發生在哪裡並不重要;對於生產秘密來說,這非常重要。建立整個工具包客戶端意味著我永遠不必詢問和引用;這是將其貼上到 " 中的安全網站嗎? - 他們都是。
我實際上如何使用它:連結工具
大多數實際任務都是一個小管道,而不是一次點擊:
調試 API 回應:將其貼上到 json 格式化程式,解碼任何令牌 中國航空解碼器,轉 exp 索賠與約會 時間戳轉換器然後將損壞的反應與工作反應進行比較 JSON 差異.
準備英雄形象: 背景刪除器 如果需要剪紙,那麼 圖像調整大小 那麼對於精確的尺寸 影像壓縮器 若要達到您的頁面權重預算,請使用 轉換為 WebP 格式轉換器 出去的路上。
運送新頁面:產生標籤 元標記產生器,檢查一下共享卡 開啟圖形預覽,並確認您的副本符合 字計數器.
將每天觸摸的五到六個保留在固定選項卡組中。其餘的則在您需要時只需在 “K 色板中搜尋即可。
常見問題
這些 Web 開發人員工具真的免費嗎?
是的。 toolz。dev 上的每個工具都可以免費使用,沒有高級層,沒有功能門,工具本身也沒有使用上限。使用它們不需要帳戶。
我必須建立帳戶還是登入?
不。打開一個工具並立即使用它。沒有註冊,並且由於這些工具在您的瀏覽器中運行,因此無法同步到設定檔。
貼上令牌、金鑰或私人資料安全嗎?
是的,這就是核心設計決策。這些工具在 JavaScript 中處理客戶端的所有內容,因此您貼上的內容(JWT、API 回應、未發布的圖像)將在您的電腦上處理,並且不會上傳到伺服器。這是將它們用於基於上傳的替代方案的主要原因。
toolz。dev 有多少工具?
目前剛超過五十,涵蓋資料、文字、編碼、CSS、顏色、影像、SEO、安全性和計算器類別。我寧願刻意擴大這個集合,也不願聲稱一個主要是填充物的數字--這裡列出的每個工具都存在並且今天有效。
這些工具在行動裝置上運作嗎?
是的,這些介面反應靈敏,可以在行動瀏覽器中運作。較重的工作(尤其是大型影像處理)在桌面上更快、更舒適,但工具本身可以以任何一種方式運作。
這些工具離線工作嗎?
主要是是的。因為每個工具在瀏覽器中都使用 JavaScript 運行,因此一旦頁面加載,工具就可以在沒有連接的情況下繼續工作 - 在平面或脆弱的網路上很有用。您只需在線上即可首次開啟工具;之後處理本身不需要伺服器。
客戶端和伺服器端線上工具有什麼區別?
客戶端工具在您的瀏覽器中完成其工作,因此您貼上資料永遠不會離開您的電腦。伺服器端工具將您的輸入上傳到遠端電腦進行處理並將結果傳回。輸出可能看起來相同,但只有客戶端工具會保留生產令牌、私人文件或客戶記錄,而不是其他人'伺服器 - 這就是為什麼這裡的每個工具都是客戶端建構的。
我可以使用這些來代替我的終端或 IDE 工具嗎?
對於一次性視覺任務 - 格式化一個 blob、解碼令牌、關注差異、建立梯度 - 它們通常比記住命令列等效項更快。對於腳本化的、可重複的工作,您仍然需要終端。實際上,它們並排放置:在通常的客戶端中觸發請求,然後將輸出貼上到這些請求中以讀取它。
我應該先為哪些工具添加書籤?
從您每天都會接觸到的那些開始: json 格式化程式, 中國航空解碼器, 正規表示式測試儀, 時間戳轉換器,以及 CSS 或圖像工具中與您的工作相符的。在完成需要的任務時添加其餘部分。
包裹起來
現代網頁開發人員'該工具包不是一個大應用程式 - 它是您無需思考即可獲得的十幾個小而鋒利的工具。陷阱是將它們分散到十幾個粗略的網站上,這些網站上傳您的資料來處理它。修復方法是將您信任的那些保留在一個選項卡組中,全部在本地運行,全部免費,全部一鍵即可完成。
就是這樣 工具。dev 是:超過 50 個這樣的工具,在客戶端構建,以便您的令牌和文件保留您的。釘住 json 格式化程式, 正規表示式測試儀,並且 時間戳轉換器 今天,根據工作需要添加其餘部分。永遠免費,設計私密。
