Card Debug Logging - thlucas1/spotifyplus_card GitHub Wiki

This topic walks you through how to enable / disable debug logging for the Card. This is useful for both tracking down issues with the card, as well as seeing how things flow under the covers so to speak.

Assumptions
The following assumptions are made for this example:

  • Google Chrome browser installed.
    I am sure other browser types (FireFox, MS Edge, etc) support the same type of developer tools, but for this illustration I will use the Google Chrome Developer Tools.
  • Card is properly installed, either through HACS or manually.

Use the following index to get to where you want to be.

Display Card Version Information

Use the following steps to enable front-end debugging for the card:

  1. Bring up the HA UI to the Spotify Card display.

  2. Press F12 to show the Chrome Developer Tools slide out area (to the right).

  3. Press F5 to reload the page (ensures Card version is shown in the developer tools area).
    Your developer tools area should look something like this:

  1. If properly installed, the card version information will be displayed as a dropdown message area. It will look like this (with different version number of course):
    SPOTIFYPLUS-CARD 1.0.64 IS INSTALLED

  2. Click the expand dropdown triangle (to the left of the SPOTIFYPLUS-CARD ... IS INSTALLED entry) to display more information about the card. This will display useful links to card documentation, as well as card debug logging console commands.

Enable Card Debug Logging

Use the Display Card Version Information section to display card debug logging console commands.

Use the following steps to enable debug logging for the card:

  1. Copy the following command that will be used to enable front-end debug logging:

    localStorage.setItem('debug', 'spotifyplus-card:*');

  2. Paste the command in the developer tools command prompt (the > symbol) and press enter.

Debug logging is now enabled. Note that debug logging will not take effect until you refresh the browser page. Press F5 to reload the page; you should now start seeing debug log messages for the card.

Finding Debug Log Messages

If you haven't done so, use the Enable Card Debug Logging section to enable card debug logging.

At this point, you simply use the browser developer tools Find dialog to find debug log information.
In the following example, we will find the call made to the check_track_favorites service.

  1. Press CTL-F to display the Find command prompt.

  2. Enter check_track_favorites in the find command prompt area and press enter.

  3. You should see a call made to the check_track_favorites service, including all of it's parameters. You can also keep scrolling to display the results of the service call as well.
    It will look something like this (your details will vary of course):

And that's it really - just repeat the find command to find other information, or scroll through the log to get a feel for how things work.

Disable Card Debug Logging

Use the Display Card Version Information section to display card debug logging console commands.

Use the following steps to disable debug logging for the card:

  1. Copy the following command that will be used to disable front-end debugging:

    localStorage.setItem('debug', '');

  2. Paste the command in the developer tools area prompt (to the right of the > symbol) and press enter.

Debug logging is now disabled. Note that debug logging will not stop until you refresh the browser page. Press F5 to reload the page; you should now stop seeing debug log messages for the card.