# Як встановити Tampermonkey і скрипт для дебагу WebRTC

## Установка Tampermonkey

Для запуску скриптів в Chrome зручно використовувати розширення **Tampermonkey**.

Перейдіть до магазину Chrome і встановіть розширення:

{% embed url="<https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo>" %}

Після встановлення натисніть на значок розширень праворуч зверху та закріпіть **Tampermonkey**.

{% hint style="info" %}
Розширення потрібно лише для запуску скрипта у браузері. Саме собою воно не усуває витоку WebRTC.
{% endhint %}

## Як додати скрипт вручну

Для цієї інструкції використовуйте скрипт із Gist:

* [Скрипт для дебагу WebRTC](https://gist.github.com/Kr1tos/26585898c08e5222d5edc3d6fad546be)

{% stepper %}
{% step %}
**Відкрийте Gist зі скриптом**

Перейдіть за посиланням на Gist.

Відкрийте файл зі скриптом та повністю скопіюйте його вміст.
{% endstep %}

{% step %}
**Створіть новий скрипт у Tampermonkey**

Натисніть на іконку **Tampermonkey** та виберіть **Create a new script**.

Видаліть стандартний шаблон, який відкриється в редакторі.
{% endstep %}

{% step %}
**Вставте код скрипту**

Вставте скопійований код із Gist у редактор Tampermonkey.

Збережіть зміни поєднанням Ctrl+S\*\* або кнопкою File → Save\*\*.
{% endstep %}

{% step %}
**Перевірте, що скрипт увімкнено**

Переконайтеся, що новий скрипт відображається у списку Tampermonkey та знаходиться у статусі **Enabled**.
{% endstep %}
{% endstepper %}

## Як перевірити, що скрипт працює

1. Переконайтеся, що перемикач скрипта увімкнено.
2. Відновіть потрібну сторінку.
3. Відкрийте DevTools через **F12**.
4. Перейдіть на вкладку **Console**.
5. Зручно фільтрувати висновок за мітками `\[TM]`, `\[WebRTC]` та `\[NET]`.

### Які логи повинні з'явитися

Відразу після запуску скрипта зазвичай з'являються службові повідомлення:

```
[TM] Network hooks installed
[TM] WebRTC hook installed
```

Якщо сторінка створює RTCPeerConnection, у консолі з'являться логи по WebRTC:

```
[WebRTC] created
config: { iceServers: [...] }
ICE servers: [...]
```

Під час збору кандидатів будуть видні локальні та віддалені кандидати:

```
[WebRTC] local candidate raw: candidate:...
[WebRTC] local candidate parsed: { ip: "192.168.1.10", port: "52344", type: "host" }

[WebRTC] remote candidate raw: candidate:...
[WebRTC] remote candidate parsed: { ip: "185.123.45.67", port: "3478", type: "srflx" }
```

Якщо з'єднання дійшло до вибору маршруту, скрипт покаже підсумковий шлях:

```
[WebRTC] SELECTED PATH (connectionstatechange)
candidate-pair: { ... }
local-candidate: { ip: "10.0.0.2", port: 54012, protocol: "udp", candidateType: "host" }
remote-candidate: { ip: "185.123.45.67", port: 3478, protocol: "udp", candidateType: "srflx" }
[WebRTC] REAL REMOTE ENDPOINT: { ip: "185.123.45.67", port: 3478, protocol: "udp", candidateType: "srflx" }
```

Якщо сайт відправляє WebRTC-дані через `fetch`, `xhr`, `WebSocket` або `sendBeacon`, скрипт також це покаже:

```
[NET][fetch] https://site.example/api
[NET] SDP detected
v=0
o=- 46117317 2 IN IP4 127.0.0.1
...

[NET][ws] wss://site.example/socket
[NET] ICE detected
{"candidate":"candidate:...","sdpMid":"0","sdpMLineIndex":0}
```

### На що дивитися в першу чергу

* `\[TM] WebRTC hook installed` - скрипт успішно завантажився.
* `\[WebRTC] created` - сторінка реально створила WebRTC-з'єднання.
* `\[WebRTC] local candidate parsed` - видно локальний кандидат.
* `\[WebRTC] remote candidate parsed` - видно віддалений кандидат.
* `\[WebRTC] REAL REMOTE ENDPOINT` - найкорисніший лог. Він показує кінцеву віддалену точку, яку вибрав WebRTC.

### Якщо логів мало

Цей скрипт додає дві ручні команди до консолі:

```javascript
__dumpAllWebRTCSelectedPaths()
__dumpAllWebRTCStats()
```

Перша команда повторно виводить вибрані шляхи.

Друга показує повний знімок `candidate-pair`, `local-candidate`, `remote-candidate` та `transport`.

## Корисно перевірити після встановлення

Після запуску скрипту можна перевірити поведінку WebRTC через послуги зі статті [Через що можна перевірити витік WebRTC](/ua/nashi-produkti/about-udp/webrtc-leak-check-tools.md).

Якщо хочете зрозуміти сам механізм витоку, дивіться статтю [Як працює витік через WebRTC](/ua/nashi-produkti/about-udp/how-webrtc-leak-works.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.proxyshard.com/ua/nashi-produkti/about-udp/tampermonkey-webrtc-debug.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.