몇 년 전 내 "dev tools" 북마크 폴더는 약 스무 개의 항목을 가지고 있었고,각각 다른 단일 목적 웹 사이트,각각 자신의 광고 레이아웃,자신의 쿠키 배너,그리고 - 이것은 마침내 나를 괴롭히는 부분입니다 - 내 데이터가 조용히 업로드되고있는 자체 서버를 디코딩하기 위해 그 중 하나에 스테이징 API 토큰을 붙여 넣었고,중간쯤에 나는 생각했습니다: 나는이 사이트가 그 문자열로 무엇을하는지 전혀 모른다. 그날 나는 무작위 도구 사이트에 대한 신뢰를 멈추고 건물을 짓기 시작했다 Toolz.dev모든 도구가 브라우저에서 실행되고 붙여넣는 항목이 탭에서 남지 않는 경우.
여기서 나온 툴킷입니다. "top 600 tools" listicle 이 아니라 - Toolz.dev 는 지금 50 개가 조금 넘는 도구를 가지고 있으며,나는 카운트를 채우는 것보다 매주 일하는 웹 개발자가 여는 도구를 보여 드리고 싶습니다. 그들은 당신이하고있는 일에 따라 여기에 그룹화됩니다: 데이터 형성,텍스트 논쟁,CSS 작성,이미지 준비,SEO 배송,그리고 그 사이의 보안 및 인코딩 잡일. 모든 것이 무료이며 계정이 필요하지 않으며 로컬로 처리됩니다.
TL;DR: 빌드하는 동안 브라우저 탭 그룹 하나를 열어 둡니다. 데이터: JSON 포맷터, JSON 차이점, 야엘 검증인, CSV 뷰어. 토큰 디버깅의 경우: JWT 디코더, Base64 변환기, 타임스탬프 변환기. 정규식의 경우: 정규식 테스터. CSS의 경우: 그라데이션 생성기, 컬러 피커, CSS 미니파이어. 이미지의 경우: 크기 조정, 압축, 포맷 변환기. SEO의 경우: 메타 태그 생성기, 그래프 미리보기 열기. 모든 클라이언트 측, 모든 무료.
터미널이 있는데 왜 브라우저 도구를 사용합니까?
공정한 질문 - 나는 맨끝에서 역시 삽니다. 정직한 대답은,일회성, 그것 보기 업무를 위해,즉각적인 의견을 가진 시각적인 공구는 기억하고 있는 것을 이깁니다 jq 주문 또는 openssl 플래그. API 가 오전 2 시에 축소 된 블롭을 나에게 건네 줄 때,나는 서식 스크립트를 작성하고 싶지 않다; 나는 그것을 붙여 넣고보고 싶다. 두 개의 JSON 응답이 다른지 여부를 눈알해야 할 때,빨간색/녹색 diff 는 어떤 것을 통해 파이핑하는 것보다 빠르다.
하지만 결정적인 요소는 편리함이 아니라 편리함입니다 데이터가 가는 곳. 엄청난 수의 "free online" 도구는 서버에 붙여넣는 모든 것을 처리하도록 업로드합니다. 공개 샘플과 프로덕션 토큰,고객 기록 또는 미공개 자산에 대한 진정한 문제에는 괜찮습니다. 이 가이드의 모든 도구는 브라우저에서 완전히 실행됩니다. 처리는 시스템의 JavaScript 에서 이루어지며 걱정할 업로드 단계가 없습니다. 시각적 및 즉각적인 조합과 기본값에 따른 비공개 조합은 이러한 항목을 셸 아웃 대신 탭 그룹에 유지해야 하는 전체 이유입니다.
데이터 형성: JSON, YAML, CSV, XML
이것은 제가 가장 많이 사용하는 범주입니다. 왜냐하면 대부분의 웹 개발은 시스템 간에 구조화된 데이터를 이동하고 데이터가 끊어지면 눈을 가늘게 뜨기 때문입니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X JSON 포맷터 는 주력입니다 - 축소된 API 응답을 붙여넣고 JSON 이 유효하지 않을 때 위치한 구문 오류로 들여쓰기되고 읽을 수 있는 출력을 얻습니다. 알아야 할 때 바뀐 것 두 페이로드 사이에서 JSON 차이점 라인별로 비교하는 것이 아니라 구조적으로 비교하므로 재정렬된 키는 팬텀 차이를 생성하지 않습니다.For the config side of the job, the 야엘 검증인 들여쓰기의 탭, 중복 키, 회전하는 유형 강제 놀라움 등 조용한 YAML 트랩을 포착합니다 version: 1.10 숫자 1.1 - Kubernetes 또는 CI 파일이 배포를 폭파하기 전.
데이터는 거의 한 모양으로 유지되지 않습니다. The JSON에서 CSV로 그리고 CSV에서 JSON 변환기는 API 출력과 스프레드시트 사이를 이동합니다 CSV 뷰어 지저분한 CSV를 실제 테이블로 렌더링하여 실제로 읽을 수 있습니다 JSON 에 XML 을 그리고 JSON에서 YAML로 도구는 레거시 API 및 구성 파일로 누른 형식 홉을 다룹니다. 이 카테고리의 더 깊은 버전을 원하는 경우 JSON 도구에 대한 완벽한 가이드 전체 워크플로를 살펴봅니다.
디버깅 토큰 및 시간: JWT, Base64, 타임스탬프
Auth and time are where "코드가 right" 로 보이는 곳;버그가 숨기러 오고,거의 항상 에 의해 해결된다 자료를 보면서 논리를 다시 읽는 대신.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X JWT 디코더 토큰을 헤더, 페이로드, 서명으로 분할하고 주장을 표시합니다. 이것이 바로 이를 발견하는 방법입니다 exp 당신은 괜찮다고 맹세했습니다. 실제로는 과거입니다. 일반 디코더 대신 도달하세요. JWT는 base64url을 사용하기 때문입니다(RFC 4648 §5), 표준 Base64가 아니며 일반입니다 Base64 변환기 기본 인증 헤더, 데이터 URI, 인코딩된 페이로드 등 모든 것에 적합한 도구입니다. 그만큼 타임스탬프 변환기 unix 초와 밀리초를 실제 날짜로 바꿉니다(초 대 밀리초 혼합은 제가 보는 가장 일반적인 인증 버그입니다) 시간대 변환기 그리고 날짜 차이 도구는 "what time was this for the user" and "how long between this two events" questions.에 전체 디버깅 흐름을 작성했습니다 API 디버깅 도구 가이드 전쟁 이야기를 원한다면.
추측 없는 Regex
정규식은 write-once,debug-forever 입니다. The 정규식 테스터 라이브 매치 강조 표시로 샘플 텍스트에 대해 패턴을 구축할 수 있으므로 유효성 검사기를 배포하고 희망하는 대신 입력하는 순간 무엇이 일치하는지 확인할 수 있습니다. If you would rather assemble a pattern from building blocks, the 정규식 빌더 다른 방향에서 접근합니다. 어느 쪽이든,점은 동일합니다: 양식을 보호하거나 로그를 구문 분석하기 전에 실제 문자열에 대해 패턴을 테스트합니다. The regex 빌더 가이드 외울 가치가 있는 일반적인 패턴을 다룹니다.
텍스트 랭글링: 계산, 케이스, 차이, 자리 표시자
화려하지 않은 현악 잡일들이 합산된다. The 워드 카운터 길이 제한 (메타 설명,트윗, 제목) 과 비교하여 콘텐츠를 확인합니다. The 케이스 변환기 camelcase,snake_case, kebab-case,PascalCase 사이를 넘깁니다 - 코드베이스를 통해 변수 이름을 포팅할 때 매우 중요합니다. The 텍스트 차이 두 블록을 비교하고 모든 변경 사항을 강조 표시합니다. 이는 Git 외부의 코드 검토와 구성 감사를 하나로 통합한 것입니다.
특히 제작 및 프로토타입 제작의 경우: 로렘 입섬 생성기 오른쪽으로 모형을 채웁니다 금액 자리 표시자 텍스트(a가 있습니다 위치 지정자 텍스트에 대한 전체 가이드입니다), 그만큼 슬러그 생성기 제목을 깨끗한 URL 경로로 변환합니다 문자열 반전 도구는 이상한 일회성을 처리합니다. The 텍스트 도구 가이드 이것들을 하나로 묶습니다.
CSS 및 색상
프론트 엔드 폴란드인이 여기에 산다. The 그라데이션 생성기 선형 및 방사형 그라데이션에 대한 시각적 편집기를 제공하고 프로덕션 CSS를 다시 제공합니다. 각도 및 정지 시 추측이 없습니다(the 그라데이션 가이드 더 깊이 들어갑니다). 그만큼 컬러 피커 HEX, RGB 및 HSL 간에 변환되며 색상이 접근성 감사에 실패하기 전에 대비를 확인하는 곳입니다; 그만큼 컬러 피커 가이드 대비 수학을 다룹니다 출하할 때가 되면, the CSS 미니파이어 그리고 HTML 미니파이어 공백과 주석을 제거하여 와이어에서 바이트를 깎습니다.
웹용 이미지
이미지는 일반적으로 페이지에서 가장 무거운 것이므로 이 카테고리는 그 자체로 비용을 지불합니다 핵심 웹 바이탈. 그만큼 이미지 크기 조정 도구는 정확한 치수를 설정합니다(그리고 그 안에 덮여 있는 알아둘 가치가 있는 망막 트랩이 있습니다 가이드), 그만큼 이미지 압축기 품질을 유지하면서 파일 크기를 줄입니다 이미지 포맷 변환기 PNG,JPG, WebP 사이를 이동하므로 작업에 적합한 형식을 제공합니다. The 배경 제거제 빠르고 사적이며 평평한 배경에 적합하고 한계에 대해 정직한 색상 키 제거제입니다 가이드. 그만큼 이미지 도구 가이드 는 이 세트의 기둥이다.
배송: SEO, 공유 및 보안
페이지가 생방송되기 전 마지막 마일 The 메타 태그 생성기 제목, 설명, 빌드합니다 그래프 열기및 트위터 카드 태그, 그리고 그래프 미리보기 열기 소셜에서 어려운 방법을 찾기 전에 링크가 공유될 때 어떻게 보일지 보여줍니다. The robots.txt 생성기 그리고 UTM 빌더 크롤링 규칙 및 캠페인 추적을 처리합니다 QR 발전기 인쇄 또는 슬라이드를 위한 스캔 가능한 코드를 만듭니다. 보안-위생 측면에서,the 비밀번호 생성기 그리고 해시 생성기 강력한 비밀과 무결성 검사를 다룹니다 UUID 생성기 테스트 데이터 및 데이터베이스 키에 대한 식별자를 뱉어냅니다.
클라이언트측 도구와 업로드 기반 도구: 중요한 비교
| Toolz.dev(클라이언트 측) | 전형적인 "무료 온라인 도구" | |
|---|---|---|
| 처리가 이루어지는 곳 | 브라우저에서 | 원격 서버에서 |
| 귀하의 데이터(토큰, 파일, 코드) | 탭을 떠나지 마십시오 | 제3 자에게 업로드 |
| 가입 / 로그인 | 없음 | 전체 기능에 필요한 경우가 많습니다 |
| 사용 제한 | 도구에는 없습니다 | 자주 캡이 있거나 페이월이 있습니다 |
| 속도 | 즉석, 왕복 없음 | 업로드 + 서버에 따라 다릅니다 |
| 민감한 데이터와 함께 작동합니다 | 네, 설계상 | 위험 - 당신은 그들의 서버를 신뢰하고 있습니다 |
| 공구 수 | 큐레이팅된 인원은 50명이 조금 넘습니다 | 보통 사이트당 하나의 툴 |
내가 가장 걱정하는 행은 두 번째입니다. 공개 샘플의 경우 처리가 어디서 발생하는지는 중요하지 않습니다; 생산 비밀의 경우 엄청나게 중요합니다. 전체 툴킷 클라이언트 측을 구축하면 "이것을 붙여 넣을 안전한 사이트입니다." - 그들은 모두.
내가 실제로 이것을 사용하는 방법: 도구를 연결하십시오
대부분의 실제 작업은 작은 파이프라인, 한 번의 클릭이 아닙니다:
API 응답 디버깅: API 응답을 붙여넣습니다 JSON 포맷터, 로 토큰을 디코딩합니다 JWT 디코더, 돌리세요 exp 와의 데이트를 주장하십시오 타임스탬프 변환기그런 다음 깨진 응답을 작업 응답과 비교합니다 JSON 차이점.
영웅 이미지 준비: 배경 제거제 컷아웃이 필요하다면 이미지 크기 조정 정확한 치수에 대해서는, 그 다음에 이미지 압축기 페이지 가중치 예산을 달성하려면 다음을 사용하여 WebP로 변환하세요 포맷 변환기 나가는 길.
새 페이지 배송: 태그를 생성합니다 메타 태그 생성기에서 공유카드를 확인하세요 그래프 미리보기 열기그리고 귀하의 사본이 에 맞는지 확인하십시오 워드 카운터.
매일 만지는 다섯 개나 여섯 개를 고정 탭 그룹에 보관하세요. 나머지는 필요할 때 ⌘K 팔레트에서 한 번 검색하면 됩니다.
자주 묻는 질문
이러한 웹 개발자 도구는 정말 무료입니까?
예. Toolz.dev 의 모든 도구는 프리미엄 계층이 없고,기능 게이트가 없으며,도구 자체에 사용 캡이 없는 상태에서 무료로 사용할 수 있습니다. 이를 사용하는 데 필요한 계정이 없습니다.
계정을 만들거나 로그인해야 하나요?
아니요. 도구를 열고 즉시 사용하십시오. 가입이 없으며 브라우저에서 도구가 실행되기 때문에 프로필에 동기화 할 것이 없습니다.
토큰, 키 또는 개인 데이터를 붙여 넣는 것이 안전합니까?
예,그리고 그것이 핵심 설계 결정입니다. 툴은 JavaScript 에서 클라이언트 측의 모든 것을 처리하므로,붙여넣는 것 - JWT,API 응답,미공개 이미지 - 은 머신에서 처리되고 서버에 업로드되지 않는 것이 업로드 기반 대안에 사용하는 주된 이유입니다.
Toolz.dev 에는 몇 개의 도구가 있습니까?
데이터,텍스트, 코딩,CSS, 색상,이미지, SEO,보안, 계산기 카테고리에 걸쳐있는 순간에 50 개가 조금 넘습니다. 나는 대부분 필러 인 숫자를 주장하기보다는 의도적으로 세트를 성장시키고 싶습니다 - 여기에 나열된 모든 도구는 오늘날 존재하고 작동합니다.
도구가 모바일에서 작동합니까?
예,인터페이스는 반응성이 뛰어나며 모바일 브라우저에서 작동합니다. 더 무거운 작업 - 특히 큰 이미지 처리 - 은 데스크톱에서 더 빠르고 편안하지만 도구 자체는 어느 쪽이든 실행됩니다.
이러한 도구는 오프라인에서 작동합니까?
대부분 그렇습니다. 각 도구는 브라우저의 JavaScript 에서 실행되기 때문에,도구는 페이지가 로드되면 연결 없이 계속 작동합니다 - 평면이나 벗겨지기 쉬운 네트워크에서 유용합니다. 처음으로 도구를 열려면 온라인 상태만 있으면 됩니다; 그 이후에는 처리 자체에 서버가 필요하지 않습니다.
클라이언트 측 온라인 도구와 서버 측 온라인 도구의 차이점은 무엇입니까?
클라이언트 측 도구는 브라우저에서 작업을 수행하므로 붙여넣은 데이터는 컴퓨터에서 절대 떠나지 않습니다. 서버 측 도구는 입력을 원격 컴퓨터에 업로드하여 처리하고 결과를 다시 보냅니다. 출력은 동일하게 보일 수 있지만 클라이언트 측 도구만 프로덕션 토큰,개인 파일 또는 고객 기록을 다른 사람's 서버에 보관합니다. 이것이 바로 여기의 모든 도구가 클라이언트 측으로 구축된 이유입니다.
터미널이나 IDE 툴링 대신 이들을 사용할 수 있습니까?
일회성,시각적 작업 - blob 포맷하기,토큰 디코딩하기,diff 를 눈알로 보기,그라디언트 만들기 - 은 종종 명령줄에 해당하는 것을 기억하는 것보다 빠릅니다. 스크립트된 반복 가능한 작업의 경우 여전히 터미널을 원할 것입니다. 실제로 그들은 나란히 앉아 있습니다: 일반적인 클라이언트에서 요청을 실행한 다음 출력을 여기에 붙여넣어 읽습니다.
어떤 도구를 먼저 북마크에 추가해야 합니까?
매일 만질 것부터 시작하세요: the JSON 포맷터, JWT 디코더, 정규식 테스터, 타임스탬프 변환기그리고 CSS 나 이미지 도구 중 어느 것이 당신의 작업과 일치하는지. 나머지는 필요한 작업을 치면서 추가하세요.
감싸는 중
현대 웹 developer's 툴킷은 하나의 큰 응용 프로그램이 아닙니다 - 그것은 당신이 생각없이 도달 다스 작고 날카로운 도구입니다. 함정은 그것을 처리하기 위해 데이터를 업로드 다스 스케치 웹 사이트에 그들을 흩어져 있습니다. 수정은 당신이 하나의 탭 그룹에 신뢰하는 사람들을 유지하고있다, 모두 로컬로 실행, 모두 무료, 모든 하나의 키 입력 떨어져.
그것이 무엇이다 Toolz.dev is: 그 도구 중 50개가 조금 넘는 도구, 내장된 클라이언트 측을 통해 토큰과 파일이 그대로 유지됩니다. 핀 JSON 포맷터, 그만큼 정규식 테스터, 그리고 타임스탬프 변환기 오늘, 그리고 작품 요구에 따라 나머지를 추가. 영원히 무료, 설계에 의해 개인.
