CODEWITHSUNDEEP
javascripthtmlanalysisdynamically-generated
Ya Y
Ya Y

Reputation: 27

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.

Upvotes: 0

Views: 77

Answers (4)

Amr
Amr

Reputation: 653

If you mean a manual way. It really depends on the backend architecture

  1. if it is a server-side language ( PHP for example ) and the word is already rendered by the server you can't know because it comes with the get request.
  2. If you are sure that they use APIs ( headless projects ) to generate the word. You can find the request they use using the browser inspector -> Network tab -> filter with XHR requests -> then you will find the generated word in the Response of one of those Requests. I tried to do this with your website but the incoming requests are massive like really massive so I can't find it but this is not the usual case with other websites.

Upvotes: 0

Rajesh Kanna
Rajesh Kanna

Reputation: 143

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!

Upvotes: 0

Tohirul Islam
Tohirul Islam

Reputation: 404

the are actually a few ways to create this generator. One of them is to manually create an array of words than using Math.random() to generate an index number to iterate over the array and show the word on button click. The array can also be stored on the server. The words can also be from an API random word generator. search on google you will find bunch of sites that provide random word generator APIs.

Hope I answered your question.

Upvotes: 0

Priya
Priya

Reputation: 76

As a FE developer, we follow below step to check for the service which is responsible for the changes on page.

  1. do F12 on your browser tab where the application is running.
  2. go to network tab
  3. click on the generate random word.
  4. you will see the service.

for example, this service is getting called for your mentioned website. https://translate.googleapis.com/translate_a/t?anno=3&client=te_lib&format=html&v=1.0&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw&logld=vTE_20221115&sl=de&tl=en&tc=1&dom=1&sr=1&tk=352290.160565&mode=1

Upvotes: 0

Related Questions