Debug Site with Netbeans

1. Install NetBeans PHP version.

Debug NetBeans download [sm]

It may be necessary to install Java Development Kit to install NetBeans.

Debug NetBeans JDK download

2. If you have NetBeans installed check if PHP plugin is included.

  1. Go to Tools -> Plugins
  2. Open Installed tab.

    Debug NetBeans plugins

  3. Check the PHP name of PHP category is in the list.
  4. If not go Available Plugins tab
  5. Sort by category and find PHP category and PHP in the “Name” column.
  6. Set checkbox and press Install.

3. Press Ctrl+Shift+N to add new project.

4. Select PHP in Categories.

5. Select PHP Application with Existing Sources in Projects.

Debug NetBeans new project

6. Press Next and browse for the WordPress site directory or paste its path in the Sources Folder field.

Debug NetBeans project source

7. Press Finish or press Next for additional options.

8. After the project is loaded and scanned go to the Projects window (Ctrl+1 if not visible).

Debug NetBeans loaded crop

9. Go to Source Files branch and find a .php file to debug then doubleclick it.

10. Set breakpoints clicking on the line numbers gutter.

Debug NetBeans breakpoint [sm]

11. Press Ctrl+F5 or Debug -> Debug Project to start debugging.

Debug NetBeans debug started [sm]

12. Add watches to calculate variables and functions output during the debug (Ctrl+Shift+F7).

Debug NetBeans add watch

Debug NetBeans watch added [sm]

13. To prevent stopping on the first line when debug is starting go to Tools -> Options -> PHP tab and uncheck Stop at First Line.

Debug NetBeans PHP options

== onProblems ==

Some additional actions may be required if debugging doesn’t work after the above steps.

1. Check the php/ext directory of the server. There should be a file php_xdebug.dll

2. If it doesn’t exist download one from XDebug site.

Debug NetBeans Xdebug download

To determine which one you need follow these steps:

  1. Get PHP information from the server.
    1. You need to know the following data:

      PHP version
      Thread Safety
      Compiler
      Architecture
      
    2. To manually get this info create a info.php file and paste this code to it 

      <?php phpinfo() ?>
    3. Then copy this file to the server htdocs or www folder and run it from browser. For localhost the URL will be

      localhost/info.php

      Debug NetBeans PHP info

    4. Find all parameters in the beginning of the page
  2. Find the right .dll on the XDebug download page using the obtained information:

    VCx value - get from Compiler parameter (MS VCx)
    XX bit value - from the Architecture (x86 - 32bit, x64 - 64bit)
    TS value - from Thread Safety (enabled - TS, disabled - empty)
  3. Download the .dll file and put it in the php/ext folder on the server.
  4. Use the Xdebug wizard if have some problems. Copy all the info.php page content and paste it in the textarea then press the button under it. You’ll get all the instructions.

    Debug NetBeans Xdebug wizard

3. Edit php.ini file in the php directory. Add this to the end. The zend_extension part contains the path to the downloaded Xdebug .dll file.

zend_extension = "C:/xampp/php/ext/php_xdebug-2.2.7-5.4-vc9.dll"
xdebug.remote_enable=on
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.profiler_enable = 1
xdebug.dump.*
xdebug.trace_output_dir = "C:\xampp\tmp"

4. Restart the server.

Then go to NetBeans again and press Ctrl+F5. The homepage of the WordPress site should open in the browser and the debugger should stop on breakpoints.

Useful Addons

1. Tools

adblock1
Adblock Plus – Blocks advertisements.

noscript1
NoScript – Allows JavaScript, Java and other executable content to run only from trusted domains.

xnotifier1
X-notifier – Notifier for gmail, yahoo, hotmail, aol webmails.

imacros1
iMacros – Automate Firefox. Record and replay repetitious work.

2. Interface

sidebar-retainer
Bookmarks Sidebar Scroll Retainer – Memorizes Bookmarks/History sidebar’s vertical scroll position.

add-to-search
Add to Search Bar – Make any pages’ search functionality available in the Search Bar.

searchwp
SearchWP – Search multiple words. Jump-to-word buttons and highlighting for the search box content

extensionGeneric
UrlbarExt – Extends the Location Bar with set of commands (Shorten URL, Copy URL, Search site, Go up, pNg, Tag pages easily, Navigate through sequential URLs, View page cached version, Surf anonymously using online servers, Twitter)

extensionGeneric
Downloads Window
– Separate Downloads window.

3. Web Development

firebug
Firebug – Web Development toolbox.

webdev
Web Developer – The Toolbar with useful web tools.

extensionGeneric
DOM Inspector
– Inspects the structure and properties of a window and its contents.

extensionGeneric
Element Inspector
– In the DOM Inspector addon quickly navigates to elements by Shift+Rightclicking on it.

colorzilla
ColorZilla – Color picker.

extensionGeneric
Firesizer
– Show window size in the addon bar on resizing. Set custom window size. Needs The Addon Bar addon.

4. Miscellaneous

youtube
Easy YouTube Video Downloader – Download YouTube videos.

aniweather
Aniweather – Animated Weather.

addonbar
The Addon Bar – restores the bar for F29+.

noclose
No Close Buttons – Remove the Close buttons from the tabs.

Debug Addons

I. Debug Preparation

1. Press Ctrl+Shift+I or go to Tools -> Web Developer -> Toggle Tools

2. Press Toolbox Options in the right corner

3. In the Advanced settings group check

Enable chrome and add-on debugging
Enable remote debugging

Debug Toolbox options

4. Close the toolbox

II. Starting Debugger

II.1 PC Debugging

II.1.1. Restartless addons

1. Press Ctrl+Shift+A or go to Tools -> Add-ons

2. Press Debug for an addon you need

Debug Addon manager

3. In Incoming Connection dialog press OK

Debug Incoming connection

4. Go to Debugger tab

Debug Restartless, Debugger tab

5. Set breakpoints and work

II.1.2. All addons (XUL and restartless)

1. Go to Tools -> Web Developer -> Browser Toolbox (Alt+T+W+E)

Debug Toolbox menu item

2. In Incoming Connection dialog press OK

Debug Incoming connection

3. Go to Debugger tab

4. Wait until all scripts are loaded

5. Find your addon id in the left panel (they are organized alphabetically) or type a script name (main.js) in the search box and select a file with your addon in the path

Rebug Toolbox left panel [sm]

Debug Toolbox search file

6. Set breakpoints and work

II.2. Android Debugging

1. On Android go to Settings -> Developer options

Debug Android Developer options

2. If no Developer options menu go to Settings -> About and tap Build number 7 times. It should reveal Developer options menu.

3. Check USB debugging in the Developer options

Debug Android, USB debugging

4. Connect device with USB

5. On PC install Android SDK from the direct link for Windows or go to SDK Tools Only section of the SDK page.

Debug aSDK setup

6. Install the Android Platform Tools leaving the checkbox on after the SDK installation or running the file to start SDK Manager

C:\Users\[username]\AppData\Local\Android\android-sdk\tools\android.bat

Debug aSDK -tools- folder

7. Go to the folder

C:\Users\[username]\AppData\Local\Android\android-sdk\platform-tools

Debug aSDK -platform-tools- folder

8. Add the folder path to the PATH system variable.

  1. Win+R -> “sysdm.cpl”
  2. Go to Advanced tab -> Environment Variables -> System variables -> Path
  3. Press Edit, copy the text and insert it into a text editor
  4. Check the path to platform-tools is in the text, if not copy the path from the folder
  5. Paste edited path text from the editor to the Path edit dialog and confirm.

9. Check all is correct, Win+R -> “cmd”, type the command

adb devices

It will output the list of attached devices.

Debug ADB check

10. On Android open Firefox

11. Go to Settings -> Developer tools

12. Check Remote debugging

Debug Android, Firefox Settings, Remote debugging

13. On PC do Win+R -> “cmd” and type command to set up the port

adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket

14. Open Firefox and go to Tools -> Web Developer -> Connect…

Debug Remote connection request

15. Press Connect

Debug Remote connection established

16. On Android confirm the Incoming connection

Debug Android Incoming connection

17. On PC Firefox select addon to debug and set breakpoint in the Debugger window.

Debug Android Toolbox on Remote connection

Tweaks for ‘about:config’

1. Performance

Disable the session restore on crash

browser.sessionstore.resume_from_crash -> false

Reduce memory usage by reducing images store time in the memory

image.mem.min_discard_timeout_ms -> < 10000

Images cache maximum capacity

browser.cache.memory.capacity -> ~5000 (KB)

Max pages to store in memory for Back/Forward buttons

browser.sessionhistory.max_total_viewers -> 3

Disable/enable image loading

permissions.default.image -> [0]: always; [1]: never; [2]: don't load third party images

2. Interface

Turn off the “Downloads Complete” alert

browser.download.manager.showAlertOnComplete -> false

Close multiple tabs without warning

browser.tabs.warnOnCloseOtherTabs -> false

Show separate Downloads window [F29+]

browser.download.useToolkitUI

If not working use the Downloads Window extension

Classic search bar [F29+]

browser.search.showOneOffButtons -> false

Disable tabs animation on open/close [F29+]

browser.tabs.animate -> false

Disable Close button in tab

browser.tabs.closebuttons -> false

For Firefox 29+ use “No Close Buttons” extension

3. Selection

Change selection background color in hex format (#000000, #a1cef2)

Normal text background

ui.textSelectBackground

Found text background

ui.textSelectBackgroundAttention

Inactive window found text background

ui.textSelectBackgroundDisabled

Text color

ui.textSelectForeground

Other colors

ui.textBackground
ui.textForeground
ui.textHighlightBackground
ui.textHighlightForeground

3. Miscellaneous

Disable addons install delay

security.dialog_enable_delay -> 0