You are here:Home»KB»Programming»Debugging with VSCode and Edge
Thursday, 30 April 2026 10:09

Debugging with VSCode and Edge

Written by

I will cover how to debug languages and CMS that I use with VSCode, Edge, Xampp, xDebug and other diagnostic tools as required.

These instructions might not be the most complex but they will explain the basics allowing you to get started without pulling your hair out. I find when you have a soft start you are able to pick the more complex concepts easier, and more crucially, on your own.

VSCode / Common

JavaScript

Read the Console

This might sound obvious, but there is always information in the browsers console.

Examine the console for errors, warnings and notifications.

Debugging using the Sources Tab in DevTools

This is the traditional method of debugging using your browser.

Notes

  • Pause your code with breakpoints  |  Chrome DevTools  |  Chrome for Developers
    • Learn about all the ways you can pause your code in Chrome DevTools.
  • debugger;
    • Using debugger from your code to pause on that line is equivalent to a line-of-code breakpoint, except that the breakpoint is set in your code, not in the DevTools UI.
    • Instructions
      • Put the following code in your JavaScript where you want execution to be paused. I do not remember if the semi-colon is mandatory. 
        debugger;
      • Open the browsers console
        • You need the console/DevTools open for the debugger to trigger
      • Run your code / Load the page
        • The debugger should open automatically.
      • Read the Data
        • Examine the console for errors, warnings and notifications.
        • Hover over the variable and functions and see their values.
      • Where you find the $this variable, hover over it and it will show you all of the relevant variables

How to Get a Live Reference in Edge DevTools, not Array(0) - DevTools Array Inspection

  • In Edge DevTools, I can use debugger; to stop JavaScript and then examine the variables and objects.
  • When I look at the following, it only shows Array(0) but Edge shows that it has 3 arrays in it. 
    var chartDataDataset = _(timeScaleSegments).map(function(timeScaleRange, timeScaleIndex){ return countsPerTimeScaleIndex[timeScaleIndex] || 0; }).value();
  • How do i use DevTools to see these arrays in this object/array?

Explanation

You're encountering a common behaviour in DevTools (including Edge and Chrome) where objects like arrays show as Array(0) at first glance — especially when the data is lazy-loaded or the object is logged in a way that doesn't immediately expand its contents.

When you pause in the debugger and hover or inspect an object such as chartDataDataset, DevTools might show:

Array(0)

This often happens when:

  • The array is created very recently, and DevTools evaluated it before it was populated.
  • You're looking at a snapshot rather than a live reference.
  • The array contains complex or nested structures, and it wasn't expanded at the right time.

Solution: How to See the Actual Data

Here's several methods on how to see the full data, the live snapshot, which will show the "hidden arrays" in DevTools.

Log It After It's Created
  • Right after chartDataDataset is defined, add: 
    console.log(chartDataDataset);
  • Then expand the array in the Console — this shows a live reference, not a snapshot.
Use the Debugger Step-by-Step
  • Set a debugger; statement after the line where chartDataDataset is defined: 
    var chartDataDataset = _(timeScaleSegments)
  .map(function(timeScaleRange, timeScaleIndex){
    return countsPerTimeScaleIndex[timeScaleIndex] || 0;
  })
  .value();

debugger;
  • In Edge DevTools, go to the "Scope" section while paused.
  • Find chartDataDataset in the "Local" variables.
  • Expand it — now you should see the correct length and its items.
Use Console to Manually Inspect

it still says Array(0):

  • Go to the Console tab.
  • Type chartDataDataset and press Enter.
  • Now inspect the expanded structure manually.
Use JSON.stringify() if Needed

This won't work well if it contains circular references, but it's useful for flat data.

  • Use the following in your code: 
    console.log(JSON.stringify(chartDataDataset, null, 2));
Use the Watch panel (semi-live)

While not fully "live", this lets you re-evaluate on demand as you continue stepping.

  • Go to the Sources tab.
  • While paused at a debugger; or breakpoint, add chartDataDataset to the Watch panel.
  • This updates as you step through code.
Use $0, $1, etc. or inspect variables in Console

You can select an object in the Elements or Scope tab and reference it in Console using:

  • $0 (currently selected object)
  • $1, $2 for previous ones

Or, just manually type chartDataDataset into the Console after it’s defined. That always evaluates it in real-time.

Additional Notes

  • What Doesn't Work for Live Viewing
    • Expanding the object in the Scope or Call Stack sidebar sometimes shows a snapshot, not a live object.
    • If you hover over the variable name, the tooltip can be stale.
    • Logging and immediately expanding while paused may not reflect later mutations.
  • Pro Tip: Freeze Object Snapshot
    • If you right-click a logged object in Console, you can choose “Store as global variable” (e.g., temp1).
    • This lets you inspect it freely in the Console, and it won’t change unless you reassign it.



 

 

 

console.log() / Output to console

You can use console.log() to output all sorts of information about variables, functions, classes and results into the console, although you might find using debugger easier for this.

A console.log() can be used to output different messages depending on the result of a calculation or function and so on. For instance you would have a console.log() for success and one for failure.

  • Put one of the following in your JavaScript, selecting the sort of output you want. 
    ### This will output the value stored (`12345678`) in the variable (`abc`) to the console
var abc = 12345678
console.log(abc);

### This will output the text `This is a message` to the console
console.log('This is a message');

### This will output `123` to the console
console.log(100 + 23);

### This will output the specified function (debounce) as text to the console. Useful to see if the function is defined
console.log(window.debounce);

Example Output:

    ƒ debounce(func, timeout = 300) {
      let timer;
      return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => { func.apply(this, args); }, timeout);
      };
    }
  • Run your code / Load the page
  • Read the console
  • Examine the console for notifications.

 

 

 

 

 

 

PHP

Xdebug (PHP)

WordPress (PHP and JavaScript)

Joomla

 

 

 

 

 

 

 

 

Getting Xdebug, Xampp and Netbeans to work together in Windows can be a tricky thing and I want to address that here. These instructions will get debugging working all on the same PC and IP.

A symptom of a PC that is not setup correctly is this Netbeans Socket Exception error. You get this error when Netbeans cannot communicate with Xdebug and is usually because you are running them both on the same computer and therefore IP so the traffic routing is getting mixed up. It could also because something else is running on the debug port you have selected.

Netbeans Socket Exception error

These Settings Work

These settings are what I am using now and work well.

Windows

  • You need to set a static IP on your ethernet adapter (or wifi)

php.ini

    • Use your static IP to set xdebug.remote_host. Setting a static IP seems to fix most connecion issues. xdebug does not like 127.0.0.1 it works sometimes but can be problematic.
    • Swapping xdebug.remote_port to 9001 helped when xdebug just stopped working. The default is 9000.
    • Disable output_buffering in your php.ini by altering/uncommenting the following line 
      output_buffering = Off
    • Add the following code to the end of your php.ini file. 
      [XDebug]

zend_extension="D:\websites\php\ext\php_xdebug.dll"
;zend_extension="D:\websites\php\ext\php_xdebug-2.5.4-5.6-vc11.dll"
xdebug.idekey = netbeans-xdebug
xdebug.profiler_append = 0
xdebug.profiler_enable = 0
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "d:\websites\tmp\xdebug"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_autostart = 0
xdebug.remote_connect_back = 0
xdebug.remote_host = "192.168.1.160"
xdebug.remote_port = 9001
xdebug.remote_handler = "dbgp"
xdebug.remote_mode = req
xdebug.remote_log = "d:\websites\tmp\xdebug\xdebug_remote.log"
xdebug.show_local_vars = 9
xdebug.trace_output_dir = "d:\websites\tmp"

;xdebug.show_exception_trace = 1

      Minimum working settings

      These are the minimum settings I have found to work but are here only for reference.

      [XDebug]

;zend_extension="D:\websites\php\ext\php_xdebug.dll"
zend_extension="D:\websites\php\ext\php_xdebug-2.5.4-5.6-vc11.dll"
xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=192.168.1.160
xdebug.remote_port=9001
xdebug.idekey=netbeans-xdebug

Netbeans

(Tools --> Options --> PHP --> Debugging)

  • Debugger Port: 9001
  • Session ID: netbeans-xdebug
  • Maximum Data Length: 2048 - I think this is the default
  • Stop at First Line: off
  • Watches and Balloon Evaluation: All off
  • Show Requested URLs: off
  • Show Debugger Console: On

Browser

You need to send a trigger to Xdebug via your browser to trigger the debugger. You can send the trgger via GET/POST but you need a plugin for this.

Test Debugger is working

Now you have configured your system as above you need to test it before you can rely on it.

  • Set a breakpoint in Netbeans on the index.php (or a PHP file that is parsed) in your software project, preferably one before the content is displayed. (or you can enable the ‘Stop at First Line’ option in the Netbeans config
  • Start debugging in Netbeans
  • Open your project in a chrome browser with the xdebug helper plugin enabled
  • If the browser and Netbeans stop at the breakpoint, everything is working

Diagnostics

Things that Might help

If xdebug does not work straight away then trying these things might help.

  • could disabling ipv6 in the network adapter help? because xampp has issues with ipv6
  • xdebug might fail if you have multiple version of xampp running
  • Localhost is mapping to ::1 and not 127.0.0.1
  • Not all lines can act as breakpoints, these are displayed as cracked breakpoint markers in Netbeans. These breakpoints will not work because Netbeans does not like them. To fix this yoou should choose another breakpoint.
  • Run the Xdebug on another server which has another IP
  • Get the latest dll from xdebug site (i.e. php_xdebug-2.5.4-5.6-vc11.dll)
  • Comment out any zend extensions
  • Some people use port 9001 when they have issues with 9000.

Test the port is not already in use - dbgtest.php

This code is taken from 21.4.2 How to Set Up XDebug | Oracle

<?php
$address = '127.0.0.1';
$port = '9000';
$sock = socket_create(AF_INET, SOCK_STREAM, 0);
socket_bind($sock, $address, $port) or die();
socket_listen($sock);
$client = socket_accept($sock);
echo "Connection established: $client";
socket_close($client);
socket_close($sock);
?>

However I found this slightly better version from dbgtest.php · GitHub

<?php
// adapted from https://blogs.oracle.com/netbeansphp/entry/howto_check_xdebug_installation
$address = $argv[1] ?: '127.0.0.1';
$port = '9000';
$sock = socket_create(AF_INET, SOCK_STREAM, 0);
socket_bind($sock, $address, $port) or die();
echo "Listening to $address:$port\n";
socket_listen($sock);
$client = socket_accept($sock);
echo "Connection established: $client\n";
socket_close($client);
socket_close($sock);
  1. Create a php file with the code above called dbgtest.php and put it in the htdocs folder of your xampp server
  2. Change the port to 9001 if that is the port number you are using/diagnosing
  3. Enable sockets - extension=php_sockets.dll
    • only be need for the test script
    • You enable this by uncommenting the appropriate line in the php.ini
    • if you do not enable this you will get this error 
      Call to undefined function socket_create()
  4. Close Netbeans if that is running.
  5. Restart Xampp
  6. Run the script

If there is something running on this socket you will get an error as shown below. This shows that some other process is using the port 9000.

Warning: socket_bind(): unable to bind address [10048]: Only one usage of each socket address (protocol/network address/port) is normally permitted. in D:\websites\htdocs\dbgtest.php on line 5

Workarounds

These are a few workarounds I tried and might work for you. These are not designed to be a permanent fix.

Method 1

  • Make sure netbeans and xampp are not running
  • Put the basic xdebug settings in php.ini
  • Enable extension=php_sockets.dll in php.ini
  • Run xampp
  • Put a copy of the oracle script in your Webroot and run it. This causes xampp to open socket on 9000
  • Now open and run NetBeans debugging

* I am not sure if you need to do the IP fix aswell for this to work. It is all caused by routing issues on the loopback system of the PC. Or sockets might be needed.

Method 2

  • Turn of netbeans debugging (leave netbeans open)
  • Run the dbgtest.php to allow xampp/xdebug to grab the port
  • Now start netbeans debugging

Method 3 - (if working and then stops for no reason)

  • Close Netbeans, Xampp and browsers
  • Restart them all

Links

Read 4 times Last modified on Thursday, 30 April 2026 16:12
Published in Programming
back to top