javascripthtmlgoogle-chromeview-source

Is there any difference between view-source and queryselector

Introduction

When trying to scrape some data on a third party website realized that if I used document.querySelector had different results from what view-source URI scheme.

Description

The query selector I am using is document.querySelector('script[data-target="react-app.embeddedData"]');. There is only one script tag matching that query.

When I execute that query the innerText of the script tag displays no results:

enter image description here

However when I use view-source the results array is not empty:

enter image description here

I already know that the element's content is dynamic. I executed the querySelector before and after checking the view source and viceversa. In all scenarios view source displays the results as expected but not using querySelector.

Software version

Solution

  • I tried with a normal script tag content in html file and ran it in chrome. It seems to work.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="application/json" data-target="react-app.embeddedData">
        {"payload" : {"header_redesign_enabled" : true, "results" : [{"a" : 1, "b" : 2}]}}
    </script>
    <script>
        console.log(document.querySelector('script[data-target="react-app.embeddedData"]').innerText);
    </script>
</body>
</html>