Monday 2 August 2021

Figure out how an element is loaded in webpage via Chrome DevTools?

In my website at https://www.datanumen.com, when loading it, there will be an arrow beside the "COMPANY" and "PARTNERS" menu items, as below:

enter image description here

However, after using WP Rocket and Cloudflare, the arrows disappear.

After many tests, we find out:

  1. If both WP Rocket and Cloudflare Cache are enabled, then after the web page is loaded. Then with user inseract, such as moving the mouse, the arrow will appear for a short time, then disappear.

  2. If only WP Rocket is enabled, and disable Cloudflare Cache(set to Development mode), after the web page is loaded, with the user interact, the arrow will appear and NEVER disappear.

  3. If I disable the "Delay JavaScript execution" option in WP Rocket and disable Cloudflare Cache, then the arrow will appear without any user interaction and will NEVER disappear.

So, I want to figure out:

  1. Which javascript is used to load the arrow? I need to add it to the exclusion list for "Delay JavaScript execution" option in WP Rocket so that it will appear without user interaction.
  2. Why Cloudflare cache will cause it disappear? I need to prevent it disappear when Cloudflare Cache is enabled.

Update

Two experts suggest that js/superfish.min.js may be the file that is used to load the arrows. So I add it to the exclusion list for "Delay JavaScript Execution", but this time Chrome will report an error "jQuery is not defined". I follow the instructions at https://docs.wp-rocket.me/article/1496-how-to-fix-the-jquery-is-not-defined-error and add /jquery-?[0-9.]*(.min|.slim|.slim.min)?.js to the exclusion list as well. This time the error disappear, but the arrows will still appear AFTER user interaction. So it seems they are not loaded by superfish.min.js?

Update 2

After contacting Cloudflare and making some tests, I disable "Auto Minify CSS" option in Cloudflare, then the problem that the arrow will disappear after Cloudflare cache is enabled will disappear.

Now I try to figure out how the arrow is loaded.

I do as follows:

  1. In Chrome DevTools, I inspect the arrow element and see the following result:

enter image description here

It seems that the arrow comes from a svg image which is described in CSS.

  1. I go to "Network" tab and try to find the arrow by input "arrow"/"angle"/"down", etc. in the filter, but cannot get the element, see below:

enter image description here

So, how to associate the element with the network resources in the "Network" tab so that I can find out how the element is loaded?



from Figure out how an element is loaded in webpage via Chrome DevTools?

No comments:

Post a Comment