Debugging a third-party site with WebStorm and PHPStorm
- The following bundled plugins are enabled:
- No specific JS libraries are required. You are welcome to use any JS libraries you need.
Preparing contents for remote debugging
We do not have access to the sources of the site, so we cannot download it through a remote host configuration. However, we can capture the code underlying each page through the View page source functionality and save it in a local file with the name of the page. Next, we can easily reproduce the tree of application sources locally. Finally, we will map the local copies to their remote originals.
The application sources are accessible through the following URL addresses:
http://www.netzgesta.de/instant/index.php- the starting page.
Creating a project
Let's start from the very beginning and create a project to arrange the application sources in. Launch WebStorm and choose Create New Project on the Welcome screen (Image 1):
In the Create New Project dialog box that opens (Image 2), give a name to the new project (1) and specify the project folder (2). Type the path to the project location manually or click the Browse button (3) and choose the relevant folder in the dialog box, that opens. In our example, the project name is
debug_netzgesta and it is located in the
C:\MY_PROJECTS\JAVA_SCRIPT_PROJECTS parent folder.
When you click OK, WebStorm opens the new project. As you can see (Image 3), it is just an empty folder:
Populating the project
Now let's fill our new project with contents. As you can see from the application structure, the
http://www.netzgesta.de/ is the URL address of the document root, under which there are two folders:
If we declare the local project root folder as the counterpart of the server document root, then it becomes clear that we need a project with two subfolders
Creating the folder structure
With the Project tool window having the focus (Image 4), press Alt+Insert, choose Directory (1) on the pop-up menu, and type the folder name (2)
Accordingly, with the project root folder in focus, press press Alt+Insert again, choose Directory on the pop-up menu, and type the second folder name
cvi. Then create a
scripts subfolder under
cvi. Upon pressing OK, the project shows (Image 5) the root folder
debug_netzgesta (1) with subfolders
cvi (3), and
Adding files to the folders
Now let's populate our folders with files and copy the application source in to them. Let's start with the
instant folder and create a file
instant.js in it (Image 6). Select the
instant (1) folder in the Project tool window,
Next, create the
cvi_text_lib.js files in the
instant folder. When creating the
index.php file, specify the full name
index.php in the New File dialog box.
So doing, populate the
cvi/scripts folder with the following files:
Finally, the project tree should look as follows (Image 7):
Transferring the sources
Now that we have reproduced the site structure locally in our project, let's fill the local files with the corresponding contents from the site. This procedure is identical for all files. Here we will consider one example, and you will be able to repeat it for all the files in the project.
1. Open the
http://www.netzgesta.de/instant/index.php page in the browser.
2. On the context menu, choose View Page Source (Image 8):
3. In the new browser window that opens (Image 9), select the entire the source code underlying the Web page by pressing Ctrl+A.
4. Copy the selection (Image 10) to the clipboard by pressing Ctrl+C.
5. Open the file
index.php in the editor by double-clicking it in the Project tree. Paste the contents of the clipboard into the file by pressing Ctrl+V.
So doing, page by page, pull the source code that underlie the pages to the local files with the names of the corresponding pages.
Creating run/debug configuration for remote debugging
Unlike local debugging, for which the default run/debug configuration is provided, we’ll have to create one for remote debugging ourselves. This is how it’s done:
Press Alt+Shift+F9, and then press 0 to choose Edit configuration on the pop-up menu (Image 11):
In the right-hand pane of the dialog box (Image 13), specify the main debug configuration settings:
- In the Name (1) text box, type
- In the URL to open (2) text box, specify the URL address for accessing the starting page of the application. Type
- From the Browser (3) drop-down list, choose Firefox to have the starting page opened in this browser.
Synchronizing files on server with local copies
We will map the entire local project folder to the URL address of its counterpart on the server (Image 14'). In the Remote URLs of local files (1) area, click the Remote URL (3) field next to the project root node C:\MY_PROJECTS\JAVA_SCRIPT_PROJECTS\debug_netzgesta (2) and type the following URL address (4):
The debug configuration is ready, click OK to save it.
Starting the debugging session
Now that all the preliminary steps are done, it’s time to proceed with the debugging session itself (Image 16). From the Edit Configurations (1) drop-down list, select the newly created debug_netzgesta (2) configuration and click the (3) button on the toolbar.
After launching the debugger, Firefox will inform you that the extension has been installed.
Note: adding the JetBrains extension results in adding the Debug in WebStorm command to the context menu of the pages in Firefox.
WebStorm starts the debugging session.
Examining the debugging information
When the debugging session is launched, the starting
index.php page (Image 18) opens in the browser.
When the PHP interpreter calls the
instant.js script, the focus in the WebStorm editor switches to the file
instant.js and the Debug tool window opens (Image 19). The first breakpoint is hit immediately, because we have set it at the script start, so the program execution suspends at once. The cursor in
instant.js is positioned at the beginning of the line with the breakpoint hit (Image 19). The line is marked with a blue stripe in the background:
Let’s now step through the script. Actually, you can use the stepping buttons on the toolbar of the Debug tool window, but since you are working in a keyboard-centric IDE, use the handy shortcuts, depending on your debugging algorithm. For example, you can press F7 to step line by line. However, let's press F9 to resume the program and have it work automatically till the next breakpoint is hit (Image 20). The second breakpoint (1) is set next to the first line of the loop that draws images and canvas. The loop runs until all the images and canvas from the
theimages array are rendered. If you hover the mouse over
theimages (2), the contents of the array are shown in the pop-up window. The current loop execution number is stored in the variable
i. As you can see, now
Let's switch to the browser (Image 21 ) and see what images have been rendered by now. As you can see, the page shows images without canvas.
If you now press F9, the program will resume and the loop will run once again. The Debug tool window (Image 22) shows
As you step through your application, the corresponding information appears in the Debug tool window, and the browser displays the script output step by step (Image 24):
Finally, when the program execution is completed (Image 25), the debugging session data is cleared (1) and the
numbers.html page displays the entire script output (2):
That’s it with debugging a script hosted on a remote server.