Write a Script with Script Kit to Browse Hacker News

Instantly Launch Chrome Dev Tools with Script Kit

Control Chrome From Script Kit using Apple Events

Manipulate Images With Drag and Drop in Script Kit

List and Launch Dev Projects with Script Kit

Apply Title Case to Text Anywhere Using Script Kit

Save Chrome Tabs in a Markdown File and Take Notes with Script Kit

Scrape a Website on a Schedule with Script Kit

Build a Multi-Tab Todos App in Script Kit

Script Kit Showcase for Optimizing Your Everyday Workflows

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.

[Install dev-tools-demo](https://scriptkit.com/api/new?name=dev-tools-demo&url=https://gist.githubusercontent.com/johnlindquist/6dcaf61e92819114c7478fefd24a71f8/raw/c2e69bfcff581f7929b881638627201b549d23f1/dev-tools-demo.js")

```js
// Name: Dev Tools Demo

import "@johnlindquist/kit"

let response = await get(
  `https://api.github.com/users/johnlindquist/repos`
)
dev(response.data)
```


https://app.egghead.io/api/v1/lessons/script-kit-instantly-launch-chrome-dev-tools-with-script-kit/subtitles

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.

Instantly Launch Chrome Dev Tools with Script Kit

Share this video with your friends

Course

Script Kit Showcase for Optimizing Your Everyday Workflows