javascript - How to debug in WooCommerce 3

Question

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.

Answer 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:

• WC_Logger methods have been updated since WooCommerce 3: So logging can be grouped by context and severity.

• Use WC_Logger log() method instead of add() method due to upcoming deprecation (thanks to @Vizz85).

For example:

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

Related:

• Develop WooCommerce blog (january 2017): Improved logging in WooCommerce 3
• Documentation on the WC_Logger available methods

---

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.