개발자 생산성 도구: 실제로 매주 열리는 40가지

나는 유틸리티 탭에 불과한 두 번째 모니터에서 브라우저 창을 열어 둡니다. JSON 포맷터,타임스탬프 변환기,regex 테스터,해시 생성기. 그것은 WP 를 통해 릴리스를 관리하고 Laravel 사이드 프로젝트를 통해 웹훅 페이로드가 미니 화 된 모든 심야 디버깅 세션을 통해 수년 동안 거기에 있었고 실제로 무엇이 있는지 확인해야합니다's.

오랫동안 그 탭은 일곱 개의 다른 웹 사이트를 가리 켰습니다. 일부는 괜찮았습니다. 일부는 서버 I & # 39;d 에 페이로드를 업로드 한 광고 팜이었습니다. 그 중 하나 - I & # 39;m 이름을 지정하지 않을 것입니다 - 나는 생각이 나를 따라 잡기 전에 스테이징 JWT 를 붙여 넣었다: 그 토큰은 방금 다른 사람에게 전선을 넘어 & # 39;s 상자. 그것은 스테이징 토큰이었고,아무것도 태워지지 않았지만,느낌이 멈췄습니다. 나는 부분적으로는 내 자신의 탭 스트립을 원했기 때문에 Toolz.dev 를 만들었고,부분적으로는 그 특별한 실수를 다시는하고 싶지 않았기 때문입니다.

그래서 이것은 디렉토리에서 긁어낸 500 개의 도구들의 리스트인 isn't. It's the set that's actually live on Toolz.dev 지금 당장 - 40-odd of them - 내가 사용하는 방식을 정리했습니다: 내가 하나를 위해 도달하는 근무일의 순간까지. 모든 사람은 브라우저에서 실행됩니다. 아무것도 업로드하지 않습니다. 계정이 없습니다.

TL;DR: 내가 가장 많이 여는 5개, 1마일: JSON 포맷터 읽을 수 없는 API 응답의 경우 타임스탬프 변환기 로그 포렌식의 경우 정규식 테스터 패턴 작업의 경우, Base64 변환기 JWT 및 데이터 URI의 경우 UUID 생성기 테스트 데이터 시드 배정을 위해. 아래의 모든 것은 클라이언트 측에서 실행됩니다. - 페이로드가 탭을 떠나지 않습니다. 한 가지만 북마크하면 JSON 포맷터를 북마크에 추가하십시오.

CLI만 사용하는 것은 어떨까요?

공정한 질문입니다. 저는 CLI를 사용합니다. jq 스크립팅을 위한 어떤 웹 도구보다 낫습니다. base64 -d 는 두 키 입력입니다. 작업이 셸 스크립트로 들어가는 경우 셸 스크립트에 속합니다.

그러나 브라우저 탭이 진정으로 승리하는 세 가지 상황이 있으며, 약 10 년 동안이 작업을 수행 한 후에 I & # 39;ve는 그들에 대해 죄책감을 느끼지 않게되었습니다:

1. 시각적 피드백 루프. Regex 는 명백한 것입니다. 입력 할 때 실제 텍스트 샘플에서 14 개의 일치 항목이 켜지는 것을 보는 것은 실행과는 다른 활동입니다 grep -P 그리고 예/아니오를 얻습니다. 그라데이션과 색상도 마찬가지입니다. 16진수 코드를 볼 수는 없습니다.
2. 기계는 당신의 것 isn't. 클라이언트 노트북,잠긴 작업 기계,pairing 세션 도중 someone else's 책상. 아니요 jq, 설치 권한도 없고 시간도 없습니다.
3. 작업은 정말 일회성입니다. 나는 하나의 CSV 를 JSON 으로 변환하기 위해 파이썬 스크립트를 작성하는 것이 아닙니다. I & # 39;m 은 그것을 붙여 넣고 클릭하고 내 인생을 계속 할 것입니다.

Here's 정직한 비교 I'd는 사용할 것을 묻는 주니어 데브를 제공합니다:

그 마지막 행은 내가 따르는 실제 규칙입니다. I'm 이 두 번 이상 일을 할 것이라면 스크립트로 들어갑니다. 다른 모든 것은 탭을 얻습니다.

나쁜 API 일 동안 어떤 도구를 열 수 있습니까?

이것은 keep 을 얻는 클러스터입니다. 타사 API 가 잘못 작동하고 있으며 페이로드가 있으며 무엇이든 수정하기 전에이를 이해해야합니다.

JSON 포맷터 - 내가 하나만 유지할 수 있다면 하나의 I & # 39;d 유지

축소된 JSON은 읽을 수 없으며, 더 나쁜 것은 it's일 때입니다 유효하지 않은 브라우저 오류는 "예기치 않은 token" 및 인간에게 아무 의미도 없는 문자 오프셋을 알려줍니다. The JSON 포맷터 pretty-prints 그것과 실제 들여쓰기 및 포인트에 실제 라인 that's 깨진. 시간의 90 퍼센트는 범인이 후행 쉼표입니다,이는 자바 스크립트 개체 리터럴에서 합법적이고 JSON 에서 불법입니다 - 구별은 내가 합산하고 싶은 것보다 더 많은 시간을 요했다. 더 깊은 다이빙: JSON 온라인 포맷 방법.

Base64 변환기 - JWT 및 데이터 URI용

JWT 는 점으로 구분된 세 개의 Base64url 세그먼트입니다. 가운데 하나를 붙여 넣습니다 Base64 변환기 그리고 토큰을 타사 디코더로 배송하지 않고도 발행자, 만료, 범위 등 청구범위를 읽을 수 있습니다. (나는 그것을 사용합니다 JWT 디코더 세 세그먼트를 모두 한 번에 구문 분석하기를 원하지만 페이로드가 이상해 보이고 바이트를 보고 싶을 때 여전히 원시 Base64에 도달합니다.) The 유니코드 잡았다, 그리고 왜 btoa() 이모티콘을 던졌습니다 Base64 인코딩 가이드.

타임스탬프 변환기 - 로그 포렌식

1752278400. 그게 어제인가요,2029 년인가요? The 타임스탬프 변환기 unix 초, 밀리초, 그리고를 돌립니다 ISO 8601 인간이 추론할 수 있는 것으로,당신이 신경쓰는 시간대에서. 내 사건 디버깅의 3 분의 2 는 각각 다른 형식으로 로그인한 세 가지 서비스의 타임스탬프를 정렬하고 있으며,그 중 하나는 UTC 에 있고 다른 것들은 aren't.

YAML 유효성 검사기 - 들여쓰기가 하중을 지탱하기 때문입니다

Kubernetes 매니페스트,GitHub Actions,docker-compose.YAML 은 공백에 유의하며 오류를 범하기보다는 의도를 묵묵히 재해석합니다. The 야엘 검증인 tab-vs-space와 인용되지 않은 공간을 포착합니다 no YAML 1.1은 부울로 구문 분석하는 데 도움이 됩니다 false. (네,정말입니다. 노르웨이 문제는 진짜입니다: 국가 코드 NO 된다 false 인용하지 않는 한.)

JSON Diff - 실제로 무엇이 바뀌었나요?

두 개의 API 응답, 하나는 작동하고 하나는 작동하지 않습니다. 텍스트 편집기에서 나란히 응시하는 것은 패배하는 게임입니다. JSON 차이점 don't 인 200 을 무시하고 다른 세 개의 키를 보여줍니다.

디버깅 선반의 나머지 부분

• SQL 포맷터- 누군가가 한 줄에 쓴 4개의 조인이 포함된 90줄 쿼리의 경우.
• 해시 생성기- MD5/SHA-1/SHA-256/SHA-512, 주로 다운로드 또는 캐시 키를 확인하기 위한 것입니다.
• 크론 파서- 왜냐하면 0 */2 * * * 그리고 */2 * * * * 한 문자씩 다르며 하중은 약 60배입니다.
• 직렬화 해제- PHP serialize() a에서 출력합니다 wp_options 행. 만약 당신이'wordpress 플러그인's 저장 설정을 디버깅한 적이 있다면,당신은 이것이 왜 존재하는지 정확히 알고 있을 것입니다.

I'm Writing Code, Debugging 하지 않을 때 나는 무엇을 사용합니까?

추측 없이 Regex

나는 regex를 씁니다 정규식 테스터 코드베이스에 닿기 전에 사실적인 샘플을 붙여넣고, 패턴을 작성하고, 일치하는 항목 하이라이트를 확인하세요. 그만큼 정규식 빌더 이것의 나머지 절반입니다 - it's for 당신이 영어에서 원하는 것을 알고 can't it's 인지 기억 \b 또는 \B. 전체 패턴 치트 시트와 하나의 중첩 수량자가 있는 서버를 정지시킬 수 있는 치명적인 역추적 트랩이 있습니다 Regex 빌더 가이드.

파종용 UUID

20개의 테스트 행, 20개의 고유 ID가 현재 있습니다. UUID 생성기 v1,v4, v7 을 대량으로 합니다. v7 을 새로운 기본 키에 사용합니다 - it's 시간 순서가 지정되어 있으므로 B-트리 인덱스가 does't 를 임의의 삽입물에 의해 파쇄되는 비싼 방법을 배웠고 에 적었습니다 UUID 생성기 가이드.

인코딩, 두 가지 맛 모두

URL 인코더 포함된 쿼리 문자열의 경우 & 그리고 = 그리고 공간. HTML 엔터티 순간 당신은 표시해야합니다 <script> 사건보고서가 아닌 텍스트로 페이지에. 이 두 가지는 지루하고 나는 끊임없이 사용합니다.

형식 논쟁

데이터는 대략 항상 잘못된 모양으로 도착합니다. 변환 세트는 제가 실제로 하는 동작을 다룹니다:

• JSON에서 CSV로- 이해관계자가 "the data"를 요구할 때 및 스프레드시트를 의미합니다. 중첩된 개체는 점 표기법 열로 평평해집니다. 세부정보는 다음과 같습니다 JSON-CSV 가이드.
• CSV에서 JSON- 그 반대, 파종용.
• JSON에서 YAML로- 구성 블록을 인간이 편집할 내용으로 전환하기 위한 것입니다.
• JSON 에 XML 을- 모든 레거시 SOAP 통합은 영원히 가능합니다.
• 이진 변환기- 텍스트 ↔ 이진/16 진수/십진수/팔. 대부분 교육 및 홀수 프로토콜 바이트에 대한.

각각의 추론이 포함된 전체 코딩 선반은 에 있습니다 코딩 도구 가이드.

텍스트와 콘텐츠에는 어떤 것을 사용합니까?

저는 많은 글을 씁니다 - 플러그인 문서,changelogs, 이 블로그. draft 와 publish 사이의 도구들입니다.

• 워드 카운터- 단어,문자, 읽기 시간. 또한 Google 이 잘라 내기 전에 160 자 예산에 대한 메타 설명을 확인하는 가장 빠른 방법입니다. More in the 워드 카운터 가이드.
• 케이스 변환기- camelCase,snake_case, kebab-case,PascalCase. 나는 희미하게 당황하지만 사실인 내 editor's 리팩터 도구를 사용하는 것보다 더 자주 이런 식으로 대량의 변수 이름을 바꿉니다. 케이스 변환기 가이드.
• 슬러그 생성기- 발음 구별 부호가 적절하게 처리되어 URL에 대한 제목입니다. Café Décor 되어야 한다 cafe-decor, 아니다 caf-dcor.
• 텍스트 차이- 두 개의 구성 파일 또는 두 가지 버전의 단락이 나란히 있습니다.
• 로렘 입숨- 아직 콘텐츠가 없는 레이아웃의 자리 표시자 복사본입니다.
• 문자열 반전- 틈새 시장이지만 인터뷰 준비와 회문 검사에 당신보다 더 많이 나타납니다'd 생각.

전체 텍스트 세트는 에서 다룹니다 텍스트 도구 가이드.

디자인과 프론트엔드 작업은 어떻습니까?

저는 디자이너가 아니라,받아들여질 수 있게 보여야 하는 개발자입니다. That's 는 특정한 직업이고,이 세 사람은.

• 컬러 피커- HEX ↔ RGB ↔ HSL,with contrast checking so you don't ship 3:1 본문 텍스트. HSL 은 호버 상태를 추측 대신 빼기로 만드는 형식입니다. 전체 처리: 컬러 피커 & amp; 변환기 가이드.
• 그라데이션 생성기- 선형, 방사형, 원뿔형, 라이브 미리보기 및 복사 가능한 CSS 포함. 쓰기 conic-gradient() 장님은 특별한 종류의 비참함입니다. CSS 그라디언트 생성기 가이드.
• CSS 미니파이어 그리고 HTML 미니파이어- 지금은 무언가를 a에 인라인해야 합니다 <style> 태그하고 작게 원하세요.
• 메타 태그 생성기- 제목, 설명, 그래프 열기, 트위터 카드, JSON-LD를 한 번에 사용할 수 있습니다. 모든 프로젝트에서 동일한 14개의 태그를 손으로 썼기 때문에 이 기능을 만들었습니다.

이미지, PDF, 기타 모든 파일에는 무엇을 사용합니까?

이미지 도구는 모두 browser's Canvas API 를 통해 실행되며,이는 4 MB PNG 가 기계를 떠나지 않음을 의미합니다. That's not marketing; it's just what happens when the processing is a <canvas> 그리고 POST 요청이 아닙니다.

• 이미지 압축- 질 슬라이더,실시간 크기 판독. 대부분의 스크린샷 나는 눈에 보이는 다름 없이 하락 70–85%를 발송합니다. 를 보십시오 이미지 압축 가이드.
• 이미지 크기 조정- 정확한 치수 또는 백분율, 종횡비가 잠겨 있습니다.
• 포맷 변환기- PNG/JPEG/WebP/AVIF. WebP는 지금 배송하는 기본 I입니다.
• 배경 제거제- 브라우저에서 세분화 모델을 실행합니다. It's the one tool where I notice the first load.
• QR 발전기- URL, 와이파이 자격 증명, vCards. 나는 주말의 큰 사용 또는 끔찍한 하나였다 손으로, 오류 수정 및 모든이 하나에 대한 ISO/IEC 18004 인코더를 작성했다.
• 비밀번호 생성기- 사용 crypto.getRandomValues(), 아니다 Math.random(). 그 구별은 길이 슬라이더가 하는 것보다 더 중요합니다.

그리고 몇 가지 확률과 끝은 내가 한 번 필요했기 때문에 구축 한 다음 계속 필요로했습니다: 단위 변환기, 백분율 계산기, 날짜 차이, 텍스트로 필기합니다.

더 넓은 이미지 세트는 에 있습니다 이미지 도구 가이드그리고 PDF는 자체 처리를 받습니다 PDF 도구 가이드.

실제 작업에서 이러한 체인을 어떻게 함께 작동합니까?

개별적으로 각 도구는 1 분을 절약합니다. 컴파운딩은 그들을 체인화 할 때 발생합니다. Here's 일주일 전의 실제 시퀀스로 401s 를 간헐적으로 반환하는 통합을 디버깅합니다:

1. 실패한 request's 를 복사합니다 Authorization 헤더. 점을 분할하고 세그먼트 2를 에 붙여넣습니다 Base64 변환기. 읽다 exp.
2. exp 는 유닉스 타임스탬프이다. Into the 타임스탬프 변환기니다. 요청이 발사되기 41 초 전에 만료되었습니다.
3. That's auth 문제가 아닌 시계 스큐 문제. refresh cron with the 를 확인한다 크론 파서- 60 분 TTL 로 토큰에 대해 60 분마다 토큰을 새로 고치고있었습니다. 마진 없음. 경쟁 조건.
4. 크론을 50 분으로 변경합니다. 완료.

네 개의 도구,아마도 3 분,그리고 답은 크론 표현식으로 한 글자 변경이었습니다. 대안 - 로깅 추가,재배치, 반복 대기 - 은 반나절이었습니다.

내가 끊임없이 실행하는 다른 체인은 콘텐츠 one: draft →입니다 워드 카운터 → 슬러그 생성기 → 이미지 압축 헤더 이미지의 경우 → 메타 태그 생성기 → 출판.

왜 "Client-Side" 실제로 중요한가?

때문에이 게시물의 상단에 스테이징-토큰 이야기, 대부분. 하지만 내가 주장보다는 손을 흔들어에 대해 정확 하 게 하자, 이후 & quot;privacy-first" 모든 의미의 that's 배수 되었습니다 문구입니다.

도구가 클라이언트 측일 때,붙여넣는 파일 또는 끈은 당신의 탭에서 달리는 자바스크립트에 의해 취급된다. 그것은 당신의 browser's 기억에서 변수로 들어가고 결과로 다시 나온다. 없다 fetch(), 아니요 FormData업로드가 없습니다. 이것을 약 10 초 안에 직접 확인할 수 있습니다: DevTools 를 열고 네트워크 탭으로 이동하여 Toolz.dev 의 모든 도구에 무언가를 붙여넣고 아무 일도 일어나지 않는 것을 지켜보세요. That's 전체 증명. "convert,"를 클릭할 때 네트워크 요청이 실행되는 경우 데이터가 someone's 서버에 있습니다.

그것이 당신을 구체적으로 구매하는 것:

• 비밀을 붙여 넣을 수 있습니다. 토큰, 내부 API 응답, 클라이언트's 고객 CSV를 준비합니다. It's는 아무데도 가지 않습니다.
• It's 빠른. 왕복 없음. 브라우저가 구문 분석하는 데 걸리는 시간에 5MB JSON 파일 형식.
• 파일 크기 천장 없음 자신의 램을 넘어서.
• 요금 제한 없음, there's 때문에 당신을 rate-limit 하는 서버가 없습니다.

트레이드 오프는 진짜이며 I & #39;ll 이름을 지정하십시오: 무거운 작업 (200 MB 비디오, 500 페이지 이상의 OCR 패스) 은 GPU가있는 서버보다 브라우저에서 진정으로 느립니다. 클라이언트 측은 보편적 인 대답이 아닌 올바른 기본값입니다.

자주 묻는 질문

이러한 개발자 생산성 도구는 실제로 무료입니까?

예 - 아니 계정, 아니 사용 한도, 아니 만료 평가판. 도구는 그들이 효과적으로 나에게 사용 당 아무것도 비용을 의미 당신의 기계에서 실행, 이는 there's 아무것도 미터로.

그들을 사용하기 위해 계정이 필요합니까?

아니오. 공구를 열고,그것을 사용하고,탭을 닫으십시오. 가입 벽이 없고,처리가 클라이언트 측 there's 이기 때문에 당신의 자료를 처음에 붙일 것이다 세션이 없습니다.

API 키나 토큰과 같은 민감한 데이터를 붙여넣는 것이 안전한가요?

클라이언트 측 도구의 경우 예 - 그리고 당신은 나를 신뢰하기보다는 그것을 확인할 수 있습니다. 당신의 browser's DevTools 네트워크 탭을 열고 붙여넣기,아웃바운드 요청을 위해 시계. 거기 aren't 아무. I'd 가 여전히 여기를 포함하여 어디서나 피하는 한 가지는 a 를 붙여넣는 것입니다 생산 비밀 당신은 할 수 있습니다't 회전 - 도구 때문이 아니라 클립보드, 화면 공유 및 브라우저 확장 프로그램이 모두 실제 공격 표면이기 때문입니다.

이러한 도구는 오프라인에서 작동합니까?

페이지는 한 번 로드해야 합니다. 그 후,연결이 끊어지면 대부분의 도구는 계속 작동합니다. 왜냐하면 작업을 수행하는 JavaScript 가 이미 탭에 있기 때문입니다. 오프라인 상태에서 페이지를 다시 로드하면 you'll 아무것도 얻지 못합니다.

이들은 jq 또는 openssl과 같은 CLI 도구와 어떻게 비교됩니까?

다른 작업. CLI 는 스크립트,반복, 또는 CI 에서 아무것도 승리 - it's 구성 및 재현. 브라우저 도구는 일회성 작업에 대한 승리,시각적 미리보기에서 혜택을 아무것도 (regex,그라디언트, 색상,이미지 품질), 그리고 당신이 할 수있는 기계't 소프트웨어를 설치. 나는 매일과 don't 생각 it's 경쟁.

어떤 도구를 먼저 북마크에 추가해야 합니까?

코드를 작성하는 경우: JSON 포맷터,타임스탬프 변환기,Regex 테스터,Base64 변환기. 내용을 작성하는 경우: 워드 카운터,슬러그 생성기,이미지 압축. 프론트 엔드를 수행하는 경우: 색상 선택기,그라디언트 생성기,메타 태그 생성기. 폴더로 북마크하고 폴더를 중간 클릭하여 한 번에 모두 엽니다.

도구가 모바일에서 작동합니까?

They're 응답 및 그들은 기능,그러나 I'll 는 정직하다 - 나는 키보드와 넓은 뷰포트를 위해 그들을 디자인했다. 붙여넣기 및 복사 작업은 전화에 괜찮습니다. 색상 스펙트럼 또는 regex 샘플과 관련된 모든 것은 싸움이 될 것입니다.

이러한 도구에 대한 API가 있습니까?

현재 아닙니다. 모든 것은 기본적으로 서버 측 API 와 상충되는 설계에 의해 클라이언트 측입니다. 프로그래밍 방식의 사용을 위해 기본 작업은 모두 하나의 라이브러리 호출입니다. whatever language you're already writing - json_encode, base64_decode, preg_match등등.

개발자를 위한 최고의 무료 온라인 도구는 무엇입니까?

그것은 당신의 일에 달려 있습니다,그러나 단단한 핵심은 체재와 검사 (JSON 체재,Base64 변환기), 시간과 원본 (Timestamp 변환기,낱말 카운터,슬러그 발전기), 본 일 (Regex 검사자), 매체 (이미지 압축,색깔 피커) 를 커버합니다. Toolz.dev 는 600+를 한 곳에,모두 자유롭 클라이언트 측 지킵니다. 제일 공구는 보통 당신이 마찰을 명중할 때 탭에서 이미 열리는 것입니다.

아무것도 설치하지 않고 이러한 개발자 도구를 사용할 수 있습니까?

예 - 설치할 것이 없으며 추가 할 확장 프로그램도 없습니다. 각 도구는 브라우저에서 로직을 실행하는 웹 페이지이므로 URL 을 열고 모든 운영 체제에서 작업을 시작합니다. 페이지가로드되면 연결이 끊어지더라도 계속 작동합니다.

짧은 버전

개발자 생산성은 isn't 하나의 큰 잠금 해제. It's 백 작은 마찰의 제거: 페이로드 당신은 can't 읽기, 타임스탬프 당신은 can't 구문 분석, regex you're 추측, 스크린 샷 that's 4 MB 언제 400 KB 이어야 한다. 그 중 개별적으로 블로그 게시물의 가치가 없습니다. 집합적으로 그들은're 당신이 뭔가를 배송 한 날과 바쁜 날 사이의 차이의 대부분.

여기 있는 모든 것이 에 있습니다 Toolz.dev는, 자유로운, 당신의 브라우저에서, 당신의 자료는 당신의 기계에 체재하고 있는 상태에서. 로 시작하십시오 JSON 포맷터- 이 게시물에서 탭 하나만 가져오면 that's 점심 시간까지 비용을 지불하는 탭입니다.