├── .gitignore ├── README.md ├── config.js ├── index.js ├── package.json └── systemjs-debugger-logs-example.png /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | jspm_packages/* 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | SystemJS Debugger 2 | ================= 3 | 4 | Enables debugging SystemJS (JSPM) configuration. 5 | 6 | After import it will keep a record of all imports and their information. You can log them in a readable way to a console using `logImports()`. You can also visualize them in your own way by retrieving the imports data using `getImports()`. 7 | 8 | Usage 9 | --------------- 10 | ``` javascript 11 | // import debugger first 12 | System.import('systemjs-debugger').then(function(systemJSDebugger) { 13 | // log imports when import succeeds or fails 14 | systemJSDebugger.loggedImport('app.js') 15 | }); 16 | ``` 17 | Manually calling logImports() 18 | ``` javascript 19 | // import debugger first 20 | System.import('systemjs-debugger').then(function(systemJSDebugger) { 21 | System.import('app.js') 22 | .then(function() { 23 | // log imports after import 24 | systemJSDebugger.logImports(); 25 | window.onerror = null; 26 | }) 27 | .catch(function(err) { 28 | console.error(err); 29 | // log imports on errors 30 | systemJSDebugger.logImports(); 31 | }); 32 | // log imports on errors 33 | window.onerror = systemJSDebugger.logImports; 34 | }); 35 | ``` 36 | Example output 37 | --------------- 38 | ![Example output](https://github.com/peteruithoven/systemjs-debugger/raw/master/systemjs-debugger-logs-example.png) 39 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | baseURL: "/", 3 | defaultJSExtensions: true, 4 | transpiler: "babel", 5 | babelOptions: { 6 | "optional": [ 7 | "runtime", 8 | "optimisation.modules.system" 9 | ] 10 | }, 11 | paths: { 12 | "github:*": "jspm_packages/github/*", 13 | "npm:*": "jspm_packages/npm/*" 14 | }, 15 | 16 | map: { 17 | "babel": "npm:babel-core@5.8.22", 18 | "babel-runtime": "npm:babel-runtime@5.8.20", 19 | "core-js": "npm:core-js@1.0.1", 20 | "github:jspm/nodelibs-process@0.1.1": { 21 | "process": "npm:process@0.10.1" 22 | }, 23 | "npm:babel-runtime@5.8.20": { 24 | "process": "github:jspm/nodelibs-process@0.1.1" 25 | }, 26 | "npm:core-js@1.0.1": { 27 | "fs": "github:jspm/nodelibs-fs@0.1.2", 28 | "process": "github:jspm/nodelibs-process@0.1.1" 29 | } 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var imports = {}; 2 | var systemNormalize = System.normalize; 3 | System.normalize = function (path, importFrom) { 4 | var promise = systemNormalize.apply(this, arguments); 5 | promise.then(function (normalizedPath) { 6 | updateData(normalizedPath, { 7 | importPath: path, 8 | path: normalizedPath, 9 | from: importFrom, 10 | deps: [] 11 | }); 12 | }); 13 | return promise; 14 | }; 15 | 16 | var systemLocate = System.locate; 17 | System.locate = function (load) { 18 | var importData = updateData(load.name, { 19 | metadata: load.metadata 20 | }) 21 | var fromData = imports[importData.from]; 22 | if (fromData) { 23 | fromData.deps.push(importData); 24 | } 25 | return systemLocate.apply(this, arguments); 26 | }; 27 | 28 | function updateData(normalizedPath, data) { 29 | // create data if doesn't exist 30 | var currData = imports[normalizedPath] = imports[normalizedPath] || {}; 31 | // extend data 32 | for(var key in data) { 33 | currData[key] = data[key]; 34 | } 35 | return currData; 36 | } 37 | 38 | export function logImport (importData) { 39 | console.groupCollapsed(importData.importPath); 40 | console.log('path: ', importData.path); 41 | var metadata = importData.metadata; 42 | for (let metaKey in metadata) { 43 | if (metaKey === 'deps') continue; 44 | var metaValue = metadata[metaKey]; 45 | if (metaValue !== undefined) { 46 | console.log(`${metaKey}:`, metaValue); 47 | } 48 | } 49 | if (importData.deps) { 50 | console.group(' deps: ', importData.deps.length); 51 | for (let depData of importData.deps) { 52 | logImport(depData); 53 | } 54 | console.groupEnd(); 55 | } 56 | console.groupEnd(); 57 | } 58 | export function logImports () { 59 | console.group('Imports'); 60 | for (let index in imports) { 61 | var importData = imports[index]; 62 | // root imports? 63 | if (importData.from === undefined) { 64 | logImport(importData); 65 | } 66 | } 67 | console.groupEnd(); 68 | } 69 | export function getImports () { 70 | return imports; 71 | } 72 | export function loggedImport (path) { 73 | // log imports on errors 74 | var orgOnError = self.onerror; 75 | self.onerror = logImports; 76 | return System.import(path) 77 | .then(function (module) { 78 | logImports(); 79 | self.onerror = orgOnError; 80 | return module; 81 | }) 82 | .catch(function (err) { 83 | //console.error(err); 84 | logImports(); 85 | throw err; 86 | }); 87 | } 88 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "systemjs-debugger", 3 | "version": "0.0.6", 4 | "description": "Debugger for SystemJS (JSPM) configurations", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/peteruithoven/systemjs-debugger.git" 12 | }, 13 | "keywords": [ 14 | "systemjs", 15 | "jspm" 16 | ], 17 | "author": "Peter Uithoven", 18 | "license": "MIT", 19 | "jspm": { 20 | "directories": {}, 21 | "devDependencies": { 22 | "babel": "npm:babel-core@^5.8.21", 23 | "babel-runtime": "npm:babel-runtime@^5.8.20", 24 | "core-js": "npm:core-js@^1.0.0" 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /systemjs-debugger-logs-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peteruithoven/systemjs-debugger/6aa71cfc8074289ecc8e4cebba5c101b5c650167/systemjs-debugger-logs-example.png --------------------------------------------------------------------------------