The Source Maps Monitor tool is used to monitor the source maps that will be used to generate the original source code that is being requested by the webpage. When a website requests files from the server, the server does not send the original code but instead minifies it to compress the file, improving loading time. The webpage uses source maps to change the minified code to your original code.
Benefits of Source Maps Monitor Tool
The benefits of the tool are:
- List all source maps: You get a list of all the various files, such as HTML, CSS, and JS files, on the webpage. You get information about the URL, SHA 256 hash, and load status.
- Expandable List: The listed file URLs can be expanded to display the source map that is commented on in the listed file.
- Monitor Source Maps: You view which source files have source maps and check the loading status to decide whether maps were loaded properly.
How to open the Source Maps Monitor Tool
The tools can be opened by following the following steps:
Step 1: On the webpage, right-click and select Inspect. The developer tools will open.
Step 2: In the developer tools, click the add button, and then select Source Maps Monitor from the list.
Opening the tool
About Source Maps Monitor Tool
The tool just displays the file’s origin, which may have a source map URL in its comment. The below pictures are various frames of the webpage, with the GFG one being the main one. When you expand it, you get all the requested file URLs, SHA-256 hashes, and load statuses. These listed files are also expandable to view the sourceMappingURL comment loader status.
GFG site maps
If you want to check all the source maps used by the webpage, then Edge provides the Source Maps Monitor Tool to view all the source maps used for converting minified code received from the server to the actual source code.