# 1.4 Client-side Web Data Collection

## 1.4.1 Validate the data in the request

### Install the Adobe Experience Platform Debugger

The Experience Platform Debugger is an extension available for Chrome and Firefox browsers which helps you see the Adobe technology implemented in your web pages. Download the version for your preferred browser:

* [Firefox extension](https://addons.mozilla.org/en-US/firefox/addon/adobe-experience-platform-dbg/)
* [Chrome extension](https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob)

If you've never used the Debugger before - and this one is different from the previous Adobe Experience Cloud Debugger - you might want to watch this five minute overview video:

> [![VIDEO](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-e1f2ae7a076b287e93fcf201761f695389d524d9%2Faep-debugger-video-thumbnail.png?alt=media)](https://video.tv.adobe.com/v/32156?quality=12\&learn=on)

Given that you'll be loading the demo website in incognito mode, you need to make sure the Experience Platform Debugger is also available in incognito mode. To do so, go to **chrome://extensions** in your browser and open the Experience Platform Debugger extension.

Verify that these 2 settings are enabled:

* Developer Mode
* Allow in incognito

![EXP News Homepage](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-89114c6280b0431c96b48ecfa58c0389e9026442%2Fext1.png?alt=media)

### Open the demo website

Go to <https://builder.adobedemo.com/projects>. After logging in with your Adobe ID, you'll see this. Click your website project to open it.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-1f113c071919d66b9bb4e4b97d5284282e997b7a%2Fweb8.png?alt=media)

On the **Screens** page, click **Run**.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-e2d1893e99187ffdd2dbf9074d64f38bb321373e%2Fweb2.png?alt=media)

You'll then see your demo website open up. Select the URL and copy it to your clipboard.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-9cfc19bfac7a72c64f3e750663b79c2a4acc8723%2Fweb3.png?alt=media)

Open a new incognito browser window.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-48a8d19f45654fc4442dc4aad8b2a193b3f34d2f%2Fweb4.png?alt=media)

Paste the URL of your demo website, which you copied in the previous step. You'll then be asked to login using your Adobe ID.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-1bb88b0513b9fac2ed6224499ac33da7d3b67d43%2Fweb5.png?alt=media)

Select your account type and complete the login process.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-fbf755c12242e86c6787bb213da12d99795bd476%2Fweb6.png?alt=media)

You'll then see your website loaded in an incognito browser window. For every demonstration, you'll need to use a fresh, incognito browser window to load your demo website URL.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-def68e96912fd147fc6d7c9c8278935f0a00fc87%2Fweb7.png?alt=media)

### Use the Experience Platform Debugger to see the calls going to the Edge

Make sure you have the demo website open and click the Experience Platform Debugger extension icon.

![EXP News Homepage](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-2f1895cbe36d495035bd8908b023fc887bccd74a%2Fext2.png?alt=media)

The Debugger will open and show the details of the implementation created in your Adobe Experience Platform Data Collection Property. Remember that you're debugging the Extension and rules that you have just been editing.

Click the **Sign In** button on the top right to authenticate. If you already have a browser tab open with the Adobe Experience Platform Data Collection interface, the authentication step will be automatic and you won't have to enter your username and password again.

![AEP Debugger](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-c34d9bff84b2404c640a0cd92e181dfe6304ab0b%2Fvalidate2.png?alt=media)

Hit the reload button on your demo website to connect the debugger to that specific tab.

![AEP Debugger](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-230ead09afabfa3ca686bb7d357d2b1d5b74646b%2Fvalidate2a.png?alt=media)

Confirm the Debugger is **Connected to Home** as pictured above and then click the **lock** icon to lock the Debugger to the demo website. If you don't do this, the Debugger will keep switching to expose the implementation details of whatever browser tab is in focus, which can be confusing.

![AEP Debugger](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-6becf8f5c744b243343e2f489d448e14604f3e90%2Fvalidate3.png?alt=media)

Next, go to any page on the demo website like for instance, the **Men** category page.

![AEP Debugger AEP Web SDK extension](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-7e114450504844d86bcbeef463dd869b1e182218%2Fvalidate4.png?alt=media)

Now click **Experience Platform Web SDK** in the left navigation, to see the **Network Requests**.

Each request contains an **events** row.

![AEP Debugger AEP Web SDK extension](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-9bd2b894b234c066c7bae42b5f9b805b79e76de7%2Fvalidate5.png?alt=media)

Click to open the **events** row. Note how you can see the **web.webpagedetails.pageViews** event, as well as other, out-of-the-box variables adhering to the **Web SDK ExperienceEvent XDM** format.

![Events value](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-5273775aca09d29f9335b4932bd9c8948e683d2d%2Fvalidate8.png?alt=media)

These types of request details are also visible in the Network tab. Filter for requests with **interact** to locate the requests sent by Web SDK. You can find all the details of the XDM payload in the Request Payload Headers:

![Network tab](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-827b36cef6bb18b5e9198fd49fc118c106ab17f8%2Fvalidate9.png?alt=media)