> For a complete documentation index, fetch https://docs.voximplant.ai/llms.txt

# Web: Collecting logs

This article will assist you in collecting logs from the Web SDK and Web-RTC.

## How to get browser console and HAR logs

When you reach out to support, we frequently request that you provide the browser console and HAR logs to assist us in investigating the issue.

### Collecting console logs

To gather the console logs:

1. Open the browser **developer's tools**. To do that, press `F12` for Chrome/Edge/Yandex browsers, or press `⌘+Alt+C` for Safari.
2. Right-click in the **Console** window and select **Save as**.

![Collecting console logs](https://files.buildwithfern.com/voximplant.docs.buildwithfern.com/bca19d257d8cd8bf1488544a525ae62fa552a50ea3f8a0eb4f3244363eba1c85/docs/assets/platform/sdks/guides-troubleshooting-weblogs-console.png)

3. Save the logs for future investigation.

### Collecting HAR logs

To gather the HAR logs:

1. Open the browser **developer's tools**. To do that, press `F12` for Chrome/Edge/Yandex browsers, or press `⌘+Alt+C` for Safari.
2. Select the **Network** tab (for all browsers).
3. Clear the existing logs by clicking the **⊘** sign for Chrome/Edge/Yandex browsers, or the **trash bin** sign for Safari.

![Clear existing har logs](https://files.buildwithfern.com/voximplant.docs.buildwithfern.com/42b1ec85274fd9f6f932d2cfac6fa12c957f6db0eb9a0681675b3ae265cb326a/docs/assets/platform/sdks/guides-troubleshooting-weblogs-harclear.png)

4. In Chrome/Edge/Yandex, enable the **Preserve log** and **Disable cache** checkboxes.

![Chromium-based browsers](https://files.buildwithfern.com/voximplant.docs.buildwithfern.com/338edfa5652a16df2e4ba4290abe19f7d96feabb40182f2b132d16a809566e14/docs/assets/platform/sdks/guides-troubleshooting-weblogs-harcollectchrome.png)

In Safari, select the following icon and select **Preserve logs**.

![Safari browser](https://files.buildwithfern.com/voximplant.docs.buildwithfern.com/1163aa580b05ee694e4453eaa9444198c0a5213044e82b39ff882e0b7a436238/docs/assets/platform/sdks/guides-troubleshooting-weblogs-harcollectsafari.png)

5. Reproduce the issue.
6. In Chrome/Edge/Yandex, right-click any log and select **Save as...**, then choose the **Export HAR (sanitized)** variant.

![Chromium](https://files.buildwithfern.com/voximplant.docs.buildwithfern.com/1239d0553f4367f0946b004fe95a93c7948391a8eceb65c466d169c3535cdea4/docs/assets/platform/sdks/guides-troubleshooting-weblogs-harsavechrome.png)

In Safari, select **Export**.

![Safari](https://files.buildwithfern.com/voximplant.docs.buildwithfern.com/01050185a2d46383781eb6d8c7607139f2349173db07591ec4c84ea333c5aa7c/docs/assets/platform/sdks/guides-troubleshooting-weblogs-harsavesafari.png)

7. Save the logs for future investigation.

## How to get mobile Safari logs

You may need to collect logs in the mobile Safari browser to debug your apps' behavior. To do this:

1. On the iPhone, open **Settings** → **Apps** → **Safari**, scroll down to **Advanced** and enable **Web inspector**.
2. On the Mac, open Safari and then press `⌘+,` for Settings. Go to the **Advanced** tab and enable **Show features for web developers**.
3. Connect your iPhone and your Mac with a cable.
4. Unlock your phone and choose **Trust this device** in the popup window.
5. On the iPhone, open the web page that you need to collect logs for.
6. On the Mac, open Safari and choose **Develop** from the menu bar. There you can see the list of all connected devices. Point the cursor at the necessary device to see the list of opened tabs. Choose the necessary tab.
7. The web inspector window appears. Choose the **Console** tab.
8. Click within the console window and press `⌘+A` to select all entries.
9. Right-click the selection and choose **Save selected** from the popup.

This is how you save the logs from mobile Safari. If you are using a Web SDK application, you can also enable debug logs in Web SDK, see the section below to learn how to do this.

## How to get Web SDK logs

First, you have to enable logging. To do so, specify the [showDebugInfo](https://voximplant.com/docs/references/websdk/voximplant/config#showdebuginfo) parameter while initiating an SDK instance:

```javascript title="showDebugInfo: true"
const voximplant = VoxImplant.getInstance();

voximplant.init({ showDebugInfo: true });

```

### Logs in Developer Console

To check the **Verbose** option in a Web SDK app while using it in a browser, open the developer console and select the Levels dropdown.

![Web console](https://files.buildwithfern.com/voximplant.docs.buildwithfern.com/94af6310a6336e939af48cbfeacb73a106b9846ca760c8eb050e6cbbd41b7f8d/docs/assets/platform/sdks/guides-troubleshooting-web-console.png)

To view messages logged from JavaScript:

* In Chrome, press F12 or `⌘+⌥+J` (Mac) or `Ctrl+Shift+J` (Windows, Linux, Chrome OS).
* In Firefox, select "Web Console" from the Web Developer submenu in the Firefox menu (or Tools menu if you display the menu bar or are on Mac) or press `Ctrl+Shift+K`, `Ctrl+Shift+C` or `Ctrl+Shift+I` (Windows) or press `⌘+⌥+K` (Mac).
* In Safari, enable the Develop menu in Advanced preferences: Safari > Preferences > Advanced > Show Develop menu, then choose Develop > Show Error Console.

Now, reproduce your issue, right-click on the console panel, and choose "Save as..." to save the output to a file.

Do not forget to send the result file to our [Support team](https://voximplant.com/help/support) if needed.

### Logs in Browser

To view logs in the browser’s main window, use either Chrome or Firefox. Open “chrome://webrtc-internals/“ or “about:webrtc” URL accordingly.

Next, open the Web application being debugged in a new tab and reproduce the problem.

Finally, go back to the logs tab and save them as **Web Page, Complete**.

### Log Collector

For those who want to organize logs in a special way (e.g., collect them in a database for further analysis), we've got a demo called **log-collector**, that is [available freely on GitHub](https://github.com/voximplant/websdk-demos/tree/master/logs-collector).

The demo allows you to collect logs about call state and send them to your backend server. What backend server to choose is up to you; the demo works fine with all of them since it sends POST requests and uses no black magic.

## How to get WebRTC logs

WebRTC logs are invaluable resources for developers and Voximplant technical support in troubleshooting audio and video connection issues. Currently, only Chrome and Firefox web browsers can generate these logs. This article offers a comprehensive guide on how to download them.

### Chrome web browser

1. The browser tracks and logs all WebRTC connections, so close all tabs and restart the browser.
2. Open a new tab and point it to the "chrome://webrtc-internals/" URL.
3. Open the Web application being debugged and reproduce the problem.
4. Go back to the "chrome://webrtc-internals/" tab, there will be at least two tabs:
5. **GetUserMedia Requests** and **[https://your/application/url](https://your/application/url)**. You will see logs along with stats graphs.
6. Choose the tab with the name of your application and save the page content as **Web Page**, **Complete**.

<Warning title="PAY ATTENTION">
  Stats graphs are not available in the saved file! We recommend either analyzing graphs while being on the **chrome://webrtc-internals/** tab, or making screenshots for further usage.
</Warning>

### Firefox web browser

1. Close all tabs, open a new one, and point it to the "about:webrtc" URL.
2. Open the Web application being debugged in the new tab and reproduce the problem.
3. Go back to the "about:webrtc" tab and save the page content as **Web Page**, **Complete**.

## How to debug remote clients

Learn how to collect logs about the state of calls and send them to your backend server using the Voximplant logs collector.

Here is how you can make the module serve your needs:

1. Clone [this repo](https://github.com/voximplant/websdk-demos/tree/master/logs-collector).
2. Go to the [Applications section](https://manage.voximplant.com/applications) of the Voximplant control panel and click on your application.
3. Switch to the Scenarios tab and create a new scenario. Paste the code from the `Scenarios.VoxEngine.js file` here, then save your scenario.
4. Go to the repo folder, open `logger.js`, and paste your backend server hostname in line 43. Save the file.
5. Open `index.html` in any browser.
6. Fill in the username and password fields, e.g.:
   username: `username@appname.account.voximplant.com`
   password: `12345`
7. Start an outgoing call or answer the incoming one.
8. When you need to send your logs, push the Report button.