DEV Community

Sergio Gurillo Corral
Sergio Gurillo Corral

Posted on

1

Token Devtools Inspector πŸ‘€πŸ”‘

πŸ™‹πŸ»β€β™‚οΈ Have you ever found yourself copying the JWT of a request in Chrome? Whether it's to use it in Postman, inspect it in JWT, or any other task, and? Is it something you do frequently? πŸ€”

I do, and truth be told, the process can become a pain after so many times:

  1. open Chrome's DevTools πŸ› οΈ
  2. Go to the Network panel πŸ”
  3. Search for the request you are interested in πŸ•΅οΈ
  4. Open the Headers section πŸ“œ
  5. Select the entire JWT (and keep your fingers crossed that you don't copy it wrong) 🀞
  6. Finally, copy it πŸ“‹

Now, imagine having to do this several times a day, every day! πŸ’€

Luckily, I've created a Chrome extension that makes this a lot easier: 🌟 Token Dev Tools Inspector 🌟

With just a few clicks, streamline token extraction in Chrome DevTools:

  1. Open Chrome DevTools πŸ› οΈ
  2. Locate the Token Inspector panel (similar to the Console, Network or Application panels) πŸ”
  3. Find your tokens effortlessly! πŸš€

Preview of Token dev tools inspector

As you can see, it goes straight to the point, simple but functional UI, also with direct access to jwt.io if you want to inspect the token content.

Are you worried about the privacy of a third party reading your tokens? I understand, that's why the project is Open Source so you can verify that the data doesn't go outside!
https://github.com/Guuri11/token-inspector

If you want to give it a try, here is the link to install the extension with all its information:
https://chrome.google.com/webstore/detail/token-devtools-inspector

I hope you like it, and as I said, the project is Open Source, so don't hesitate to give your feedback if you want!

Happy new year! 🎊

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay