An introspection tool for RequireJS. It dives into the the internals of RequireJS to show you information on the modules you load and flags some potential problems.
This is still under development. See the issues area for the features that it may support in the future.
See the tests directory for examples of the items xrayrequire checks.
Place it as a script tag right after require.js:
<script src="require.js"></script>
<script src="xrayquire.js"></script>If you only want to load it during certain types of debug scenarios, you could
rely on passing a ?xray to the page, and then dynamically insert the script
tag for xrayquire.js like so:
<script src="require.js"></script>
<script>
if (location.search.indexOf('xray') !== -1) {
document.write('<' + 'script src="xrayquire.js"></' + 'script>');
}
</script>You can use this link to download the latest master version:
https://raw.github.com/requirejs/xrayquire/master/xrayquire.js
or use volo to fetch it for you:
volo add xrayquire
Checks for module IDs that differ only by case, which indicates a probable typing error, or something that will lead to problems on case insensitive operating systems.
There are some information views about the modules that were loaded. These views are shown by popping a new window to a data: URL that has the display.
These displays are still very new, need lots of work.
Also note that your browser may block the new windows from being shown, so be sure to allow the popup if the browser gives the popup supression warning.
To see the dependency tree for all the modules loaded, enter the following in the browser developer tool's console:
xrayquire.showTree();
Or to open it in an iframe directly...
xrayquire.showTree(null, true);
To show cycles (circular dependencies) in the modules loaded, enter the following in the browser developer tool's console:
xrayquire.showCycles();
MIT