Search code examples
javascripthtmlanalysisdynamically-generated

How to find a link that provides a text for an element generated by Javascript?

There is the page where a random word generated. That word is in span element which seems to be inserted by JavaScript. I wasn't able to find a link that provides the word from the server. So I'm questioning what algorithm should I follow (how a front-end professional would do it) to find the link.

I tried to look at the button, the text, to observe click methods etc, but wasn't able to find it.

Solution

  • Lets analyze this together. Before that we need to understand two things about how we see data from the server

    1. Data can be sent to browser on initial load, which can be processed by browser later using script
    2. API can get us data dynamically based on user interaction

    With this in mind, I inspect the page and

    step1: Check if this is dynamically loaded data: Go to Network tab. Here I clear all the network logs and try clicking the generate button. No APIs called

    This clearly says the generated word is not dynamically loaded. The word is downloaded somewhere (hopefully not encrypted) on page load.

    step2: Find the data by searching: Lets reload the page, and watch all the APIs that gets loaded on first time. And click on the left panel of network tab and press "ctrl+F" to search through all APIS

    should be like this

    step3: Lets take the generated word, in this case "Hypnotisch", and search it

    Conclusion: I was able to find a words.txt with all the list of words, that also containes "Hypnotisch"

    Result

    The specific API that is called to get the txt file is : https://capitalizemytitle.com/wp-content/tools/random-word/de/words.txt

    Open this link in new tab to get the list of words,

    This is how I believe a professional front-end will find the data. Cheers!