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 Query Tracer & Visualizer

Анімуйте рекурсивну розв’язку DNS від вашого розв’язувача до авторитетного сервер імен. Переглядайте кожен стрибок, RTT, TTL і поведінку кешу.

Панель вкладок
Панель вкладок: Симуляція (існуючий інтерфейс користувача)
Швидкий вибір доменів
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, потім запитує сервери TLD для отримання авторитетного сервера імен, потім отримує запис. Кожен стрибок показує RTT і чи була відповідь кешована.
Конструктор спеціальних зон
Визначте спеціальну зону — потім надішліть запит до неї, як до будь-якого іншого домену
Формат:label type value TTL [priority]
використання@для верхівки зони. Записи MX мають додаткове поле пріоритету.
Підтримувані типи: A, AAAA, MX, NS, TXT, CNAME
Список збережених зон
/.tab-panel#panelSimulate Панель вкладок: Імпорт справжнього запиту
1Виконайте цю команду у своїй системі:
РЕКОМЕНДОВАНО (найнадійніше — працює на будь-якому домені): dig example.com Або Windows / Linux / macOS: nslookup example.com Для повного шляху вирішення (може виникнути помилка на CDN або складному DNS): dig +trace +tries=1 +nodnssec example.com Щоб використовувати певний загальнодоступний сервер DNS: dig @8.8.8.8 example.com dig @1.1.1.1 example.com ⚠️ УНИКАЙТЕ: копайте + відстежуйте самостійно Це не вдається на багатьох доменах (розміщені на CDN, неправильно налаштовані DNS). Натомість використовуйте наведені вище команди.
Примітка: dig @8.8.8.8 +trace також не вдається — прапор @ впливає лише на перший стрибок.
2Скопіюйте весь результат і вставте його нижче:
3Візуалізуйте проаналізований шлях запиту:
/.tab-panel#panelImport
/.calc-заголовок Прогрес анімації
Запит кореневих серверів імен...
Візуалізатор SVG

Шлях вирішення

МІС
Заповнено JS
Покроковий журнал

Покроковий журнал вирішення

# Сервер RTT Запит/Відповідь Тип
Остаточна відповідь

Остаточна відповідь

Таймер TTL

Таймер кешу TTL

Інспектор повідомлень DNS

Інспектор повідомлень DNS

Концепції

DNS Concepts Reference

рекурсивний:Ваш розпізнавач-заглушка надсилає один запит до рекурсивного розпізнавача (наприклад, 8.8.8.8). Цей резолвер обробляє всю ітеративну роботу від вашого імені та повертає остаточну відповідь.

Ітеративний:Кожен сервер імен повертає aнаправлення— «Я ні знаю, але спробуй цей сервер". Рекурсивний розпізнавач слідує за рефералами, доки не досягне авторитетний сервер імен.

Цей інструмент імітуєітеративнийзапити, які виконує рекурсивний розв’язувач внутрішньо: root → 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. Резолвери кешують цю негативну відповідь протягом певного часу зониМінімальний TTL SOA(частіше 300–3600 с).

Негативне кешування (RFC 2308) запобігає повторним запитам щодо неіснуючих імен.
Коли є офіційний сервер імен зонив межахсама зона (наприклад,ns1.example.comдляexample.com), циркуляр виникне залежність. Батьківська зона TLD вирішує це шляхом включенняклеїти записи— Записи для сервера імен надаються безпосередньо у відповіді реферала, уникаючи необхідності додаткового пошуку.
/.calc-контейнер ============================================================== JAVASCRIPT ==============================================================