Debug popup from Javascript?

Question

JavaScript

I want to understand how the pop-up window with the video player, which is created by javascript, works. I must say right away that I am not strong in javascript, and this interferes.

In order not to beat around the bush - we are talking about playing VKontakte video. The sequence is as follows:

1. Open the video tab, do a search, get a list of video clips.

2. Click play video clip. At this moment,
an XMLHttpRequest POST request is sent to the /al_video.php address.
In this request, the ID of the video clip is passed.

Post request:
act:show
al:1
autoplay:1
list:
module:video
video:2788461_162815788

3. In response, a JSON response comes with mixed javascript and html code.
In this answer, the code for launching the player and various parameters for making a direct link.

4. This response is executed by the eval function in the common.js library on VK. and as a result, the HTML code that creates a window with a peler is launched.

My knowledge ends at the beginning of step 3, but I want to see the final html code that launches the window.

Unfortunately, neither Chrome nor Fox can see this code, but the browser calculates and executes it!

Can you tell me how to see the popup code? Is there any special js debugger?

I would like to understand and do something similar for myself. If all else fails, he is ready to seek professional advice, but as the hero of the famous film answered: “It’s better, of course, to suffer.”

Answer 1

I don’t understand why you can’t see the final HTML code, it seems that you can see the final DOM structure in the developer tools?

Answer 2

If you are aiming to learn and do this, VKontakte is not suitable for you. VKontakte is a site where a lot of things are mixed up, in the code there, most likely, the devil will break his leg. It's better to take some open source plugin (something like this or this ) and see how it's done there (or use a plugin in general).
js debugger is available in every browser, look for scripts or sources in developer tools.

Answer 3

After the line in the javascript code where you get json, enter the line debugger;
It works like a breakpoint and in chrome (developer tools) and firefox (in firebug) you can see what kind of json you got. The same approach in other places in the js code will help you figure out what is happening there.

Answer 4

Figured it out myself. The problem is that most of the pop-up window is occupied by Flash, so the usual - the right mouse button -> Developer Tools does not work, because. Flash closes with its context. If you point to the edge of the window, then with the right button you get to the DOM element with the player code and you can view it.
You can also go through the review of the entire DOM element, but the right buttons are easier. I have always dealt with server script responses that are visible in the network section. Javascript changes the document on the go.
Thanks to those who responded!

Answer 5

Who can help in creating a device that combines an inclinometer, a compass, a gprs beacon, an altimeter.
The inclinometer must work in a horizontal plane along two perpendicular axes, all data must be linked by a quarter of a second (more often not necessary) and displayed in a table - a database - for further processing on the computer