[SOLVED] How to access the value of a reactive output inside the browser console with jQuery?

How to access the value of a reactive output inside the browser console with jQuery?

I have an app that uses a conditionalPanel that relies on a reactive value. Here's a basic example:

library(shiny)

ui <- fluidPage(
  fluidRow(
    actionButton("button1", label = "Type 1"),
    actionButton("button2", label = "Type 2")
  ),
  conditionalPanel(
    condition = "output.selectedType == 'type1'",
    h4("Type 1 Selected")
  ),
  conditionalPanel(
    condition = "output.selectedType == 'type2'",
    h4("Type 2 Selected")
  )
)

server <- function(input, output, session) {

  val_selectedType <- reactiveVal(value = NULL)
  output$selectedType <- reactive({
    val_selectedType()
  })
  outputOptions(output, "selectedType", suspendWhenHidden = FALSE)

  observeEvent(input$button1, {
    val_selectedType('type1')
  })
  observeEvent(input$button2, {
    val_selectedType('type2')
  })
}

shinyApp(ui = ui, server = server)

In the browser's dev console, how can I use jquery to get the value of "output.selectedType"? In other words, how is the browser client able to access that value and determine that output.selectedType is 'type1' or 'type2'?

For example, I can use document.querySelector('#button1').textContent to grab the text in the button, but how would i similarly grab the value from 'output.selectedType'?

I'm trying to understand so that I can debug a more complicated app.

Solution

You can use (the not documented) Shiny.shinyapp and look at the $values object, e.g.

Shiny.shinyapp.$values

//{selectedType: "type2"}

Using jQuery, you could access the reactive value via .attr():

$(Shiny.shinyapp.$values).attr("selectedType")

//"type2"