Introduce <$action-log> widget to help debugging action strings

core/modules/utils/utils.js

@@ -53,6 +53,19 @@ exports.warning = function(text) {
 	exports.log(text,"brown/orange");
 };
 
+/*
+Log a table of name: value pairs
+*/
+exports.logTable = function(data,columnNames) {
+	if(console.table) {
+		console.table(data,columnNames);
+	} else {
+		$tw.utils.each(data,function(value,name) {
+			console.log(name + ": " + value);
+		});
+	}
+}
+
 /*
 Return the integer represented by the str (string).
 Return the dflt (default) parameter if str is not a base-10 number.

core/modules/widgets/action-log.js

@@ -0,0 +1,50 @@
+/*\
+title: $:/core/modules/widgets/action-log.js
+type: application/javascript
+module-type: widget
+
+Action widget to log debug messages
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var LogWidget = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+LogWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+LogWidget.prototype.render = function(parent,nextSibling) {
+	this.computeAttributes();
+};
+
+/*
+Refresh the widget by ensuring our attributes are up to date
+*/
+LogWidget.prototype.refresh = function(changedTiddlers) {
+	return this.refreshChildren(changedTiddlers);
+};
+
+/*
+Invoke the action associated with this widget
+*/
+LogWidget.prototype.invokeAction = function(triggeringWidget,event) {
+	$tw.utils.logTable(this.attributes,["attribute name","value"]);
+	return true; // Action was invoked
+};
+
+exports["action-log"] = LogWidget;
+
+})();

editions/tw5.com/tiddlers/widgets/ActionLogWidget.tid

@@ -0,0 +1,30 @@
+caption: action-log
+created: 20201114113318785
+modified: 20201114125859948
+tags: Widgets ActionWidgets
+title: ActionLogWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+<<.from-version "5.1.23">> The ''action-log'' widget is an [[action widget|ActionWidgets]] that can be used to output debugging information to the JavaScript console supported by most browsers. This can be useful because otherwise it is difficult to observe what is going on within a sequence of actions.
+
+ActionWidgets are used within triggering widgets such as the ButtonWidget.
+
+! Content and Attributes
+
+The ''action-log'' widget is invisible. Any content within it is ignored.
+
+When the actions are invoked, the names and values of all attributes are logged to the JavaScript console.
+
+
+<<.tip """A handy tip if an action widget is not behaving as expected is to temporarily change it to an `<$action-log>` widget so that the attributes can be observed.""">>
+
+! Example
+
+Here is an example of logging two variables:
+
+```
+<$action-log myVar=<<myVar>> otherVar=<<otherVar>>/>
+```
+