Search code examples
debuggingfirefoxsvgfirefox-developer-tools

Is there any way to get Mozilla to show the SVG source?


I am debugging an application which at some points generates an SVG diagram. Currently the SVG is malformed in some way. I would like to see the SVG source, that is, the text of the SVG diagram, which is XML.

The mime-type header is 'image/svg+xml' which is correct for an SVG diagram. The main Mozilla browser shows a parsing error.

When I go into the developer mode, the network tab, I can see the request for the SVG, I can see the headers that were sent, and the headers that came back, but when I attempt to view the response content, it attempts once again to render the graphic, which it can't, so it just shows a "broken image" icon.

Is there any way to convince Mozilla to simply show the XML of the response body without attempting to render it as an image? Any way of turning off the image rendering in developer mode?


Solution

  • There are two ways you can get the source in Firefox:

    1. Copy the response Right-click the request > Copy > Copy Response copies the SVG, which you can then paste in your favorite editor and check what's wrong. Copy the SVG response

    2. View source in browser Right-click the request > Open in New Tab. Open SVG in new tab

      That should already provide you with an error message like this one: SVG error

      To see the source right-click within the tab > View Page Source or press Ctrl+U.