Debugging

So you broke the code. Now what?

Here are some tricks on how we debug B2B Commerce:

Backend Debugging (Apex classes)

ccLog, for general API extensions debugging

You can use the querystring ccLog with the token value you assign on CCAdmin to have the output from both the managed package and your customizations directly into your browser console. Check out the official Cloudcraze Logging for more details (I personally think that page is a bit dated, but should work).

TL;DR: write something like this in your code:

  //... some code ...
  ccrz.ccLog.log(LoggingLevel.DEBUG,'SOME_DEBUG_IDENTIFIER',valueToDebug);
  //... more code ...
1
2
3

And then when checking the storefront, add &ccLog=SOME_LOGGING_TOKEN to the URL, where the logging token is the same as the one that was set in ccAdmin.

Apex debugging, for more granular or non-B2B Commerce debugging

This is how you would normally do it for any salesforce code, but this is only useful for custom code and extensions: Managed package code debug logs won't be visible.

System.debug logs won't show the output from the managed package. For those cases, you'll have to rely on the OOTB cclogs or log a support ticket.

Front-end Debugging (VF pages, handlebars, js)

CSR Flow, for Configuration Settings

With CSR flow, instead of using the regular community's "friendlier" URL, your page will use the apex route (you'll see /apex in the URL). When using this routing approach instead of showing the generic community error page, it will show you the apex page, with the exception message (if any). This technique has been very useful to track missing configuration settings.

Handlebars {{log}} , for Backbone models

Use {{log}} in your handlebars template to debug the model being fed into it. In my opinion, this is less stressful than trying to deal with the cloudcraze models (at least until someone creates a guide on the models available for the templates 😉 ). More info here.

Browser Inspector/Developer Tools, for everything else

If the team is experienced with front end development, they could use the browser console to check for javascript errors, remote calls returns, web service issues and css rules not working as expected.

Front end issues with HTML/CSS/js are not related to salesforce itself, but to web development in general, so consider having front-end or full stack developers in your team for storefront look and feel and UX customizations. Also, note that the javascript portion of B2B commerce is not managed code (aka: you can read it yourself...and modify it if you can)

In general Salesforce Support/Salesforce B2B Commerce services teams have been supportive for Front end issues, but your mileage may vary. Consider staying within their backbone + handlebars + visualforce pages architecture if your team is not very experienced yet.

If still stuck...

If debugging is not enough, and you still can't figure out then consider getting help.


Tags: cclog, {{log}}, debugger, Apex Debugger

References: