Debugging a JavaScript WordPress Environment with WebStorm


  • 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

Integration of an already running Apache Tomcat Server [ XAMPP distro ] with NetBeans

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




A first Debugging Session with Firebug


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 


Debugging XA Calls in a JPA session running BMT with Netbeans 8.0.2


BMT calls          JDBC Driver calls 
ut.begin()         oracle.jdbc.xa.client.OracleXAResource   
ut.commit()        oracle.jdbc.xa.client.OracleXAResource.end
                   oracle.jdbc.xa.client.OracleXAResource.commit  <--- Here we want to set a Breakpoint 

Prepare the Breakpoint

Class Name           : oracle.jdbc.xa.client.OracleXAResource
Method Name          : commit
Stop on              : Method Entry 
Actions - Suspend    : All Threads
  •  Select suspend all Threads if you want to avoid that any  Wildly Thread is running a rollback
  •  If you want Transaction Recovery takes place by other Wildfly Threads you may select Suspend Breakpoint Thread
  •  Don’t use  oracle.jdbc.xa.OracleXAResource for debugging as this package only defines abstract methods

Start the Netbeans project in DEBUG MODE

Netbeans Debug -> Debug Main Project 
--> Above action will redeploy our project in DEBUG mode

NetBeans: Deploying on WildFly Application Server
    profile mode: false
    debug mode: true
    force redeploy: true
  Undeploying ...
  Initial deploying WFJPA2EL to /usr/local/wildfly-8.2.0.Final/standalone/deployments/WFJPA2EL-1.0.war
  Completed initial distribution of WFJPA2EL
  Deploying /usr/local/wildfly-8.2.0.Final/standalone/deployments/WFJPA2EL-1.0.war
  Application Deployed

Debugger console reports successfully setting the breakpoint in [oracle.jdbc.xa.client.OracleXAResource].commit
  Attaching to localhost:8787
  MethodBreakpoint [oracle.jdbc.xa.client.OracleXAResource].commit successfully submitted.
  User program running

After the program hits a breakpoint runs Debugger Console should report 
Method breakpoint hit in oracle.jdbc.xa.client.OracleXAResource.commit at line 553 by thread default task-3.
Thread default task-3 stopped at

How to Copy the Stack Trace after our Worker Thread stops at a Breakpoint

Select Debugging TAB
  default task-7  [ this Thread was stopped by our Debugger ]
     Hidden Soruce Calls   <-- Right Click here and select  COPY STACK
Stack Sample 
"default task-7"