---
title: Tips When Using Browser Developer Tools
description: >-
  Debug tips for using browser developer tools with Datadog Browser SDK to
  troubleshoot RUM and logging instrumentation issues.
breadcrumbs: >-
  Docs > RUM & Session Replay > Real User Monitoring & Session Replay Guides >
  Tips When Using Browser Developer Tools
---

# Tips When Using Browser Developer Tools

## Overviews{% #overviews %}

This guide provides some tips when using browser developer tools (DevTools) which are included in modern browsers to debug an application instrumented with a Datadog browser SDK.

## Ensure file and line numbers match in the DevTools console{% #ensure-file-and-line-numbers-match-in-the-devtools-console %}

The browser SDK instruments the console functions (`console.error`, but also `.log`, `.info` and `.warn`) to collect data about the behavior of the application. This may lead to the DevTool console displaying the incorrect line number and file, as shown below:

{% image
   source="https://datadog-docs.imgix.net/images/real_user_monitoring/guide/devtools-tips/issue_console.ac1c770eb4cbc3ff5998a310f9353353.png?auto=format"
   alt="DevTools console showing issue about wrong file and line numbers for a console.error statement." /%}



In the picture above, the `console.error` function is instrumented. Notice that instead of displaying the actual file and line number on which this statement was called, `VM505:1`, the console shows `datadog-rum.js:1`.

### Adding scripts to your browser ignore list to display the correct file and line number{% #adding-scripts-to-your-browser-ignore-list-to-display-the-correct-file-and-line-number %}

Most browsers allow developers to select scripts and add them to an ignore list. To display the correct file and line number, you can add the following scripts to your browser's ignore list: `datadog-rum*.js` and `datadog-logs*.js`.

Below is an example of where to find this feature in Google Chrome.

{% image
   source="https://datadog-docs.imgix.net/images/real_user_monitoring/guide/devtools-tips/script_ignore_list.0e2dd9f8dac74d404d2c3907107bc102.png?auto=format"
   alt="How to add script to the ignore list in Google Chrome." /%}



In the console tab, expand the output from the console statement. Right-click on each script you wish to ignore, and select the option **add script to ignore list**.**Note**: The ignore list can be managed in **Developer Tools > Settings > Ignore List**

This method works well when using the [CDN (sync/async) installation methods](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/#choose-the-right-installation-method). If you are using the NPM package method, make sure that you have `sourcemaps` enabled. Otherwise, the SDK code may be bundled with your application code, preventing DevTools from ignoring the SDK.

Another advantage of using the ignore list can be seen in the network panel:

{% image
   source="https://datadog-docs.imgix.net/images/real_user_monitoring/guide/devtools-tips/network_initiator.8023b3e20454bd34a5cdaf6e7b5936c4.png?auto=format"
   alt="Network initiator properly showing after adding scripts to ignore list." /%}



Instead of displaying the browser SDK as the initiator of the request, the correct file and line number are shown for the application.

## Remove noise in the network tab{% #remove-noise-in-the-network-tab %}

The browser SDKs send several network requests to record an application's behavior. This can generate a significant number of lines in the network tab, which makes it hard to identify the requests initiated by your application. Most browsers allow you to filter the requests coming from the browser SDKs.

Below an example of this feature in Google Chrome:

{% image
   source="https://datadog-docs.imgix.net/images/real_user_monitoring/guide/devtools-tips/network_ignore_intake.44de3805f670e222ffe99c90157973e3.png?auto=format"
   alt="Network panel filtering browser SDKs requests." /%}



In the network tab, add a filter of the form `-url:intake-datadoghq.com` (update the pattern to match the url of your [datacenter's intake](https://docs.datadoghq.com/getting_started/site), or the one of your [proxy](https://docs.datadoghq.com/real_user_monitoring/guide/proxy-rum-data)).

## Further Reading{% #further-reading %}

- [RUM Browser Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser)
- [Browser Log Collection](https://docs.datadoghq.com/logs/log_collection/javascript)