I want to start a collection of tips and tricks related to the actual development process inside modx manager. Things that make developing inside MODx easier or more comfortable. Please share your own secret techniques!
Example 1 - Layout debugging:
------------------------------
Step 1: Add a new system setting parameter "debugCSS" values: YES or NO (Note: If you are working with EVO, you could also use a TV to switch on/off your debung class)
Step 2: Add class="debug" to your body tags. Example
<body id="[[*alias]]" class="[[++debugCSS:is=`1`:then=`debug`]]">
Step 3a: Use diagnostic css. Example:
body.debug * {background-image: none!imporant; background-color: rgba(0,0,0,0.5)!important}
Now you can use your debug settings
Step 3b: For a more versatile diagnostic stylesheet, you may add a chunk "debugCSS" to your document head
[[++debugCSS:is=`1`:then=`[[$Diagnostic CSS]]`]]
<!-- Chunk: Diagnostic CSS -->
<style>
body.debug img {outline: 5px solid red;}
body.debug img[alt][title] {outline-width: 0;}
body.debug img[alt] {outline-color: fuchsia;}
body.debug img[alt], img[title] {outline-style: double;}
body.debug img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
body.debug img[alt=""][title=""] {outline-style: dotted;}
</style>
This will help you to identify fishy image tags (courtesy Eric Myer:
http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/)
Note: For frontend developing this is a VERY interesing concept. Ask google for more information
QUESTION: I think it is a good idea to show this chunk only to people not logged into manager or with a certain username or role. I have tried something like this:
[[!+modx.user.username:isnot=`(anonymous)`:then=`
[[+modx.user.username]]
[[++debuginfo:is=`1`:then=`
[[$debug]]
`]]
`]]
Unfortunately this caused some unexpected problems (20+ seconds parse time, caching issues, etc). Any idea what could cause such a behaviour?
Example: 2
Add a chunk with some useful MODx variables at the bottom of your pages or as a comment inside your source
You’ll need to add another system setting for that one. Let’s call it showDebugInfo
Add an other system setting parameter: "showDebugInfo" Values: YES or NO to switch on/off some MODx related variables.
[[++showDebugInfo:is=`1`:then=`[[$debuginfo]]`]]
<!-- Chunk "debuginfo" -->
<div id="debuginfo">
<h3>Debug Info</h3>
<dl id="debug_pageinfo">
<dt>Document ID</dt>
<dd>[[*id]]</dd>
<dt>Document Template</dt>
<dd>[[*template]]</dd>
</dl>
<dl id="debug_modxInfo">
<dt>Query Time</dt>
<dd title="Shows how long MODx took talking to the database">[^qt^]</dd>
<dt>Query Count</dt>
<dd title="Shows how many database queries MODx made">[^q^]</dd>
<dt>Parse Time</dt>
<dd title="Shows how long MODx took to parse the page">[^p^]</dd>
<dt>Total Time</dt>
<dd title="Shows the total time taken to parse/ render the page">[^t^]</dd>
<dt>Source</dt>
<dd title="Shows the source of page, whether is database or cache">[^s^]</dd>
</dl>
</div>
Ok, thats all for now. Do you have any other ideas that will improve development inside MODx?
Regards,
pepebe
P.S.
1. If you are still working with Firefox 3, "It’s all text" is a great plugin you should give a try. It will copy the content of any textarea into your favourite editor. Ctrl+S will automagically copy your work back into the source textarea. Neat
2. Try the "Split Browser" Extension in Firefox to see two tabs at the same time (Very useful for your favourite documentation)
