HTML-Based Visual Debugger

[marrable]

This would enable authors of templates to easily debug template behavior on example CLI text. I have been using this in-house for a week and it has highlighted a number of issues with our templates that most likely would not have been caught otherwise.

If this is seen as a worthwhile venture I can add a test suite before the final merge to make sure it is as robust as possible (would be a shame to unleash a possibly buggy debug tool on the world).

Below is a current example of the debugger in action (you can test it yourself by calling [--visual-debug] as an option.

[marrable]

@buxtronix whenever it suits you to have a look, go ahead! I realise it's possibly rough in places, so I appreciate any feedback if you have the time.

P.S. should've squashed my commits... Sorry 'bout that.

[itdependsnetworks]

Seems pretty useful

[old-syniex]

Looks very useful hope they will merge it soon

[harro]

Some lint warnings

18: There should not be a space before a one-line docstring summary [g-space-before-docstring-summary]
18: One-line docstring summary should end with ".", ".)", "?", or "!" [g-short-docstring-punctuation]
28: Importing a member of a module [g-importing-member]
29: Importing a member of a module [g-importing-member]
31: Invalid import order.
Diff:
    from collections import namedtuple
+   import re
    from textwrap import dedent
-   import re
Copy and pastable ordering:
from collections import namedtuple
import re
from textwrap import dedent [g-bad-import-order]
39: Line too long (96/80) [line-too-long]
53: Need 1 blank line before def [g-wrong-blank-lines]
61: Line too long (95/80) [line-too-long]
61: Extraneous space in one-line docstring [g-short-docstring-space]
69: Missing method docstring [missing-docstring]
81: One-line docstring summary should end with ".", ".)", "?", or "!" [g-short-docstring-punctuation]
90: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
92: Missing method docstring [missing-docstring]
133: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
133: Wrong hanging indentation (add 2 spaces).
        ".{}{{\n".format(state_name),
        ^ | [bad-continuation]
134: Wrong hanging indentation (add 2 spaces).
        self.hsl_css(
        ^ | [bad-continuation]
135: Wrong hanging indentation (add 2 spaces).
          self.state_colormap[state_name],
          ^ | [bad-continuation]
136: Wrong hanging indentation (add 2 spaces).
          LINE_SATURATION,
          ^ | [bad-continuation]
137: Wrong hanging indentation (add 2 spaces).
          LINE_LIGHTNESS
          ^ | [bad-continuation]
139: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
139: Wrong hanging indentation (add 2 spaces).
        "  border-radius: 5px;\n",
        ^ | [bad-continuation]
140: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
140: Wrong hanging indentation (add 2 spaces).
        "  padding: 0 10px;\n",
        ^ | [bad-continuation]
141: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
141: Wrong hanging indentation (add 2 spaces).
        "}\n"
        ^ | [bad-continuation]
156: Wrong hanging indentation (add 2 spaces).
            StartStopIndex(
            ^ | [bad-continuation]
157: Wrong hanging indentation (add 2 spaces).
              match.match_obj.start(key),
              ^ | [bad-continuation]
158: Wrong hanging indentation (add 2 spaces).
              match.match_obj.end(key),
              ^ | [bad-continuation]
159: Wrong hanging indentation (add 2 spaces).
              key
              ^ | [bad-continuation]
163: Line too long (82/80) [line-too-long]
174: Unused variable 'index_pair' [unused-variable]
176: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
176: Wrong hanging indentation (add 2 spaces).
            ".{}-match-{}-{}{{\n".format(line.state, l_count, match_count),
            ^ | [bad-continuation]
177: Wrong hanging indentation (add 2 spaces).
            self.hsl_css(
            ^ | [bad-continuation]
178: Wrong hanging indentation (add 2 spaces).
              self.state_colormap[line.state],
              ^ | [bad-continuation]
179: Wrong hanging indentation (add 2 spaces).
              MATCH_SATURATION,
              ^ | [bad-continuation]
180: Wrong hanging indentation (add 2 spaces).
              MATCH_LIGHTNESS
              ^ | [bad-continuation]
182: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
182: Wrong hanging indentation (add 2 spaces).
            "  border-radius: 5 px;\n",
            ^ | [bad-continuation]
183: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
183: Wrong hanging indentation (add 2 spaces).
            "  font-weight: bold;\n"
            ^ | [bad-continuation]
184: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
185: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
185: Wrong hanging indentation (add 2 spaces).
            "  padding: 0 5px;\n",
            ^ | [bad-continuation]
186: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
186: Wrong hanging indentation (add 2 spaces).
            "}\n",
            ^ | [bad-continuation]
187: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
187: Wrong hanging indentation (add 2 spaces).
            ".{}-match-{}-{}:hover + .regex {{\n".format(line.state, l_count, match_count),
            ^ | [bad-continuation]
187: Line too long (91/80) [line-too-long]
188: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
188: Wrong hanging indentation (add 2 spaces).
            "  display: inline;\n",
            ^ | [bad-continuation]
189: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
189: Wrong hanging indentation (add 2 spaces).
            "}\n"
            ^ | [bad-continuation]
199: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
199: Wrong hanging indentation (add 2 spaces).
      "</style>\n"
      ^ | [bad-continuation]
217: Missing function docstring [missing-docstring]
241: Args section is missing, does not match arg list or is badly indented.
   
Expected: html_file
   
Found:
   
Missing: html_file
   
Unexpected:  [g-doc-args]
242: One-line docstring summary should end with ".", ".)", "?", or "!" [g-short-docstring-punctuation]
242: One-line docstring summary should be followed by a blank line [g-no-space-after-docstring-summary]
248: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
248: Wrong hanging indentation (add 2 spaces).
      "</head>\n",
      ^ | [bad-continuation]
249: Wrong hanging indentation (add 2 spaces).
      "<header class='states'>",
      ^ | [bad-continuation]
250: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
250: Wrong hanging indentation (add 2 spaces).
      "<h4>States:</h4>\n"
      ^ | [bad-continuation]
253: Use default iterator instead of 'keys' [g-builtin-op]
255: Wrong hanging indentation (add 2 spaces).
        "<button style='font-weight: bold;' class='{}'>{}</button>\n".format(state, state)
        ^ | [bad-continuation]
255: Line too long (90/80) [line-too-long]
259: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
259: Wrong hanging indentation (add 2 spaces).
      "</header>\n",
      ^ | [bad-continuation]
260: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
260: Wrong hanging indentation (add 2 spaces).
      "<body>\n",
      ^ | [bad-continuation]
261: Wrong hanging indentation (add 2 spaces).
      "<h4 class='cli-title'>CLI Text:</h4>\n",
      ^ | [bad-continuation]
262: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
262: Wrong hanging indentation (add 2 spaces).
      "<pre>\n"
      ^ | [bad-continuation]
275: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
287: Using type() instead of isinstance() for a typecheck. [unidiomatic-typecheck]
291: Anomalous backslash in string: '\?'. String constant might be missing an r prefix. [anomalous-backslash-in-string]
291: Line too long (111/80) [line-too-long]
295: Anomalous backslash in string: '\?'. String constant might be missing an r prefix. [anomalous-backslash-in-string]
295: Line too long (109/80) [line-too-long]
299: Line too long (90/80) [line-too-long]
300: Line too long (96/80) [line-too-long]
301: Line too long (93/80) [line-too-long]
302: Line too long (110/80) [line-too-long]
307: Line too long (117/80) [line-too-long]
315: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
331: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]
331: Quote delimiter " is inconsistent with the rest of the file [g-inconsistent-quotes]

[harro]

Writing to a file 'debug.html' in the current directory is potentially harmful. Consider prompting for the target destination/name (with a sensible default) would be preferable.

Another possibility is to pipe to a cli tool that can render HTML in a terminal such as html2text or w3m

[harro]

There are no unit tests?
Perhaps an instance of debug.html in testdata, for a reference temple input, and a unit test to produce and compared to that file?

[CarloMara]

@harro Is there any interested in getting this merged? I'd be more than happy to put in the work to get this across the line

[harro]

I certainly like the idea! Perhaps there is a modest initial change we can do rather tackling it all at once?

…

On Fri, 14 July 2023, 4:29 pm Carlo Maragno, ***@***.***> wrote: @harro <https://github.com/harro> Is there any interested in getting this merged? I'd be more than happy to put in the work to get this across the line — Reply to this email directly, view it on GitHub <#48 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADD2VERFJO5CF6YZLO7ADIDXQEGORANCNFSM4GTF2BYQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[CarloMara]

Good to know, I'll see if I get some time to do this

[evilmonkey19]

This would be an extremely good feature!