Debugging Encoded Text
Validating encoded strings is a basic but important part of our debugging workflow these days. I cannot count the number of times I have found myself looking at a URL-encoded string only to be suddenly unsure how percentage signs are supposed to be represented?
I have been a web developer for years, but I can never remember what the URL-encoded version of a question mark might be, or how to encode or decode an equal sign from my memory. Encoding and decoding are also necessary when handling JSON Web Tokens (JWT) in authentication workflows, you may need to decode and verify claims data passed between parties.
In the latest Visual Studio preview we are supporting a new Debugger Text Visualizer experience that allows you to decode the following text with ease.
- Base64 Encode
- Base64 Decode
- URL Encode
- URL Decode
- JWT Decode
Let’s check out a couple of examples. Here I am presented with URL-encoded text, the debugger is paused, and this gives me the opportunity to hover over a variable and click View Text which brings up the Text Visualizer. I can then select the decoding option (URL Decode) from the String manipulation drop-down menu.
More commonly, I find myself validating and parsing JWT to check the payload data being passed between services. Again, the debugger is paused in the following gif, and by hovering over the variable, and clicking View Text I bring up the Text Visualizer. This time I selected the JWT Decode option, which then presents the decoded Header and Payload data.
Please share your feedback
This idea originated from a recent hackathon and has become one of my favorite features. We hope this will help you be more productive when debugging and diagnosing issues with your encoded data. As we continue to work on this feature, we would really appreciate your feedback, please report any issues so we can improve the experience.
Light
Dark
8 comments
Any chance we can see those GIFs full screen?
If you right click then “Open Image in New Tab” or click the gif and right click then “Save Image As” then open it on your computer the GIFs will be larger.
Aha, the “Open Image in New Tab” context men option only appears when I’m playing the gif! I knew I’d seen it in the past which was why I was surprised not to see it when I right clicked the static image.
Nice one, thanks!
Hopefully those string manipulations are extensible, so people can write their own?
Great tips. I was looking for an answer to this question.
Came here to say the very same thing! There are so many other use cases for a lovely utility like this. It would be awesome if they made it so you could easily import/export custom Expressions/Manipulations as well.
Thats a great suggestion. Unfortunately, its not extensible right now.