{"id":341152,"date":"2023-04-27T14:15:29","date_gmt":"2023-04-27T13:15:29","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=dotnet&p=341152"},"modified":"2025-07-24T12:21:39","modified_gmt":"2025-07-24T11:21:39","slug":"html-xml-json-and-jwt-visualizers-in-rider-2023-1","status":"publish","type":"dotnet","link":"https:\/\/blog.jetbrains.com\/en\/dotnet\/2023\/04\/27\/html-xml-json-and-jwt-visualizers-in-rider-2023-1","title":{"rendered":"HTML, XML, JSON, and JWT Visualizers in Rider 2023.1"},"content":{"rendered":"\n

As a developer, you deal with many data formats, some of which are friendly to humans while others are optimized for computers. It\u2019s not often you need to look directly at complex data formats, but it can help when debugging nagging problems in your codebase. If you\u2019ve been building applications for any time, you\u2019ve likely run into the following commonly-used data formats: HTML, XML, JSON, JSON Web Tokens (JWT), and URLs<\/strong>. <\/p>\n\n\n\n

With the release of JetBrains Rider 2023.1<\/a>, we\u2019ve introduced a new set of debugging visualizers<\/strong> to help you make sense of the data in your application\u2019s memory. Each visualizer has two ways to represent your current data. The first method is to show you an interpretation of your data that is easier to read. The second is to show you the raw value. While some previously mentioned formats straddle the line of human-readable, such as XML, URL, and JSON, the other formats of HTML, JWT, and URLs can be difficult to read.<\/p>\n\n\n\n

Let\u2019s look at each visualizer and how JetBrains Rider<\/a> displays the values.<\/p>\n\n\n\n

Example application<\/h2>\n\n\n\n

Here\u2019s a sample console application you can copy to follow along in your instance of JetBrains Rider 2023.1:<\/p>\n\n\n\n

Console.WriteLine(\"JetBrains Rider \u2764\ufe0f Visualizers\");\nvar http = new HttpClient();\n\n\/\/ HTML\nvar html = await http.GetStringAsync(\"https:\/\/lp.jetbrains.com\/csharp-for-babies\/\");\n\n\/\/ XML\nvar xml = await http.GetStringAsync(\"https:\/\/www.jetbrains.com\/sitemap.xml\");\n\n\/\/ JSON\nvar json = await http.GetStringAsync(\"https:\/\/www.govtrack.us\/api\/v2\/role?current=true&role_type=senator\");\n\n\/\/ JWT\nvar jwt = \"eyJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiSm9lIENvZGVyIn0.5dlp7GmziL2QS06sZgK4mtaqv0_xX4oFUuTDh1zHK4U\";\n\n\/\/ URL-Encoding\nvar urlEncoded = \"%5BJetBrains%20Rider%5D%2C%20It%27s%20so%20great%21\";\n\nConsole.WriteLine(\"? Have Fun!\");\n<\/pre>\n\n\n\n
When debugging the code, you can trigger any visualizer by clicking the view<\/strong> link. The view<\/strong> link can be found in multiple places, including watches and locals in the debugger window, by clicking the inlay hint value or hovering over a symbol. A visualizer is automatically chosen for you based on the contents of your variable, so there\u2019s no need to fiddle around.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
HTML Visualizer<\/h2>\n\n\n\n
The first visualizer you\u2019ll be looking at is the HTML visualizer. The HTML <\/strong>tab can render the HTML but does not make any requests to secondary resources such as stylesheets, images, or JavaScript files. On-page assets are rendered, such as inline SVGs and images.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You can always view the raw value of the variable by clicking on the Raw <\/strong>tab. While the value is untouched by JetBrains Rider, the visualizer will still provide you with syntax highlighting. The addition of syntax highlighting can make it easier to see if there\u2019s any broken syntax in your payload.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
XML Visualizer<\/h2>\n\n\n\n
HTML and XML are very similar formats visually, but XML is a stricter syntax. Using the XML visualizer, you\u2019ll have access to the XML editing capabilities in JetBrains Rider, including downloading XML schemas to validate the current value. Structural issues will also be shown in the visualizers as problems. You can also use the Raw<\/strong> tab to confirm your original payload.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
JSON Visualizer<\/h2>\n\n\n\n
JSON is the language of the web-based protocol frameworks and likely the most commonly used data format of developers worldwide. Like the XML visualizer, you can access a JSON editor showing hints, warnings, and errors when looking at a JSON data variable. Additionally, JSON is formatted to make it easier to read and comprehend.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
JWT Visualizer<\/h2>\n\n\n\n
JWTs are an open standard for representing claims securely between parties and are the backbone of many modern auth systems. You\u2019ll typically need to inspect these base64 encoded values to determine user access issues. Commonly, you would have to use a secondary tool, such as JWT.io<\/a>, to diagnose issues. With the new JWT visualizer, JetBrains Rider can decode the value into human-readable JSON.<\/p>\n\n\n\n
Take the following code:<\/p>\n\n\n\n
\/\/ JWT\nvar jwt = \"eyJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiSm9lIENvZGVyIn0.5dlp7GmziL2QS06sZgK4mtaqv0_xX4oFUuTDh1zHK4U\";\n<\/pre>\n\n\n\n
And now it\u2019s decoded form in the visualizer.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
URL Encoding Visualizer<\/h2>\n\n\n\n
URL encoding is a necessary part of passing complex information from client to server without breaking the structural integrity of a URL. As a web developer, you\u2019re likely familiar with the typical encoded value of %20<\/code> (space), but there are so many more values that it\u2019s unreasonable to remember them all. With the new URL Encoding visualizer, you can see the decoded value of an encoded string. <\/p>\n\n\n\n
For example, the following encoded value has several unique characters that would break a URL if they were in their original forms.<\/p>\n\n\n\n
\/\/ URL-Encoding\nvar urlEncoded = \"%5BJetBrains%20Rider%5D%2C%20It%27s%20so%20great%21\";\n<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
As you can see, these visualizers can help you work with commonly used data formats. We\u2019d love you to try them out in your current workflows and give us feedback. If there are other visualizers you\u2019d like to see us add to JetBrains Rider, please let us know in the comments below. As always, thank you for reading.<\/p>\n\n\n\n
image credit: Julian Hochgesang<\/a><\/sub><\/em><\/p>\n","protected":false},"author":1079,"featured_media":341155,"comment_status":"closed","ping_status":"closed","template":"","categories":[4992,1401],"tags":[211,198,1178,8107,1978,2002],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/dotnet\/341152"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/dotnet"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/types\/dotnet"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/users\/1079"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/comments?post=341152"}],"version-history":[{"count":9,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/dotnet\/341152\/revisions"}],"predecessor-version":[{"id":585125,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/dotnet\/341152\/revisions\/585125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/media\/341155"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/media?parent=341152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/categories?post=341152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/tags?post=341152"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/en\/wp-json\/wp\/v2\/cross-post-tag?post=341152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}