Category: IDE

Overview

• In this sample we will provide a Debug Environment for a WordPress Page heavily using Javascript
• The WordPress Page is using a Child Theme name twentyfifteen-child

Create an empty Webstorm Project

• The Project Location point to the WordPress Child Theme where Scripts, Images are stored

• Confirm that project directory is not Empty

• The Child Theme directory [ will all CSS, Images, JavaScript files ]  should be displayed

 

Add the JavaScript Debug Session

• Press Run -> Edit Config -> Select JavaScript Debug Session
• Provide a Session Name – here we use JS WEBStorm Debug
• Fill in the WordPress URL
• Select Chrome as the Default Browser
• Double check the Remote URL settings
• Press Run to Debug the JavaScript Code

• At any time you cat rerun this Session from the Top Level Menu by selecting  the session name : JS WEBStrom Debug

Invoke run method to load the WordPress HTML Dynamic Code and start F12 Debugger

• This should start the Chrome Browser
• Press F12 to start F12 Chrome Debugger
• Note the version number of our JS script files are set in functions.php

Setup Tomcat within XAMPP

Modify tomcat-users.xml
- [ D:\xampp\tomcat\conf\tomcat-users.xml ]

  <role rolename="manager-gui"/>
  <user username="root" password="tomcat" roles="manager-gui"/>

<!-- This is the user account for Host Manager link -->
  <role rolename="admin-gui"/>
  <user username="admin" password="tomcat" roles="admin-gui"/>

• The username/password for starting the Tomcat JEE server is root/tomcat

Verify the Tomcat status

• Connect to your Apache Server [ http://localhost:8080/ ] and press : Server Status

• -> The reported  Apache Tomcat version is 7.0.42

Add XAMPP Tomcat Server to our Netbeans IDE

• Goto Services -> Servers -> Right Click Add Server -> Select Apache Tomcat 
• Change the Name attribute to the current Tomcat version and press Next

• Fill out the Tomcat Location Details including username password

• Now the new Server Entry should be available in the Server panel
• With Right Click on the Apache Tomcat Entry you should be able to start and stop the Tomcat AppServer

Start a Maven Web Application Project and test  the TOMCAT Integration

• NetBeans -> Start Project -> Maven -> Web Application  -> Project Name : testFunctionsMVN

• Select the Tomcat Server and the JEE Version and Press Finish

• You may change index.jsp a little bit

• Finally press F6 to run the application

Reference

• Configure and test Tomcat on XAMPP Web Server

 

Indroduction

During my last development I hit the following problem :

• My Slider application does not start with the following error
• Something goes wrong here but without a Stack Trace debugging is annoying

Start Debugging Firebug [ by pressing F12 – Firebug should be already installed ]

• Preselect our source slider.js within Firebug

Set a breakpoint in function checkTrackIndex()

• Right click and set the breakpoint at the line where the error condition is handled
• After setting a breakpoint  press F8 to continue or you may need to reload your page

 

Restart the application and check out the status

• The application stops at line 1247 in function checkTrackIndex()
• Lets see what detail info is available by pressing the Stack tab

• Now we should have a better understanding  what is going on
• checkTrackInfoLoadStatus() calls loadroute() which calls checkTrackIndex()
• In checkTrackIndex() lidx is undefined – Why ?
• press on the loadRoute() function for further investigations

•  At line 2737 we can see that checkTrackIndex() is called without a variable
• This explains why the lidx variable in checkTrackIndex()  is undefined