Debug output in UI?

[kentcdodds]

Any idea why I'm seeing this?

[johnlindquist]

It's intentional (and cleaned up a bit in the build beta.31 from a couple minutes ago). Incoming long answer which I'll move to docs 😅

Why

1. Keep consistent with terminal

I've never liked the setHint or setPlaceholder solutions to show messages, because they go against what works in the terminal.

2. Users wanted to see what's happening

The first "how do I" question I always get is "how do I see what my script is doing?". Now I can just answer "use console.log" 😉

3. It works nicely with zx

Kit has bundled zx for a while, but now it's way easier to see what it's doing since zx logs its commands to the console:

let { stdout } = await $`cd ~/projects && ls`

await arg("Pick a dir", stdout.split("\n"))

4. console.clear works

If you want to "hide" the log component:

console.log("Hello!")
let x = await arg("Log should show")
console.clear()
let y = await arg("Log is gone")
console.log(`${x} ${y}`)
await arg("Log is back")

5. Log persists between components (unless cleared)

let x = await arg("Type something")
console.log(x)
let y = await textarea({
  placeholder: "Type something else",
})
console.log(y)
let num = await arg("Pick something", [
  "one",
  "two",
  "three",
])
console.log(num)
await wait(1000)

6. Works with chalk

console.log(chalk`Request {green passed}!`)
console.log(chalk`Request {red failed}...`)

await arg()

[kentcdodds]

Neat! I didn't realize that I had console.time still in my script so it look like a bug or something 😅

[andrefagl]

Hello guys,

I'm starting to play around with kit and for my first script, I thought it would be cool to modify the Open Project script to display the current git branch or directory path in the list description.

To accomplish this, I'm running the following zx command $'git --git-dir ${currentDir}/.git branch --show-current/' and as expected the log is showing the zx stdout.

Do you know if there is a way to hide the log component while my script runs?

Thank you for your amazing work @johnlindquist ❤️

[johnlindquist]

@andrefagl Apologies for the delayed response, been moving into a new house and setting up a new office. 😅

You can disable logging in the UI with:

// Log: false

Or if you want to log something, then hide it:

console.clear() // closes the log UI until the next console.log()

[andrefagl]

Hi @johnlindquist, thanks for taking the time to help with this!

// Log: false fits perfectly well for my use case ;)

GL with the moving 💪