YAML debug

Configuration Frontend
1

Not sure if this belong in this section, so please let me know and I’ll move the topic.

Let me start with what I am trying to do:

- type: 'custom:floorplan-card'
   config:
   image:
     location: /local/media/dashboards/psychrometry-chart.svg
     cache: false
  stylesheet: /local/media/dashboards/psychrometry-chart.css
  defaults:
    hover_action: hover-info
    tap_action: more-info
    rules:
      - entity: sensor.workspace_temperature
        state_action:
          action: call-service
          service: floorplan.style_set
          service_data:
            element: indicator-workspace
            style: |
             >
              var x = (parseFloat(entity.state) + 20) / 65 * 1007 - 343;
              var y = 665 - (parseFloat(states['sensor.workspace_humidity'].state) / 35 * 665) - 241; 
              return `transform: translate(${x}px, ${y}px);`;

It is not working. The element is not moving on the picture where I wanted it to be.
I would like to see what the var x and var y are, and what the return is as far as coordinates on the picture.

Any way to do that? I feel like I am blind trying to figure out why it is not working, other than the classic debug of putting some values in x, y, and rebuilding the code one line at a time.
Figured I’d ask. (embedded hardware background, not software, and definitely not YAML)

2

Just a guess but that’s JavaScript and meant to be executed by the browser so I would put the browser into its “Developer Tools” mode.

3

@123 Thanks. Down the rabbit hole. Something new.
Any chance you know how to enter a breakpoint in my code so it stops when it loads?
There are so many files when I open developer source on the browser that I have no idea where my x and x are.
I thought putting a breakpoint or something that I can trigger an Event Listener Breakpoint would at least help locate it. Doing it on load does not yield any helpful results.

EDIT: I can do the math by hand, and replace var x and y by a static number of the results, and the rest of the code works.
So I know at a minimum, it is not evaluating the expression properly.

4
5

Yeah, none of these worked for me. Not sure if it is because a YAML file with a JS snippet in it or something else.
I even tried searching for the line using the search function in DevTools, and it cannot find a match. All the way to just searching for “var x =”
I even put Debugger; in my code so it just stops when it gets there, and no breakpoint.
I put this in also:

console.log('a');
console.log('b');
debugger;
console.log('c');

I am sure I am missing something, the page is loading and the objects are there. Not sure where my actual code for that page is though