Instantly Launch Chrome Dev Tools with Script Kit
Many developers use Chrome's Dev Tools as a playground for testing out data and JavaScript features. Script Kit enables you to launch Chrome Dev Tools instantly by simply using the dev method. Any data you pass into dev will show up in the console so you can inspect and play with the data in any way that you want.
// Name: Dev Tools Demo
import "@johnlindquist/kit"
let response = await get(
`https://api.github.com/users/johnlindquist/repos`
)
dev(response.data)
John Lindquist: [0:00] We'll create a DevTools Demo script. All we need to do to run DevTools is just type dev.
[0:07] We'll save our script and now come back and run it, hit Enter, and you can see it instantly launches DevTools. I can type something and do whatever actions on it you would do when normally playing with DevTools. I'll hit Command-W to close it.
[0:23] We can also pass data into this. If I pass a message of "Hello," and I'll come back and run this again, hit Enter, you'll see that object is on here. If you want to reference that object, just type x. It's on the window as x. x.message would be "Hello." You can modify and play with that object there.
[0:44] What this enables is stuff like await get(). We'll get some repos. This will be the response. Then, in here, we can run dev on the response.data. Now we'll run our script again, dev-tools-demo. You can see the response is an array of 30, with all of the repos. I can access x, and I could do xmap and any operation you would normally do.