title: Puppeteer: Getting the correct frame element in page request
body: <p>I've got a scenario where I'm trying to map the network requests to the element who triggered the request.</p>
  
  <pre><code>const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.setRequestInterception(true);
  
  page.on("request", async request =&gt; {
    request.continue();
    const frame = request.frame();
    const frameContent = await frame.content();
    console.log("URL:", url, "\n\nFRAME:\n", frameContent);
  })
  
  await page.goto('https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html')
  </code></pre>
  
  <p><strong>Output</strong></p>
  
  <pre><code>URL: https://docs.aws.amazon.com/awsjavascriptsdk/latest/css/style.css  
  
  FRAME content:  
  &lt;html&gt;&lt;head&gt; 
      &lt;meta charset="utf-8"&gt;
  &lt;title&gt;
    Class: AWS.S3
  
      — AWS SDK for JavaScript
  
  &lt;/title&gt;
  
    &lt;link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" charset="utf-8"&gt;
  
    &lt;link rel="stylesheet" href="../css/common.css" type="text/css" media="screen" charset="utf-8"&gt;
  
    &lt;link rel="stylesheet" href="../css/highlight.github.css" type="text/css" media="screen" charset="utf-8"&gt;
  
  &lt;script type="text/javascript" charset="utf-8"&gt;
    pathId = "AWS.S3";
    relpath = '../';
  &lt;/script&gt;&lt;/head&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Here the <code>frame.content()</code> is giving a larger block of the originator.
  Is there anyway I can just get the element from where the request originated?
  In this case :</p>
  
  <pre><code> &lt;link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" charset="utf-8"&gt; 
  </code></pre>