How to debug Javascript to check a specific behavior

  • Hello,

    I need to debug Javascript to check which function is called on a specific behavior.

    To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.

    For example, if you take a look on the page given with this post and click on the artist “Klimt”, the main page activate a javascript function, display an “Loading” image on the entire page and reload the iframe content.

    I tried with the Chrome Devtools but can’t figure out which function is called display the image “Loading…” and reload the iframe.

    It’s reloaded maybe because the url is dynamically updated with javascript. The anchor #collection/hopper/ will become #collection/klimt/.

    This strange behavior appeared after an wordpress upgrade.

    Thank you for your help,
    Vincent.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Anonymous User 14808221

    (@anonymized-14808221)

    There seem to be several JS errors (visible in the console) that you want to resolve before anything else. I refer to the “red” errors visible in the console.

    Something related to (probably) Facebook Pixel Script is on top of all other errors, referring to a script loaded somewhere in the middle of the HTML page (which is likely not how it should be done, this scripts usually go in the header or footer section).

    It uses require(), which is not part of JS, and thus needs some external scripts to work properly. Those scripts are likely not loaded, and thus throw the error. That can then send the entire subsequent page/code into failure.

    I would suggest figuring out why the FB Code is in the middle of the page, if it requires some additional enqueued scripts, if perhaps some plugin is adding it (you can find out by disabling plugins bulk wise and re-enabling until you found the culprit), or if a theme adds it. Then enter in contact with said theme or plugin, in case you can’t find the exact cause for failure.

    I suggest doing all this on testing sites, so you do not need to do this on the production website.

    Thread Starter londonuk371

    (@londonuk371)

    Thank you @bedas for your reply.

    Yes there are Javascripts errors which are on all the pages.

    What I would like to know is which plugin activate the “Chargement en cours” (Loadin in progress) notification between each pages of the iframe.

    I would like to desactivate it.

    Thread Starter londonuk371

    (@londonuk371)

    To show you another example: Here is the same gallery inserted into another WordPress website:
    Gallery
    And:
    1/ The pages are not loaded 2 times.
    2/ We can access to the basket (Mon panier) which is not possible on the first website shown because it reloads the page 2 times.

    • This reply was modified 3 years, 3 months ago by londonuk371.
    Anonymous User 14808221

    (@anonymized-14808221)

    Hi @londonuk371

    What I would like to know is which plugin activate the “Chargement en cours” (Loadin in progress) notification between each pages of the iframe.

    I would like to desactivate it.

    The easiest and fastest to find out is disabling plugins, and re-enabling them one by one. Check each time the front end and as soon the feature comes back you know which plugin enables that feature.

    I suggest doing this in a staging environment.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to debug Javascript to check a specific behavior’ is closed to new replies.