How to find the javascript code responsible changing data in an HTML element (based on JSON)?

Question

I am scraping a website where there are clothes with javascript rendered size tables. Sometimes the sizes are in number format like 38, 40, 50 and sometimes in character format like S, M, L etc.

Examples for these 2 types:

https://www2.hm.com/hu_hu/productpage.0872568004.html -> Available sizes from the khaki colored one: XS, L

https://www2.hm.com/hu_hu/productpage.0881349001.html -> Available sizes from the beige colored one: 40, 42, 44

The size availability data for the first one (khaki color) comes from this json:

https://www2.hm.com/hmwebservices/service/product/hu/availability/0872568.json

In this list the first seven characters (0872568) are the base product code, the second 3 characters are the color code, and the last 3 characters are the sizes. This means we have sizes like:

002 = XS

005 = L

The size availability for the second coat comes from this json:

https://www2.hm.com/hmwebservices/service/product/hu/availability/0881349.json

based on the previously mentioned logic for this we have sizes like:

005 = 40

006 = 42

007 = 44

As you can see the same looking availability data once mean size L, then mean size 40. I want to find the code responsible for deciding which format the user will see on the frontend based on this json data. I went through the source code but I can not find the information I need.

What I've done is to use the recording in Chrome's Developers tool when clicking on the sizes field and looking for the product code, the json url but there is nothing there. Is there any other way I can check what function is called when I click on the size field? I guess the way it handles the json file must be hidden there.

Any guidance would be greatly appreciated.

Answer 1

等待大神解答