Debugging an iframe application directly in vk.com using php + xdebug

In this article, you will learn how to debug an iframe application directly inside the vk.com environment, that is, as a white person. Application development directly in the environment does not require the creation of sandboxes (emulation of VKontakte), it is very convenient to work directly with the VKontakte API, seeing all the variables that are transferred back and forth directly in the trace. I do not pretend to be original, I just checked that there is no such article in the Internet and that’s all, and the idea is obvious and simple. I came up with an idea for a cup of tea, because if I had time to finish it, I would google it.

Anger

I get a storm of indignation when I cannot develop software normally. In PHP, the most hated thing for me is var_dump, which print_r I use in an emergency, that is, at the moment when it is faster to debug it than setting up a full IDE stack for work, that is, less than half an hour, if from scratch - starting with setting up Apache . In all other cases, if there is no normal stack, this freezes me and I want to fix this situation in every way.

Problem

There is an iframe app inside vk.com. It constantly interacts with the user, the VKontakte API and other things, like voices, using different secret keys and without them. Naturally, all this is damn difficult to debug. From which it follows that applications from a certain level will cost extremely many hours of programmer. In such situations, partially correct the situation of the sandbox. If we take into consideration Iframe, then if you slightly expand your brain, the sandbox in any of its variations loses its relevance due to complexity and not universality, because the application can be stupidly downloaded to the development server, and there is a programmer with IDE and xdebug.

Development stack

XAMPP 1.7.4, PHP 5.3, NetBeans 7.01, vk.com (iframe), xdebug, DNS

Stack setup

I apologize for the rather scarce textual information. I prepared a video to make it clear.

- Configuring apache
Go to virtual-host

	DocumentRoot D:\work\other\htdocs\ru-wartur-app\www\public-html
	ServerName app.wartur.ru
	ErrorLog D:\work\other\htdocs\ru-wartur-app\log\apache2\error.log
	CustomLog D:\work\other\htdocs\ru-wartur-app\log\apache2\access.log common
	
		Options Indexes FollowSymLinks Includes ExecCGI
		AllowOverride All
		Order allow,deny
		Allow from all
	

Restarts our local development server, in my case XAMPP (I advise everyone).
We are not embarrassed about the 84th port. I think if there are a lot of developers in the company, then they can get there until the 90th, but in my house they’re really full.

- Settings dns
Create an entry A. In my case app.wartur.ru - 188.134.79.140, that is, mapping to the router.

- vkontakte settings
Go to Vkontakte-> settings-> IFrame address: app.wartur.ru : 84 /

- Creating a NetBeans project
We will assume that you have configured xdebug, we will not dwell on this.
Project Settings -> Run Configuration -> Project URL: in my case app.wartur.ru : 84 /

- We start and enjoy life
- We set a breakpoint and start debugging inside the IDE, now we have a session in the browser and the IDE has entered debug mode
- Run the application, in my case vk.com/app2820627 , we see a profit from clicking on each new link, launching the API or what do you want.

Video

I apologize for the quality, as always there is no time to redo it, do not judge strictly


I hope it helped. Good luck everyone. I love it when an article is filed in one hour, and not stretched for 3-4 hours.

UPD: Everything that is written above is rather complicated. Everything is much simpler if you do not need to give access from outside to your working machine
at the same time. We remove the DNS from the configuration scheme and everything connected with it.
- We put some localhost in the application settings, in my case app.warturru (I myself did not like this port 84, so it was cheered !!!)
Thank you to Habr for tips! Good luck to all!