DEV Community

Sergio Gurillo Corral
Sergio Gurillo Corral

Posted on

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! ๐ŸŽŠ

Top comments (0)