feat: Inspecting values in the console (#328)

* wip: Add inspect action for values

* fix: Fix value rows highlighting styles

* feat: inspecting props

* refactor: update getValueActionInspect to accept Inspector.ValueItem and streamline action handling

* chore: Cleanup

* feat: Support value inspecting for overlay

* Create lucky-rats-care.md

Author: thetarnav

.changeset/lucky-rats-care.md

@@ -0,0 +1,7 @@
+---
+"@solid-devtools/extension": minor
+"@solid-devtools/debugger": minor
+"@solid-devtools/frontend": minor
+---
+
+New feature: inspecting values in the console. (Closes #166)

extension/src/panel.tsx

@@ -4,8 +4,9 @@
 
 import * as s        from 'solid-js'
 import * as web      from 'solid-js/web'
-import {log}         from '@solid-devtools/shared/utils'
+import {error, log}  from '@solid-devtools/shared/utils'
 import * as frontend from '@solid-devtools/frontend'
+import * as debug    from '@solid-devtools/debugger/types'
 
 import {
     ConnectionName, Place_Name, port_on_message, port_post_message_obj,
@@ -62,8 +63,36 @@ function App() {
         }
     })
 
-    /* Devtools -> Client */
-    devtools.output.listen(e => port_post_message_obj(port, e))
+    devtools.output.listen(e => {
+        // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
+        switch (e.name) {
+        case 'ConsoleInspectValue': {
+            /*
+             `chrome.devtools.inspectedWindow.eval` runs in a devtools console
+             so the value can be additionally inspected with `inspect()`
+            */
+            let get_value = `window[${JSON.stringify(debug.GLOBAL_GET_VALUE)}]`
+            let value_id = JSON.stringify(e.details)
+            
+            chrome.devtools.inspectedWindow.eval(
+                /*js*/`typeof ${get_value} === 'function' && (() => {
+                    let v = ${get_value}(${value_id})
+                    inspect(v)
+                    console.log(v)
+                })()`,
+                (_, err?: chrome.devtools.inspectedWindow.EvaluationExceptionInfo) => {
+                if (err && (err.isError || err.isException)) {
+                    error(err.description)
+                }
+            })
+            break
+        }
+        default:
+            /* Devtools -> Client */
+            port_post_message_obj(port, e)
+            break
+        }
+    })
 
     return (
         <div

packages/debugger/src/inspector/index.ts

@@ -9,7 +9,7 @@ import {onOwnerDispose} from '../main/utils.ts'
 import {type ObservedPropsMap, ValueNodeMap, clearOwnerObservers, collectOwnerDetails} from './inspector.ts'
 import {encodeValue} from './serialize.ts'
 import {type StoreNodeProperty, type StoreUpdateData, observeStoreNode, setOnStoreNodeUpdate} from './store.ts'
-import {type InspectorUpdate, type InspectorUpdateMap, PropGetterState} from './types.ts'
+import {GLOBAL_GET_VALUE, type InspectorUpdate, type InspectorUpdateMap, PropGetterState} from './types.ts'
 
 export * from './types.ts'
 
@@ -24,13 +24,22 @@ export function createInspector(props: {
     resetInspectedNode: VoidFunction
     emit:               OutputEmit
 }) {
+    
     let lastDetails: Mapped.OwnerDetails | undefined
     let inspectedOwner: Solid.Owner | null
     let valueMap = new ValueNodeMap()
     const propsMap: ObservedPropsMap = new WeakMap()
     /** compare props object with the previous one to see whats changed */
     let checkProxyProps: (() => InspectorUpdateMap['propKeys'] | null) | null
 
+    /*
+     For the extension for inspecting values through `inspect()`
+    */
+    function getValue(id: ValueItemID): unknown {
+        return valueMap.get(id)?.getValue?.()
+    }
+    window[GLOBAL_GET_VALUE] = getValue
+
     // Batch and dedupe inspector updates
     // these will include updates to signals, stores, props, and node value
     const {pushPropState, pushValueUpdate, pushInspectToggle, triggerPropsCheck, clearUpdates} =
@@ -156,11 +165,12 @@ export function createInspector(props: {
                 })
 
                 props.emit('InspectedNodeDetails', result.details)
-                valueMap = result.valueMap
-                lastDetails = result.details
+
+                valueMap        = result.valueMap
+                lastDetails     = result.details
                 checkProxyProps = result.checkProxyProps || null
             } else {
-                lastDetails = undefined
+                lastDetails     = undefined
                 checkProxyProps = null
             }
 
@@ -186,5 +196,9 @@ export function createInspector(props: {
             node.setSelected(selected)
             pushInspectToggle(id, selected)
         },
+        consoleLogValue(value_id: ValueItemID): void {
+            // eslint-disable-next-line no-console
+            console.log(getValue(value_id))
+        }
     }
 }

packages/debugger/src/inspector/types.ts

@@ -68,3 +68,14 @@ export type InspectorUpdateMap = {
 export type InspectorUpdate = {
     [T in keyof InspectorUpdateMap]: [type: T, data: InspectorUpdateMap[T]]
 }[keyof InspectorUpdateMap]
+
+/*
+ For the extension for inspecting values through `inspect()`
+*/
+export const GLOBAL_GET_VALUE = '$SdtGetValue'
+
+declare global {
+    interface Window {
+        [GLOBAL_GET_VALUE]?: (id: ValueItemID) => unknown
+    }
+}

packages/debugger/src/main/index.ts

@@ -10,7 +10,7 @@ import {createStructure, type StructureUpdates} from '../structure/index.ts'
 import {DebuggerModule, DEFAULT_MAIN_VIEW, DevtoolsMainView, TreeWalkerMode} from './constants.ts'
 import {getObjectById, getSdtId, ObjectType} from './id.ts'
 import setup from './setup.ts'
-import {type Mapped, type NodeID} from './types.ts'
+import {type Mapped, type NodeID, type ValueItemID} from './types.ts'
 
 export type InspectedState = {
     readonly ownerId: NodeID | null
@@ -37,6 +37,7 @@ export type InputChannels = {
     ResetState: void
     InspectNode: {ownerId: NodeID | null; signalId: NodeID | null} | null
     InspectValue: ToggleInspectedValueData
+    ConsoleInspectValue: ValueItemID
     HighlightElementChange: HighlightElementPayload
     OpenLocation: void
     TreeViewModeChange: TreeWalkerMode
@@ -280,6 +281,9 @@ function createDebugger() {
         case 'InspectValue':
             inspector.toggleValueNode(e.details)
             break
+        case 'ConsoleInspectValue':
+            inspector.consoleLogValue(e.details)
+            break
         case 'OpenLocation':
             openInspectedNodeLocation()
             break

packages/frontend/src/App.tsx

@@ -16,7 +16,7 @@ export const App: s.Component<{headerSubtitle?: s.JSX.Element}> = props => {
         >
             <header class="p-2 flex items-center gap-x-2 bg-panel-bg b-b b-solid b-panel-border text-text">
                 <div class="flex items-center gap-x-2">
-                    <ui.Icon.SolidWhite class="w-4 h-4 text-disabled" />
+                    <ui.icon.SolidWhite class="w-4 h-4 text-disabled" />
                     <div>
                         <h3>Solid Developer Tools</h3>
                         {props.headerSubtitle && (
@@ -80,7 +80,7 @@ const Options: s.Component = () => {
             }}>
             <summary
                 class={`${ui.toggle_button} rounded-md ml-auto w-7 h-7`}>
-                <ui.Icon.Options
+                <ui.icon.Options
                     class="w-4.5 h-4.5"
                 />
             </summary>
@@ -97,7 +97,7 @@ const Options: s.Component = () => {
                         class='
                             flex items-center gap-1 p-1 rounded-md outline-none
                             text-text transition-colors hover:bg-orange-500/10 focus:bg-orange-500/10'>
-                        <ui.Icon.Bug class='w-3 h-3 mb-px text-orange-500 dark:text-orange-400' />
+                        <ui.icon.Bug class='w-3 h-3 mb-px text-orange-500 dark:text-orange-400' />
                         Report a bug
                     </a>
                     <a
@@ -108,7 +108,7 @@ const Options: s.Component = () => {
                         class='
                             flex items-center gap-1 p-1 rounded-md outline-none
                             text-text transition-colors hover:bg-pink-500/10 focus:bg-pink-500/10'>
-                        <ui.Icon.Heart class='w-3 h-3 mb-px text-pink-500 dark:text-pink-400' />
+                        <ui.icon.Heart class='w-3 h-3 mb-px text-pink-500 dark:text-pink-400' />
                         Support the project
                     </a>
                 </div>
@@ -141,4 +141,4 @@ const Options: s.Component = () => {
 //       View: {view.get().toUpperCase()}
 //     </button>
 //   )
-// }
+// }

packages/frontend/src/SidePanel.tsx

@@ -77,15 +77,15 @@ export function createSidePanel() {
                                     class={action_button}
                                     onClick={openComponentLocation}
                                 >
-                                    <ui.Icon.Code class={action_icon} />
+                                    <ui.icon.Code class={action_icon} />
                                 </button>
                             )}
                             <button
                                 title="Close inspector"
                                 class={action_button}
                                 onClick={() => setInspectedOwner(null)}
                             >
-                                <ui.Icon.Close class={action_icon} />
+                                <ui.icon.Close class={action_icon} />
                             </button>
                         </div>
                         <ui.ToggleTabs

packages/frontend/src/index.tsx

@@ -1,4 +1,4 @@
 export {createDevtools} from './controller.tsx'
 export type {OutputEventBus, InputEventBus, DevtoolsOptions as DevtoolsProps} from './controller.tsx'
-export {Icon, MountIcons} from './ui/index.ts'
+export {icon as Icon, MountIcons} from './ui/index.ts'
 export type {IconComponent} from './ui/index.ts'