Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Debugging with SugarCube and Twine 1 .... argh! :)

Hi,

I admit - right from the beginning, so to say, that I am not a HTML coder. So in any programming language that I am familiar with I was forced to use < or > only rarely - mostly in comparisons, sometimes when setting up pipe redirects.

So in Twine and Sugarcube (it's different in Harlowe, I know) I get flooded with the excessive use of << and >> and, of course, also < and > - especially in HTML "in between" statements.

The worst, though, is that the "editor" that comes with Twine (1 or 2) is ... somewhat lacking ... whoever came up with the colour coding of a properly working <<>> set and a not working <<>> set should be ashamed. Both are shown in bold and - at least on my monitor - the colour difference is minimal.

Try <<set<<print <<M<yWidget>>>>

Yes, the right ones are blue but honestly, when I glance at the screen (scrolling for error spotting) the difference is so small that I don't really notice it.

My next big problem is the way conditional clauses are handled. I have some complex logic at work and if you have a 7 level if elseif else endif construct and have 3 - 6 new if elseif else endif conitions nested in any of those ... it's ok when you start out because I usually do the empty construct right from the beginning and then fill in the content. But once in a while you may find you have to add/change/delete something and then it is ... er, where was that passage again? ...

In a "normal" programming language you have 2 things that help you. (a) You have a "matching brace" function that will show you which { or } belongs where and you usually have a expand/collapse function for if, for and similar constructions that will allow you to quickly find the level you are looking for.

But Twine (especially with SugarCube) defies all that - even when you copy and paste the code to a somewhat decent editor because no editor I own is capable of handling <<if>> as a token for conditions that would allow me to set up a if hierarchy so I could collapse. (Well, they might but then I haven't found out how :)

So - first question - did anyone else run into those problems and found an editor that would allow them to handle analysis of multi page if statements in a somewhat efficient manner?

Next problem: While Twine 1 or Twine 2 - in their native formats - allow for this nice Debug checkbox that really does show some good information I am pretty much out of luck with SugarCube so far, so I find myself littering my script parts excessively with Debug: <<print ... statements to ensure program flow is as intended.

I did read somewhere that there was a CTRL+ALT+SHIFT+D hotkey for a console but this key combination does nothing on my computer. There is some debugging aid on the Sugarcube site as well but I am too stupid to have an idea how to use it. :)

Has anyone found a way to achieve something better than tons of <<print messages in the code to have a peek at what code is being executed and what values passed variables have? Any help here would be greatly apprechiated as I find myself spending more and more time hunting elusive errors than doing something, um, productive. :)

Coming from debugging other language ... I find Twine somewhat lacking in that regard, to put it mildly. :)

Comments

  • a. If you are using Twine 1 and wish to use an external editor then you may want to look at Sublime Twee, I have not used that Sublime Text 2 plugin myself.

    b. (related to A) There is a Twine 1 command line tool named Twee which can be used to build Twine 1 story HTML files from twee text files, although you will need to download the Twine 1 source code to access it.

    c. The Debug View feature seen when running a Harlowe based story in Twine 2's Test mode is actually part of the Harlowe Story Format and not part of the Twine 2 application itself. The Twine 2 Test mode feature requires each Story Format developer to implement they own test mode.

    d. The CTRL+ALT+SHIFT+D hotkey used to activate the Web Developer tools when using a downloadable release of Twine 2 is broken in 2.0.10, you would need to downgrade to 2.0.8. to use the hotkey but that would result in Harlowe also being downgraded to 1.1.1. This is a known issue which may be fixed in the next version of Twine 2

    e. If you are using SugarCube (1 or 2) and are able to access a Web Developer tools Console then you can use State based Javascript commands to see the current (and previous) state(s) of your story variables. How you access the console depends of the brand of web-browser you are using by the F12 key is fairly common, if you are using the installable release of Twine 2.0.8 then you use the hotkey combination from point D.
  • Funnily enough, I'm currently working on a debug view, extremely similar to the one sported by Harlowe, for SugarCube 2.


    That said….
    So in Twine and Sugarcube (it's different in Harlowe, I know) I get flooded with the excessive use of << and >> and, of course, also < and > - especially in HTML "in between" statements.
    Not much can be done about the HTML-like tag syntax of SugarCube's macros, but you really shouldn't have to use much actual HTML if you don't want to as SugarCube does include a variant of the TiddlyWiki markup syntax. I'm unsure if you'll find that better, but you do have some choice.

    In a "normal" programming language you have 2 things that help you. (a) You have a "matching brace" function that will show you which { or } belongs where and you usually have a expand/collapse function for if, for and similar constructions that will allow you to quickly find the level you are looking for.
    What you describe has absolutely nothing to do with the programming language, "normal" or otherwise, and everything to do with the code editor.

    Also, it's, properly, block matching/detection, not brace matching, as code blocks are delimited by various and sundry things depending on the language in question (to name just a few: {/}, Begin/End, indention level (i.e. Python), tags, etc).

    But Twine (especially with SugarCube) defies all that - even when you copy and paste the code to a somewhat decent editor because no editor I own is capable of handling <<if>> as a token for conditions that would allow me to set up a if hierarchy so I could collapse. (Well, they might but then I haven't found out how :)
    Any half-assed decent code editor should be able to do so. Three, off the top of my head (this is not an exhaustive list), are Sublime Text, Atom, and Visual Studio Code (the name aside, this is a standalone editor, not Visual Studio proper). All three are available for the major platforms and the latter two are completely free.

    Your major problem with block matching on the tags of the <<if>> macro shouldn't be finding an editor which can do do (though you'll probably have to teach it the language), but writing your code so that the editor can actually map the blocks out in the UI. For example, code like the following should be easy to handle in a decent editor:
    Stuff
    <<if …>>
    …
    <<elseif …>>
    …
    <<else>>
    …
    <</if>>
    other stuff.
    
    But code like the following, not so much:
    Stuff <<if …>>…<<elseif …>>…<<else>>…<</if>> other stuff.
    
    The issue is that writing code like the former can be a challenge in a medium where your code interspersed within your story text—especially, when you need to maintain control over the creation of whitespace, particularly line-breaks.

    Next problem: While Twine 1 or Twine 2 - in their native formats - allow for this nice Debug checkbox that really does show some good information I am pretty much out of luck with SugarCube so far, so I find myself littering my script parts excessively with Debug: <<print ... statements to ensure program flow is as intended.
    Not to be a pedant, but…. Neither Twine 1, nor its vanilla story formats, offers such feature. Also, the debug view (I'm assuming your referring to Harlowe) comes completely from the story format, not the IDE.

    There is some debugging aid on the Sugarcube site as well but I am too stupid to have an idea how to use it. :)
    There are two:
    • <<bugreport>> opens an in-page dialog which includes various state information. Only really useful for players to submit bug reports to the developer (you).
    • <<checkvars>> opens an in-page dialog which displays the current state of the story's $variable store (State.variables). Only really useful to the developer (you).
    <<checkvars>> is the one you want (just ensure you download the correct version) and, frankly, it's not that hard to setup. To intall it, you paste the contents of the .js file into your Story JavaScript and the appropriate .css file into your Story Stylesheet. To use it, you put something like the following someplace in your code (StoryMenu is a good place) while you're developing (don't leave it there in production builds):
    <<click "Check Vars">><<checkvars>><</click>>
    
    Most of which should be clear from its documentation.
  • Ah, I learned a lot - thanks to greyelf and TheMadExile :)

    I tested out Sublime and it was ok with the plugin. Still no collapsing feature but you get vertical ruler lines which allow for much easier tracking of if elseif enif statements that span over a few pages and the various colour schemes actually offer a few choices where you can still read what is displayed on the screen AND can get info about variables, braces, etc.

    I'm going to have a look at the other two editors mentioned as well to see which works best. I'm not a Java programmer or I'd have taken a look at how to create a new editor for Eclipse and and with my main focus being Fortran, Cobol, Perl and C++ I've come to rely on editors in the past, er, decades, which proved to be quite unsuited for SugarCube's syntax.

    Debug view sounds great, by the way. Looking forward to it. :)
Sign In or Register to comment.