Debugging

There are two tools you can use to check your code.

• The console-log action command.
• Special config settings for debugging.
• The Active CSS DevTools extension for Chrome.

If your config isn't loading, or you are not seeing your command or declaration appear in Active CSS DevTools, then it is likely that you have some sort of typo somewhere. The Active CSS core runs a very minimal check on initialising, so it doesn't pick up all possible errors that could be wrong with your syntax. There is basic error reporting in the runtime, but Active CSS won't show errors to handle all the bugs you may come across, such as trying to display a missing attribute reference, as these things may be coded intentionally. If Active CSS showed these kinds of errors, you would be severely limited in possibilities in what you could do with the code. So you have to bear in mind that with great power comes great potential for "invisible" bugs. In practical terms it doesn't appear to be an issue, but the following is a list of suggestions for debugging.

Check for typos first

The first thing you should do if something isn't working in your code, is always check in your code for typos first. You may have got your code basically right, but it is possible that you just typed it in wrong. Learning a new language is doubly-hard, because there is uncertainty on the language itself in addition to the inevitable typos. So always check your syntax for typos first - you could just have a typo there that is stopping it from working. Check for missing semi-colons, missing events, missing dots, missing curly brackets, incorrect camel-case on "after" events, unescaped double-quotes within double-quotes, other typos, etc. If you are using conditionals, check that any conditional reference you have is positioned correctly and that the syntax is correct.

Check your syntax

Check your syntax again. It's worth repeating this twice. Especially if you are sure your code should work.

Are you using the right selectors? Are you putting a dot before your class references? Should you be referencing your element by ID rather than class or vice versa? Check over these kinds of things.

Check you are looking at it correctly

Sometimes when you are trying to track down a bug, it isn't actually a bug. You've coded it to do something, and it is doing it perfectly fine. It's worth checking that you're looking at the right area of the code, or that there is in fact a problem, otherwise this can be one of the more lengthy scenarios to debug - you're attempting to debug a bug that isn't actually there, which will technically take forever to debug, or until you give up. This method of attempting to find a bug that isn't there though can actually be useful for finding disrelated bugs or can lead to optimizing code, so it isn't always a waste of time :) Unless you are under pressure to get out a product, it is rarely a bad idea to take a fine-tooth comb to your code to remind yourself what it does.

The next options are in no particular order.

console-log

Use console-log at different places in your config to see debug output at any specific time. Note that is it "console-log" and not "console.log".

"console-log: variables;" is useful for getting the state of all the Active CSS variables on the page at any one time.

"console-log: config;" lets you inspect how your config (except components and custom conditionals) is stored internally. Some of it may look weird due to internal escaping until using certain things in runtime, but it can uncover things that should be there but aren't.

"console-log: components;" lists out component details.

"console-log: conditionals;" lists out any custom conditionals.

"console-log: target;" lets you inspect the properties of the target selector at the place the console-log is being run.

'console-log: "getting here";' is useful if you just want to check that an action is being reached. If it is being reached, then your console-log will run too.

Check command sequence

Are your commands running in the correct sequence? Active CSS runs target selectors and action commands in the sequence they are found in the config (as of version 2.3.0).

Check you are using the commands correctly

Look over the documentation on this website to make sure you are using the commands correctly. If you think something should be in the docs but isn't, or you think something needs additional explaining in order to be understandable, then please let us know.

General debugging tip: Never ignore a minor weirdness

If you ever see something strange occasionally appear, but not always, or something happens that is unexpected and you put it down to lack of coffee or something, never ignore it, no matter how much you think you can get away with it. Speaking from decades of experience, this could be a great opportunity to find an underlying basic error in your code. More often than not, the bug with the tiniest of effects can lead to discovering one of the biggest and major impactful flaws in your system, and with a little bit of trying to repeat the error, and then writing a fix you will make your system more stable and you will feel more confident about it. Try and develop a spidey-sense about these tiny pointers, insist on more testing until you are happy, and you won't go wrong.

Check DevTools console

There might be an error in the console that indicates what has gone wrong.

Check DevTools Events pane.

Check the Active CSS Events pane in the Elements section in DevTools and see if there is anything weird going on. Then check the config file directly.

Check DevTools Event monitor panel.

Check the Active CSS Event monitor in DevTools and see if there is anything weird going on. You can test specific events in real-time and see what is going on in there. You also get a full view of your config, so you can spot anomalies there. Then check the config file directly around the relevant parts.

Config settings

If you can't see your declaration or command in Active CSS DevTools, or you don't have the extension, and you can't quickly find a typo in your code, there are several config initialization settings that you can use to inspect the Active CSS config in the regular DevTools console.

The setting you use is debugMode, and you use it like this:

document.addEventListener('DOMContentLoaded', function(e) {
    ActiveCSS.init({
        configLocation: '/activecss-config.txt',
        debugMode: 'parser'
    });
});

These config options will output results into the regular DevTools console. You can drill into the config objects and find out how Active CSS is storing your code. If you cannot find a command or declaration in these objects, there may be a typo somewhere around that point in your config that you may not have spotted on first glance.

Lazy loading config, and adding new config with load-config will additionally output these results, so you may see more than one object output in the console.

Here are the options you can use with debugMode:

debugMode: 'parser'

In Active CSS, the first thing that happens is your config is loaded up and placed into a massive array. If you have a breaking syntax error in your code, then check the parser for anything strange. You can drill down into the result object in the DevTools console and inspect.

debugMode: 'config'

debugMode: 'conditionals'

debugMode: 'components'

After Active CSS has run the parser, it then analyses and breaks down the array into manageable chunks for real-time use. There are three types of code available for inspection.

The config option will output the event selectors, target selectors and the actions. If the target selector is the event selector, the target selector will be found under the '&' item. The conditionals option will output only the conditionals. The components option will output only the components.

These can be drilled into, so you can see what is being stored in run-time Active CSS.

Running multiple options at once

If you want to output more than one config option, type in the options separated with a space, like "config conditionals components".

Last resort

Get in contact with us via our support form. Or use stack overflow, although as this is a really new language there is unlikely to be much help there yet. So send us a support message explaining the problem, and we'll get to it as soon as we can.