diff --git a/editions/tw5.com/tiddlers/definitions/Web Developer Tools.tid b/editions/tw5.com/tiddlers/definitions/Web Developer Tools.tid new file mode 100644 index 000000000..c02f4c277 --- /dev/null +++ b/editions/tw5.com/tiddlers/definitions/Web Developer Tools.tid @@ -0,0 +1,7 @@ +created: 20201120153119665 +modified: 20201120154646100 +tags: Definitions +title: Web Developer Tools +type: text/vnd.tiddlywiki + +Most browsers provide ''Web Developer Tools'' that include a JavaScript console. In Chrome and Firefox it can be opened via the ''Tools'' menu, or by pressing Ctrl + Shift + J (Cmd + Shift + J on a Mac). \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/widgets/ActionLogWidget.tid b/editions/tw5.com/tiddlers/widgets/ActionLogWidget.tid index b8440f31b..2fa75cfad 100644 --- a/editions/tw5.com/tiddlers/widgets/ActionLogWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/ActionLogWidget.tid @@ -1,21 +1,29 @@ caption: action-log created: 20201114113318785 -modified: 20201114125859948 -tags: Widgets ActionWidgets +modified: 20201120155202652 +tags: Widgets ActionWidgets [[Debugging Widgets]] 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. +<<.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|Web Developer Tools]] 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. +<<.tip """ For debugging outside of actions see [[LogWidget]]""">> + ! 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. +In addition there are optional attributes that can be used: + +|!Optional Attribute |!Description | +|$$filter|All variables matching this filter will also be logged. | +|$$message |A message to display as the title of the information logged. Useful when several `action-log` widgets are used in sequence. | +|$$all |Set to "yes" to log all variables in a collapsed table. Note that if there is nothing specified to log, all variables are always logged instead.| <<.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.""">> @@ -28,3 +36,15 @@ Here is an example of logging two variables: <$action-log myVar=<> otherVar=<>/> ``` +To log all variables: + +``` +<$action-log /> +``` + + +To log two variables as well as all core variables (which start with `tv-`): + +``` +<$action-log myVar=<> other={{!!status}} $$filter="[prefix[tv-]]"/> +``` diff --git a/editions/tw5.com/tiddlers/widgets/LogWidget.tid b/editions/tw5.com/tiddlers/widgets/LogWidget.tid new file mode 100644 index 000000000..71cb01b03 --- /dev/null +++ b/editions/tw5.com/tiddlers/widgets/LogWidget.tid @@ -0,0 +1,45 @@ +created: 20201120152706842 +modified: 20201120154927696 +tags: Widgets [[Debugging Widgets]] +title: LogWidget +type: text/vnd.tiddlywiki + +! Introduction + +<<.from-version "5.1.23">> The ''log'' widget can be used to output debugging information to the [[JavaScript console|Web Developer Tools]] supported by most browsers. + +<<.tip """ For use with ActionWidgets see [[ActionLogWidget]] which uses identical parameters""">> + +! Content and Attributes + +The ''log'' widget is invisible. Any content within it is ignored. Note that the widget will log to the console both when it is first rendered and also every time it refreshes. + +When the widget is rendered, the names and values of all attributes are logged to the JavaScript console. +In addition there are optional attributes that can be used: + +|!Optional Attribute |!Description | +|$$filter|All variables matching this filter will also be logged. | +|$$message |A message to display as the title of the information logged. Useful when several `log` widgets are used in sequence. | +|$$all |Set to "yes" to log all variables in a collapsed table. Note that if there is nothing specified to log, all variables are always logged instead.| + + +! Example + +Here is an example of logging two variables: + +``` +<$log myVar=<> otherVar=<>/> +``` + +To log all variables: + +``` +<$log /> +``` + + +To log two variables as well as all core variables (which start with `tv-`): + +``` +<$log myVar=<> other={{!!status}} $$filter="[prefix[tv-]]"/> +```