To step though the script, click or to terminate the debugger session, close the yellow banner, or click Cancel. Such a breakpoint is marked with a blue stripe:Īs you step through your application, the corresponding information appears in the Debug tool window, and in the page of your web browser: Your program execution suspends when the first breakpoint is hit. When the debugging session is launched, your HTML page appears in the browser, and the Debug tool window opens. To start it, right-click the background of the file numbers.html, and choose Debug 'number.html' from the context menu - thus you will launch the debugger with the default temporary run/debug configuration: Examining the debugger information The upload result is shown below: Debugging Starting the debugger sessionĪll the preliminary steps are done, and it’s time to proceed to the debugging session.
For example, you can easily do that via the main menu: choose Tools | Deployment | Upload to MyRemoteServer, or use the context menu: The Remote Hosts tool window shows the newly created server: Deploying file to the server To do that, on the main menu, choose Tools | Deployment | Browse Remote Hosts. Let's make sure the server is up and running, and, which is even more important, visible to P圜harm. To do that, click button in the Deployment toolbar.Ĭlick OK to apply changes are close the Settings/Preferences dialog.įinally, copy your project C:\SampleProjects\py\MyJSProject to C:\xampp\htdocs. Here define the local path, the deployment path on the server (which is relative to the folder specified in the Connection tab), and the Web path on the server: Defining project default server In the Connection tab, specify the directory where your local files will be uploaded in our case, this directory is C:\xampp\htdocs - it means that the local files will be uploaded to this directory: Specify the server name MyRemoteServer and type local or mounted server. Open the Settings/Preferences dialog (press Ctrl+Alt+S or click on the main toolbar)Įxpand the node Build, Execution, Deployment, and click the page Deployment. This is most easy – just click the left gutter at the line you want the script to suspend: Configuring a server Creating a server Now let’s set breakpoints to our JavaScript file.
#Js script debugger code#
To do that, type the following code inside the tags: Next, embed a reference to a JavaScript file into this HTML file. P圜harm stubs out an HTML file with some initial contents. To do that, with the Project tool window having the focus, press Alt+Insert, choose HTML file on the popup menu, and enter the filename numbers. Specify the project location C:\SampleProjects\py\MyJSProjectĬhoose to open this new project in a separate window, not adding it to any of the currently open projects: Preparing sample codeįirst, let’s create a HTML page. On the main menu, choose File | New Project, and do the following: This tutorial is created with the following tools: You are using XAMPP as an application server.Ĭhrome can't have its console window open.
#Js script debugger professional#
You are working with P圜harm Professional Edition version 3.0 or later. This correspondence is called mapping, it is set in the debug configuration. This behaviour is enabled by specifying correspondence between files and folders on the server and their local copies. P圜harm opens the local copy of this file and indicates the line with the provided number. When a remote HTML file that loads some JavaScript is opened, the debugger tells P圜harm the name of the currently processed file and the number of the line to be processed. No matter, whether the web server itself is running on a physically remote host or on your machine, application files deployed on it are treated as remote.
In case of debugging on an external web server, the application files are deployed on it, and you have their copies on your computer. To illustrate the JavaScript debugging capabilities with P圜harm, we’ll create a very basic script that just shows some numbers in a browser page, and then debug it on a server. With IntelliJ IDEA-based products, such debugging becomes quite easy. The possibility to debug JavaScript is vital for web developers.
This edition is commercial, and it provides an outstanding set of features: see the comparison matrix for more details. This feature is only supported in the Professional edition.
0 kommentar(er)
