PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, December 2, 2022

[FIXED] How can I get Chrome's script debugger to breakpoint on <iframe> loading?

 December 02, 2022     iframe, javascript     No comments   

Issue

I am trying to understand how iframe calls the URL specified in its src attribute. When we look at the network tab in Chrome developer tools, the Type column shows as "document".

Consider the below HTML snippet

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3549.400553850174!2d78.03995351513306!3d27.175144783015277!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39747121d702ff6d%3A0xdd2ae4803f767dde!2sTaj%20Mahal!5e0!3m2!1sen!2sin!4v1660205543740!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</body>
</html>
enter image description here

In case of fetch API, the type is seen as fetch. enter image description here Similarly, when we make xmlHTTPRequest() the type is xhr.

So, I have the below questions:

  1. What does type "document" in case of iframe indicate?
  2. Which native JS method does iframe use to load the URL in its src attribute?
  3. Since, I cannot use xhr breakpoint, how to add a breakpoint in Chrome Developer tools before the URL in iframe's src attribute is about to be invoke(not sure if that's the correct terminology here)?

Solution

What does type "document" in case of iframe indicate?

That the browser made the request for a HTML document to show in a user-facing browser window, just like Netscape 1.0 did back in the day.

Which native JS method does iframe use to load the URL in its src attribute?

  • No JavaScript is involved. Nor "Native JS" (whatever that means...).
  • But I assume whatever code is involved is somewhere in here: https://github.com/chromium/chromium/tree/main/net/http

Since, I cannot use xhr breakpoint, how to add a breakpoint in Chrome Developer tools before the URL in iframe's src attribute is about to be invoke(not sure if that's the correct terminology here)?

There are two options, and you can use both together:

  1. The Navigation and Resource Timings API in the DOM supported by most browsers.
    • Basically you have a <script> at the very top of your <head> that listens for navigationStart events that bubble-up the DOM, and you can put a breakpoint in there if you like.
    • https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings
  2. Chrome Developer Tools' built-in "Event Listener Breakpoints".
    • Go to the Sources tab and open the right-hand list to select the top-level "Load" and "Window" events. Once checked, the debugger will break when any iframe in the current document raises any of those events (especially load and navigate).

    • Like so: enter image description here



Answered By - Dai
Answer Checked By - Mary Flores (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing