DNS Query Tracer & Visualizer

.calc-header { margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; } .calc-header h2 { margin-top: 0; color: white; font-size: 28px; margin-bottom: 10px; } .calc-header p { margin: 10px 0 20px 0; opacity: 0.95; font-size: 15px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-weight: 600; font-size: 14px; color: white; } .form-group input, .form-group select { padding: 12px 14px; font-size: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; font-family: inherit; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #4CAF50; background: white; box-shadow: 0 0 0 3px rgba(76,175,80,0.15); } .form-group select { cursor: pointer; } /* Full-width domain row */ .form-group.full-width { grid-column: 1 / -1; } .submit-btn { padding: 14px 35px; font-size: 16px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-top: 15px; width: 100%; } .submit-btn:hover { background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); } .submit-btn:active { background: #3d8b40; transform: translateY(0); } .submit-btn:disabled { background: #9E9E9E; cursor: not-allowed; transform: none; box-shadow: none; } .btn-row { display: flex; gap: 12px; margin-top: 15px; } .btn-row .submit-btn { margin-top: 0; } .btn-secondary { padding: 14px 35px; font-size: 16px; background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.5); border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; width: 100%; } .btn-secondary:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); } .btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* Quick-pick domain pills */ .domain-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .domain-pill { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; padding: 5px 12px; border-radius: 20px; cursor: pointer; font-size: 13px; font-family: 'Courier New', monospace; transition: all 0.2s ease; user-select: none; } .domain-pill:hover { background: rgba(255,255,255,0.35); transform: translateY(-1px); } .help-text { margin-top: 15px; font-size: 14px; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.1); padding: 10px 15px; border-radius: 4px; } .help-text strong { color: white; } /* ========================================================= Result sections ========================================================= */ .result-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; display: none; } .result-section.show { display: block; } .result-section:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .section-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; } .section-header h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; } .section-content { padding: 20px; background: #fafafa; } .data-row { display: flex; margin: 10px 0; padding: 10px; background: white; border-radius: 4px; border-left: 3px solid #4CAF50; align-items: flex-start; } .data-label { font-weight: bold; color: #555; min-width: 180px; flex-shrink: 0; font-size: 14px; } .data-value { color: #333; font-family: 'Courier New', monospace; word-break: break-word; font-size: 16px; } .data-value.highlight { color: #7B1FA2; font-weight: bold; font-size: 20px; } /* ========================================================= SVG Visualizer ========================================================= */ #svgWrapper { background: #1a1a2e; border-radius: 8px; overflow: hidden; position: relative; } #queryVisSvg { width: 100%; display: block; } /* Status badge */ .cache-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; font-family: 'Courier New', monospace; vertical-align: middle; } .cache-badge.miss { background: #ff6b6b; color: white; } .cache-badge.hit { background: #51cf66; color: white; } /* Zone tags */ .zone-tag { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: bold; font-family: 'Courier New', monospace; vertical-align: middle; margin-left: 5px; } .zone-tag.builtin { background: #1565C0; color: white; } .zone-tag.custom { background: #2E7D32; color: white; } /* Custom zone builder */ .zone-builder-toggle { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); color: white; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; width: 100%; text-align: left; margin-top: 14px; transition: background 0.2s ease; } .zone-builder-toggle:hover { background: rgba(255,255,255,0.25); } .zone-builder-panel { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 16px; margin-top: 12px; display: none; } .zone-builder-panel.open { display: block; } .zone-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .zone-form-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 4px; display: block; } .zone-form-input { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; background: rgba(255,255,255,0.92); font-family: 'Courier New', monospace; box-sizing: border-box; } .zone-form-input:focus { outline: none; border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76,175,80,0.25); } .zone-records-area { width: 100%; padding: 9px 12px; font-size: 13px; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; background: rgba(255,255,255,0.92); font-family: 'Courier New', monospace; box-sizing: border-box; resize: vertical; min-height: 120px; } .zone-records-area:focus { outline: none; border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76,175,80,0.25); } .zone-hint { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; line-height: 1.5; } .zone-hint code { background: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 3px; font-family: 'Courier New', monospace; color: #a5d6a7; } .zone-save-btn { padding: 9px 20px; background: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 14px; font-weight: bold; cursor: pointer; transition: background 0.2s ease; } .zone-save-btn:hover { background: #43a047; } .zone-error-msg { color: #ef9a9a; font-size: 13px; margin-top: 8px; display: none; } .zone-error-msg.show { display: block; } /* Saved zones list */ .saved-zones-wrap { margin-top: 14px; } .saved-zones-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 8px; } .saved-zones-list { display: flex; flex-wrap: wrap; gap: 8px; } .saved-zone-item { display: inline-flex; align-items: center; gap: 5px; background: rgba(46,125,50,0.4); border: 1px solid rgba(76,175,80,0.6); border-radius: 20px; padding: 4px 10px 4px 12px; font-size: 13px; font-family: 'Courier New', monospace; color: white; } .saved-zone-use { background: none; border: none; color: #a5d6a7; cursor: pointer; font-size: 12px; padding: 0; font-family: inherit; text-decoration: underline; } .saved-zone-use:hover { color: white; } .saved-zone-del { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; } .saved-zone-del:hover { color: #ef9a9a; } .zone-meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.6); } .zone-clear-btn { background: none; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); padding: 3px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .zone-clear-btn:hover { border-color: #ef9a9a; color: #ef9a9a; } /* ========================================================= Tab system ========================================================= */ .tab-bar { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 2px solid rgba(255,255,255,0.25); padding-bottom: 0; } .tab-btn { padding: 10px 20px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; transition: all 0.2s ease; font-family: inherit; position: relative; bottom: -2px; } .tab-btn:hover { background: rgba(255,255,255,0.2); color: white; } .tab-btn.active { background: rgba(255,255,255,0.95); color: #7B1FA2; border-color: rgba(255,255,255,0.6); border-bottom: 2px solid rgba(255,255,255,0.95); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* Import tab styles */ .import-step { margin-bottom: 18px; } .import-step-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.95); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .import-step-num { background: rgba(255,255,255,0.25); color: white; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; flex-shrink: 0; } .cmd-block { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 12px 14px; font-family: 'Courier New', monospace; font-size: 13px; color: #a5d6a7; line-height: 1.8; } .cmd-block .cmd-os { color: rgba(255,255,255,0.55); font-size: 11px; font-family: inherit; margin-bottom: 3px; display: block; } .cmd-block .cmd-line { color: #80cbc4; } .import-textarea { width: 100%; min-height: 160px; padding: 12px 14px; font-family: 'Courier New', monospace; font-size: 12.5px; line-height: 1.6; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; background: rgba(255,255,255,0.95); color: #1a1a2e; resize: vertical; box-sizing: border-box; transition: border-color 0.2s ease; } .import-textarea:focus { outline: none; border-color: #4CAF50; background: white; box-shadow: 0 0 0 3px rgba(76,175,80,0.15); } .import-parse-error { background: rgba(229,57,53,0.15); border: 1px solid rgba(229,57,53,0.5); border-left: 4px solid #e53935; border-radius: 4px; padding: 12px 15px; color: #ffcdd2; font-size: 13px; line-height: 1.6; margin-top: 12px; display: none; } .import-parse-error.show { display: block; } .import-parse-error code { background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 12px; color: #ff8a80; } .import-parse-success { background: rgba(76,175,80,0.15); border: 1px solid rgba(76,175,80,0.4); border-left: 4px solid #4CAF50; border-radius: 4px; padding: 12px 15px; color: rgba(255,255,255,0.9); font-size: 13px; line-height: 1.8; margin-top: 12px; display: none; } .import-parse-success.show { display: block; } .import-parse-success strong { color: #a5d6a7; } .import-path-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; } .import-path-dot { width: 8px; height: 8px; border-radius: 50%; background: #4CAF50; margin-top: 5px; flex-shrink: 0; } .import-source-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: bold; font-family: 'Courier New', monospace; margin-left: 6px; vertical-align: middle; } .import-source-badge.dig-trace { background: #1565C0; color: white; } .import-source-badge.dig-simple { background: #6A1B9A; color: white; } .import-source-badge.dig-short { background: #37474F; color: white; } .import-source-badge.nslookup { background: #E65100; color: white; } /* Unknown domain callout */ .unknown-domain-box { background: #fff8e1; border: 1px solid #f9a825; border-left: 4px solid #f9a825; border-radius: 4px; padding: 14px 16px; font-size: 14px; color: #4a3200; margin-top: 10px; display: none; } .unknown-domain-box.show { display: block; } .unknown-domain-box strong { color: #e65100; } .unknown-domain-box .create-zone-quick { display: inline-block; margin-top: 8px; padding: 6px 14px; background: #e65100; color: white; border: none; border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer; transition: background 0.2s ease; } .unknown-domain-box .create-zone-quick:hover { background: #bf360c; } .unknown-domain-box ul { margin: 8px 0 0 0; padding-left: 20px; line-height: 1.8; } /* Simulation notice */ .sim-notice { background: rgba(255,255,255,0.12); border-left: 3px solid rgba(255,255,255,0.5); border-radius: 0 4px 4px 0; padding: 8px 12px; font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 12px; line-height: 1.5; } /* Step log table */ .step-table { width: 100%; border-collapse: collapse; font-size: 14px; } .step-table th { background: #7B1FA2; color: white; padding: 10px 12px; text-align: left; font-size: 13px; } .step-table td { padding: 10px 12px; border-bottom: 1px solid #e0e0e0; vertical-align: top; } .step-table tr:last-child td { border-bottom: none; } .step-table tr:nth-child(even) td { background: #f5f5f5; } .step-num { background: #7B1FA2; color: white; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; flex-shrink: 0; } .arrow-query { color: #4fc3f7; font-weight: bold; } .arrow-resp { color: #81c784; font-weight: bold; } .arrow-ref { color: #ffb74d; font-weight: bold; } .arrow-cached { color: #ce93d8; font-weight: bold; } .arrow-err { color: #e57373; font-weight: bold; } /* DNS message hover panel */ .msg-panel { background: #263238; border: 1px solid #455a64; border-radius: 6px; padding: 12px 15px; font-family: 'Courier New', monospace; font-size: 12px; color: #cfd8dc; margin-top: 8px; line-height: 1.7; display: none; white-space: pre; overflow-x: auto; } .msg-panel.visible { display: block; } .msg-toggle { background: none; border: 1px solid #9C27B0; color: #9C27B0; padding: 3px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .msg-toggle:hover { background: #9C27B0; color: white; } /* TTL timer */ .ttl-bar-wrap { background: #e0e0e0; border-radius: 10px; height: 14px; overflow: hidden; margin-top: 6px; } .ttl-bar-fill { height: 100%; background: linear-gradient(90deg, #7B1FA2, #9C27B0); border-radius: 10px; transition: width 1s linear; } .ttl-label { font-size: 12px; color: #666; margin-top: 4px; font-family: 'Courier New', monospace; } /* Error box */ .error-box { background: #fce4ec; border: 1px solid #e91e63; border-left: 4px solid #e91e63; border-radius: 4px; padding: 12px 16px; color: #c62828; font-size: 14px; margin-top: 10px; display: none; } .error-box.show { display: block; } /* Animation progress indicator */ .anim-progress { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(156,39,176,0.08); border-radius: 4px; font-size: 13px; color: #7B1FA2; margin-bottom: 10px; display: none; } .anim-progress.show { display: flex; } .spinner { width: 16px; height: 16px; border: 2px solid rgba(123,31,162,0.2); border-top-color: #7B1FA2; border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* Concept explainer accordions */ .concept-wrap { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; margin-top: 8px; } .concept-toggle { background: #f5f0ff; border: none; width: 100%; text-align: left; padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: #7B1FA2; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s ease; } .concept-toggle:hover { background: #ede7f6; } .concept-toggle .arrow { transition: transform 0.2s ease; font-size: 12px; } .concept-toggle.open .arrow { transform: rotate(90deg); } .concept-body { display: none; padding: 14px 16px; background: white; font-size: 14px; line-height: 1.7; color: #444; } .concept-body.open { display: block; } .concept-body code { background: #f5f0ff; padding: 1px 5px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 13px; color: #7B1FA2; } /* ========================================================= Mobile responsive ========================================================= */ @media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } .form-group.full-width { grid-column: 1; } .data-row { flex-direction: column; } .data-label { margin-bottom: 5px; min-width: auto; } .btn-row { flex-direction: column; } .step-table th:nth-child(3), .step-table td:nth-child(3) { display: none; } #queryVisSvg { min-height: 280px; } .zone-form-grid { grid-template-columns: 1fr; } .tab-bar { flex-direction: row; /* keep tabs side by side on mobile */ gap: 4px; } .tab-btn { padding: 9px 14px; font-size: 13px; } .import-textarea { min-height: 120px; font-size: 12px; } .cmd-block { font-size: 12px; } } ========================================================== 메인 컨테이너 ==========================================================
헤더/입력 패널

DNS 쿼리 추적기 및 시각화 도구

확인자에서 신뢰할 수 있는 DNS 확인으로 재귀적 DNS 확인을 애니메이션화합니다. 네임서버. 모든 홉, RTT, TTL 및 캐시 동작을 확인하세요.

탭바
탭 패널: 시뮬레이션(기존 UI)
빠른 선택 도메인
www.example.com mail.example.com www.google.com github.com api.cloudflare.com www.amazon.com www.wikipedia.org smtp.fastmail.com mx.example.net NXDOMAIN 예
시뮬레이션된 데이터베이스:이 도구는 내장된 DNS 데이터베이스를 사용합니다. (브라우저에서는 실제 네트워크 쿼리가 불가능합니다.) 영역 빌더 사용 아래에서 테스트하려는 도메인을 추가하세요.
작동 방식:확인자가 루트 네임서버에 그런 다음 TLD 서버에 권한 있는 네임서버를 쿼리한 다음 기록을 가져옵니다. 각 홉에는 RTT와 답변이 캐시되었는지 여부가 표시됩니다.
맞춤형 존 빌더
사용자 정의 영역을 정의한 다음 다른 도메인처럼 쿼리하세요.
체재:label type value TTL [priority]
사용@영역 정점의 경우. MX 레코드는 추가 우선순위 필드를 사용합니다.
지원되는 유형: A, AAAA, MX, NS, TXT, CNAME
저장된 영역 목록
/.tab-panel#panel시뮬레이트 탭 패널: 실제 쿼리 가져오기
1시스템에서 다음 명령을 실행하세요.
RECOMMENDED(가장 안정적임 - 모든 도메인에서 작동): example.com을 파헤쳐보세요 또는 Windows/Linux/macOS: nslookup example.com 전체 해결 경로의 경우(CDN 또는 복잡한 DNS에서는 실패할 수 있음): 발굴 +추적 +tries=1 +nodnssec example.com 특정 공용 DNS 서버를 사용하려면: 발굴 @8.8.8.8 example.com 발굴 @1.1.1.1 example.com ⚠️ 피하십시오: 단독으로 발굴 +추적 이는 많은 도메인(CDN 호스팅, 잘못 구성된 DNS)에서 실패합니다. 대신 위의 명령을 사용하세요.
참고: dig @8.8.8.8 +trace도 실패합니다. @ 플래그는 첫 번째 홉에만 영향을 미칩니다.
2전체 출력을 복사하여 아래에 붙여넣습니다.
3구문 분석된 쿼리 경로를 시각화합니다.
/.tab-panel#panel가져오기
/.calc-헤더 애니메이션 진행
루트 네임서버 쿼리 중...
SVG 시각화 도구

해결 경로

놓치다
JS로 채워짐
단계별 로그

단계별 해결 로그

# 섬기는 사람 RTT 쿼리/응답 유형
최종 답변

최종 답변

TTL 타이머

TTL 캐시 타이머

DNS 메시지 검사기

DNS 메시지 검사기

개념

DNS 개념 참조

재귀:스텁 해결 프로그램이 재귀 해결 프로그램에 하나의 쿼리를 보냅니다. (예: 8.8.8.8) 해당 해결 프로그램은 사용자를 대신하여 모든 반복 작업을 처리하고 최종 답변을 반환합니다.

반복:각 네임서버는추천— "나는 그렇지 않다 알지만 이 서버를 사용해 보세요." 재귀 해결자는 다음 단계에 도달할 때까지 참조를 따릅니다. 권한 있는 네임서버.

이 도구는반복적인재귀 해석기가 수행하는 쿼리 내부적으로: 루트 → TLD → 권한 있음.
모든 DNS 레코드는 초 단위로 TTL을 전달합니다. 해석기는 해당 기간 동안 답변을 캐시합니다. 캐시된 동안 후속 쿼리는 즉시 응답됩니다(네트워크 왕복 없음).

일반적인 TTL:
  • A/AAAA— 300초(5분) ~ 3600초(1시간)
  • MX— 일반 3600초
  • NS— 86400초(24시간) 일반
  • TXT (SPF)— 일반 3600초
낮은 TTL은 빠른 레코드 변경을 허용합니다. TTL이 높으면 확인자 로드가 줄어듭니다.
신뢰할 수 있는 네임서버:실제 구역 데이터(A 레코드, MX)를 보유합니다. 기록 등)을 도메인에 적용합니다. 그것은 다음과 같이 대답한다AA=1(정답) DNS 헤더에 설정됩니다.

재귀(캐싱) 해결 프로그램:영역 데이터를 보유하지 않습니다. 쿼리합니다 클라이언트를 대신하여 다른 서버가 결과를 캐시하고 답변을 반환합니다. 예: 8.8.8.8, 1.1.1.1.
도메인이 존재하지 않으면 권한 있는 네임서버가 반환합니다.RCODE=NXDOMAIN. 확인자는 해당 기간 동안 이 부정적인 응답을 캐시합니다. 구역의SOA 최소 TTL(보통 300~3600초)

네거티브 캐싱(RFC 2308)은 존재하지 않는 이름에 대한 반복 쿼리를 방지합니다.
영역의 권한 있는 네임서버가이내에구역 그 자체 (예:ns1.example.com~을 위한example.com), 원형 의존성이 발생하게 됩니다. 상위 TLD 영역은 다음을 포함하여 이 문제를 해결합니다.접착제 기록— 직접 제공되는 네임서버에 대한 레코드 추천 응답에서 추가 조회가 필요하지 않습니다.
/.calc-컨테이너 ========================================================== 자바스크립트 ==========================================================