Skip to content

Commit

Permalink
Added advanced/module usage instructions and reduced redundant docume…
Browse files Browse the repository at this point in the history
…ntation by using a simplified example in the script file itself.
  • Loading branch information
Steve Holsinger committed Jul 19, 2016
1 parent f988ada commit 65cf060
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 35 deletions.
33 changes: 28 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,43 @@ An instructional repository for techniques used in debugging Demandware template
# Usage #
First, make sure that the TemplateDebugger.ds file is included in the template. This can be done within its own `<isscript/>` block, or an existing one. Keep in mind that the include needs to be present before the `TemplateDebugger.debug()` method can be utilized. Therefore, it is recommended that a dedicated `<isscript/>` block be used, and placed at the top of the ISML file. It is important to delete these elements once done debugging, to avoid null reference errors or performance issues in production environments.

<iscomment><!-- DELETE AFTER USE: V !!!! --></iscomment>
<iscomment> DELETE AFTER USE: V !!!! </iscomment>
<isscript>var TemplateDebugger = require('int_dev_suite/cartridge/scripts/util/TemplateDebugger.ds');</isscript>
<iscomment><!-- DELETE AFTER USE: ^ !!!! --></iscomment>
<iscomment> DELETE AFTER USE: ^ !!!! </iscomment>


Once the TemplateDebugger.ds file is included, place a `TemplateDebugger.debug()` call in any existing `<isscript/>` bock, or create a dedicated `<isscript/>` block. Any variable, either in an `<isscript/>` block, or an `<isset/>` declaration, that was present before the `TemplateDebugger.debug()` call will be visible.

Multiple `TemplateDebugger.debug()` calls may be required. You need one call for each individual breakpoint needed.

<iscomment><!-- DELETE AFTER USE: V !!!! --></iscomment>
<iscomment> DELETE AFTER USE: V !!!! </iscomment>
<isscript>TemplateDebugger.debug();</isscript>
<iscomment><!-- DELETE AFTER USE: ^ !!!! --></iscomment>
<iscomment> DELETE AFTER USE: ^ !!!! </iscomment>

Once the required tags are in place, add a script debug breakpoint to the line with the `return` statement of the `exports.debug()` method. Run the script debugger, and navigate to the correct pipeline which will render the ISML file being debugged.
Once the required tags are in place, add a script debugger breakpoint to the line with the `return` statement of the `exports.debug()` method. Run the script debugger, and navigate to the correct pipeline that will render the ISML file being debugged.

# Recommended Alternate / Advanced Usage (modules directory) #
This method provides the same benefits as above, but you can simplify the way
you call the debug helper using `require`. For example, since `require`
caches files, there's little overhead for calling require targeting the same
file repeatedly. In addition, Demandware's `require` implementation checks for
packages in a 'modules' folder in your code version. So you can put
TemplateDebugger.ds in a modules directory within your project and then do:

<iscomment> DELETE AFTER USE: V !!!! </iscomment>
<isscript>require('TemplateDebugger.ds').debug()</isscript>
<iscomment> DELETE AFTER USE: ^ !!!! </iscomment>

This will perform the same thing as shown in the standard "Usage" section above. Finally, add a script debugger breakpoint to the line with the `return` statement of the `exports.debug()` method. Run the script debugger, and navigate to the correct pipeline that will render the ISML file being debugged.

When you use the modules directory your project's folders would look something like this:

app_storefront_controllers/
app_storefront_core/
int_bar/
int_foo/
modules/
|- TemplateDebugger.ds

# Viewing the variables in your template #
Within the "Debug View" window, it will list the active breakpoint. From there, click the, "-toplevel-" thread. Doing so will open the Template's thread, at which point, the template variables are visible in the "Variables View" window.
Expand Down
35 changes: 5 additions & 30 deletions TemplateDebugger.ds
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,12 @@
*/

/*
To use, make sure that the TemplateDebugger.ds file is included in the
template. This can be done within its own <isscript/> block, or an existing
one. Keep in mind that the include needs to be present before the
TemplateDebugger.debug() method can be utilized. Therefore, it is recommended
that a dedicated <isscript/> block be used, and placed at the top of the
.isml file. It is important to delete these elements once done debugging, to
avoid null reference errors.

<iscomment><!-- DELETE AFTER USE: V !!!! --></iscomment>
<isscript>var TemplateDebugger = require('int_dev_suite/cartridge/scripts/util/TemplateDebugger.ds');</isscript>
<iscomment><!-- DELETE AFTER USE: ^ !!!! --></iscomment>

Once the TemplateDebugger.ds file is included, place a TemplateDebugger.debuger() call in any existing <isscript/> bock, or create a dedicated <isscript/> block.
Any variable, either in an <isscript/> block, or an <isset/> declaration, that was present before the TemplateDebugger.debug() call will be visible.
Multiple TemplateDebugger.debug() calls are required for each individual breakpoint needed.

<iscomment><!-- DELETE AFTER USE: V !!!! --></iscomment>
<isscript>TemplateDebugger.debug();</isscript>
<iscomment><!-- DELETE AFTER USE: ^ !!!! --></iscomment>

Once the required tags are in place, add a script debug breakpoint to the
return method, of the exports.debug() method. Run the script debugger, and
navigate to the correct pipeline which will render the .isml file being
debugged.
Usage: Place a script debugger breakpoint on the `return` line within the function below. Then call it within a template wherever you need to inspect variables. eg:

At this point, the debugger should find the hook on the
exports.debug() method. Within the "Debug View" window, it will list the
active breakpoint. From there, click the, "-toplevel-" thread.

This will open the Template's thread, at which point, the template variables
are visible in the "Variables View" window.
<isset name="pam" value="${pdict.Product.getAvailabilityModel()}" scope="page"/>
<iscomment> DELETE AFTER USE: ^ !!!! </iscomment>
<isscript>require(path/to/TemplateDebugger.ds).debug()</isscript>
<iscomment> DELETE AFTER USE: ^ !!!! </iscomment>
*/

/**
Expand Down

0 comments on commit 65cf060

Please sign in to comment.