개발자 도구

실제 작업을 방해하는 소소한 작업을 위한 브라우저 툴박스

대부분의 코딩 문제는 크고 흥미롭습니다. 실제로 작업 속도를 늦추는 것들은 그렇지 않습니다. 압축된 API 응답, 읽을 수 없는 JWT, 쿼리 문자열이 뒤죽박죽인 URL, 거의 작동하는 정규 표현식이 눈앞에 있습니다. 이것들 중 어느 것도 의존성, CLI 설치, 광고 가득한 탭을 열 가치가 없습니다. 30초와 깨끗한 텍스트 상자면 충분합니다.

이 모음의 전체 아이디어입니다. 즉시 로드되고, 브라우저에서 완전히 실행되며, 가입을 요구하지 않는 단일 페이지의 무료 개발자 유틸리티들. JSON 형식화, Base64, URL 인코딩, JWT 디코딩, 색상 변환, 정규 표현식 테스트, 타임스탬프 계산, HTTP 상태 참조가 한 곳에 있습니다. 구글에서 처음 나오는 사이트에 데이터를 붙여넣는 일을 멈추고, 그 무작위 사이트가 그것을 기록하는지 걱정하는 일도 멈출 수 있습니다.

각 도구가 실제로 하는 일

JSON 포매터는 이스케이프 처리된 한 줄짜리 JSON 덩어리를 사람이 훑어볼 수 있는 형태로 변환합니다. 웹훅이 발생해서 로그가 원시 본문을 하나의 거대한 문자열로 캡처한다고 가정해 보세요. 붙여넣고, 2칸 또는 4칸 들여쓰기를 선택하면 구문 오류가 있으면 정확히 짚어주는 읽기 쉬운 트리를 얻습니다. 형식화하면서 검증하기 때문에 오류가 있는 쉼표나 따옴표 없는 키가 앱 세 겹 아래에서 조용히 실패하는 대신 바로 지적됩니다.

Base64 인코딩/디코딩은 의식하지 못한 채 끊임없이 사용하는 도구입니다. 데이터 URI, Basic Auth 헤더, 설정 파일에 들어간 바이너리 블롭, 토큰의 세그먼트 — 모두 Base64입니다. 헤더 값을 디코딩해서 자격 증명이 예상대로 전송되는지 확인하거나, 작은 이미지를 인라인으로 삽입하기 위해 인코딩하세요. 입력이 일반 ASCII가 아닌 순간에 중요한 UTF-8을 깔끔하게 처리합니다.

URL 인코딩/디코딩 도구는 쿼리 매개변수에 공백, 앰퍼샌드, 또는 더하기 기호가 포함되어 요청이 조용히 깨지는 고전적인 버그를 수정합니다. 링크를 손으로 작성하고 값이 name=John & Co라면 서버가 매개변수 구분자로 읽지 않도록 앰퍼샌드를 %26으로 이스케이프해야 합니다. 붙여넣고, 인코딩하고, 복사하면 됩니다. 퍼센트 코드로 가득 찬 기록된 URL을 보며 실제로 무엇이 요청되었는지 파악하려 할 때는 디코딩이 반대로 작동합니다.

토큰 도구, 그리고 중요한 주의 사항

JWT 디코더는 토큰을 점으로 구분된 세 부분으로 나누고 헤더와 페이로드를 일반 JSON으로 보여줍니다. 인증을 디버깅할 때 이것은 대단히 유용합니다. 어떤 알고리즘이 토큰에 서명했는지 확인하고, sub를 읽고, exp 클레임이 이미 지났는지 확인하고, 게이트웨이가 클라이언트에게 어떤 범위나 역할을 전달하는지 정확히 볼 수 있습니다.

사람들이 잊어버리는 부분입니다. JWT 디코딩은 검증이 아닙니다. 페이로드는 단지 Base64url입니다. 토큰을 가진 누구든 모든 클레임을 읽을 수 있으며, 이 도구는 정확히 그것을 하고 그 이상은 하지 않습니다. 서명을 확인하지 않으므로 디코딩된 토큰은 토큰이 말하는 것이지 진짜인지를 알려주지 않습니다. 권한 결정을 위해 디코더의 클레임을 절대 신뢰하지 마세요. 그것은 서명 키를 가진 서버의 역할입니다. 이해하고 디버깅하기 위해 디코더를 사용하되, 검증을 위해서는 절대 사용하지 마세요.

정규 표현식 테스터는 가장 답답한 유틸리티의 루프를 닫아줍니다. 패턴을 작성하고, 샘플 텍스트를 넣으면, 타이핑하는 동안 일치 항목이 실시간으로 강조됩니다. 캡처 그룹이 나열되므로 그룹 2가 실제로 연도를 가져오는지 전체 날짜가 아닌지 확인할 수 있습니다. 실제 코드베이스 내에서 패턴을 테스트하는 편집-저장-재실행 주기보다 낫고, 탐욕적인 수량자가 의도한 것보다 더 많이 삼키는 이유를 배우는 빠른 방법입니다.

마무리로: HEX↔RGB 변환기는 디자인 토큰과 CSS가 맞지 않을 때 #1a2b3c를 rgb(26, 43, 60)으로 또는 반대로 변환합니다. Unix 타임스탬프 변환기는 1718900000을 실제 날짜와 시간으로 변환합니다. 데이터베이스가 에포크 초를 저장하고 눈으로 파싱할 수 없을 때마다 필요합니다. 그리고 HTTP 상태 코드 참조는 API 호출이 실패할 때 422와 409 중 어느 것이 올바른 답인지 추측하는 것을 방지해줍니다.

로컬 처리, 민감한 것도 붙여넣을 수 있습니다

프로덕션 데이터를 다루는 누구에게나 가장 중요한 부분입니다. 여기의 모든 도구는 JavaScript에서 클라이언트 측으로 실행됩니다. 입력이 브라우저를 떠나지 않습니다. 업로드도, 서버 왕복도, 기록할 것도 없습니다. 즉, 실제 액세스 토큰을 붙여넣어 클레임을 검사하고, 자격 증명이 포함된 Base64 헤더를 디코딩하고, 고객 데이터로 가득한 API 응답을 형식화해도 네트워크를 통해 전달되지 않습니다. 증명하고 싶으신가요? 개발 도구를 열고, 네트워크 탭을 보면서 붙여넣어 보세요. 아무것도 나가는 것이 보이지 않을 것입니다. 민감한 페이로드에서 로컬 전용 도구는 있으면 좋은 기능이 아닙니다. 유일하게 책임 있는 선택입니다.

자주 묻는 질문