Hello
{{ hour < 12 ? 'Good morning' : 'Good afternoon' }}
```
Server and browser both render "Hello" first; the greeting appears once the component is mounted.
## Check the state in Vue DevTools
Vue DevTools comes as a browser extension, which adds a Vue panel to the developer tools, and as the `vite-plugin-vue-devtools` package, which draws the same panels inside your page during `vite dev`. The extension needs nothing from your project beyond a development build: a production build leaves out the code that connects Vue to DevTools, so the panels stay empty on your live site.
Version 8.0 was published on 27 July. Its [release notes](https://github.com/vuejs/devtools/releases/tag/v8.0.0) list two breaking changes, both in the Vite plugin: Vite versions below 6 are no longer supported, and the bundled `vite-plugin-inspect` was bumped.
Two panels do most of the work. **Components** shows the tree as Vue sees it, not the DOM. Click a component and the pane beside it lists its props, its setup state, its computed values and anything it injected, live. Edit a value there and the page updates. That answers the first real question: is the state wrong, or is the template ignoring it? The inspector button lets you click an element on the page to jump to its component, and the open-in-editor button opens the file.
**Timeline** records what happened, in order, in four layers: mouse, keyboard, component events and performance. It records nothing until you press its record button and enable the layers you need (recording slows a large app). The performance layer lists each render with its component and duration, so something that updates twice shows as two entries, and a slow form shows which render took the time.
## Log the value, not the ref
`console.log(count)` prints `RefImpl {…}` with the number buried in `_value`, which makes a working ref look broken. Log `count.value`. For a reactive object, `console.log(state)` prints a `Proxy`, and worse, the console shows the object as it is when you expand it, not as it was when you logged it. Unwrap and snapshot:
```
import { toRaw } from 'vue'
console.log(count.value)
console.log(structuredClone(toRaw(state)))
```
`toRaw()` returns the plain object behind the proxy; `structuredClone()` copies it at that instant (it refuses objects that hold functions). For something that changes over time, a `watch` with the values in the callback beats scattered logs, because it tells you what changed and when. In a search component with `query` and `results` refs:
```
import { watch } from 'vue'
watch(
() => [query.value, results.value.length] as const,
([q, n]) => console.log(`query ${JSON.stringify(q)} gave ${n} results`),
)
```
Chrome's console can also show refs unwrapped: enable custom formatters in the developer tools settings, and Vue's development build registers one.
## Pause the code with a breakpoint
Vite serves source maps in development, so the browser's Sources panel shows your `.vue` files rather than the compiled output. Press Cmd+P (Ctrl+P on Windows and Linux) inside the developer tools, type the component's file name, and click a line number in the `