'How to debug in WooCommerce 3+

I am creating a custom shipping method for Woocommerce using this tutorial https://docs.woocommerce.com/document/shipping-method-api/ but I am having issues debugging. Whenever shipping methods get updated by user, Woocommerce calls calculate shipping. I have overridden this function with the following.

public function calculate_shipping( $package ) {
    // This is where you'll add your rates
    $rate = array(
      'idea' => $this->id,
      'label' => $this->title,
      'cost' => '90.00',
      'calc_tax' => 'per_item'
    );
    echo "<script>console.log('Calculating shipping');</script>";
    $this->add_rate($rate);
  }

In the end I have a fairly complex way of calculating the "cost" but I have no way of debugging it because that echo line produces no output in the chrome console. Any ideas what is going on here?

Any help would be much appreciated. Thank you.



Solution 1:[1]

As this is a background process on server side, don't use javascript.

1). WC Logs and the WC_Logger Class in WooCommerce for better debugging

To access the results of the log easily from the dashboard, you can log to a WC logger rather than the error log.

You can access error logs by going to WooCommerce > System Status > Logs.

Then you will be able to choose and "view"the error log file you need, giving you the debugging details that you need. Error logs are also located in the /wc-logs folder within your site install.

Running a stack trace on a caught exception (example):

// Log any exceptions to a WC logger
$log = new WC_Logger();
$log_entry = print_r( $e, true );
$log_entry .= 'Exception Trace: ' . print_r( $e->getTraceAsString(), true );
$log->log( 'new-woocommerce-log-name', $log_entry );

Notes:

For example:

$logger = wc_get_logger();
$logger->debug( 'debug message', array( 'source' => 'my-extension' ) );

Related:


2). Debugging with WordPress WP_DEBUG Log (as an alternative)

a) First edit your wp-config.php file adding the following lines to enable debug (if these are already defined, edit the values):

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

As errors are logged, they should appear in wp-content/debug.log. You can open this file in a text editor.

b) On your code: Use the following (where $variable is the variable to be displayed in the error log:

error_log( print_r( $variable, true ) );

Now you will get the data for debugging.

Solution 2:[2]

First Creat PHP helper function

 function console_output($data) {
 $output = $data;
if (is_array($output))
    $output = implode(',', $output);

  echo "<script>console.log('Debug Objects: " . $output . "' );</script>";
 }

Then you can use it like this:

public function calculate_shipping( $package ) {
// This is where you'll add your rates
$rate = array(
  'idea' => $this->id,
  'label' => $this->title,
  'cost' => '90.00',
  'calc_tax' => 'per_item'
     );
   console_output("Calculating shipping");
    $this->add_rate($rate);
   }

This will create an output like this:

  Debug Objects: Calculating shipping

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrew Schultz
Solution 2 Yahya Ayyoub