title: Debugging in Safari's Web Inspector, when using a module loader like SystemJS
body: <p>I'm creating an <code>Ionic</code> app using <code>es6 modules</code>, <code>TypeScript</code> and <code>SystemJS</code> as a module loader. This is my setup:</p>
  
  <p><strong>tsconfig.json:</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      ...
      "target": "es5",
      "module": "system",
      ...
    }
  }
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="lib/system.js"&gt;&lt;/script&gt;
  &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
  &lt;script&gt;System.import('js/app.js')&lt;/script&gt;
  </code></pre>
  
  <p><strong>example script (TypeScript):</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {IConfig} from "./app-config";
  
  export class ConfigLoader {
      ...
  }
  </code></pre>
  
  <p>Everything runs great in Chrome. However, when debugging using Safari's Web Inspector, I cannot place any breakpoints in the scripts because Web Inspector only shows scripts that are loaded directly from the HTML (through script tags), and not scripts loaded by XHR (in my case, by SystemJS). This means I cannot debug my own scripts, which is of course unacceptable.</p>
  
  <p>I tried to work around this by using SystemJS like before, but also placing the script tags in the html, like so:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="lib/system.js"&gt;&lt;/script&gt;
  &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
  &lt;script src="js/app-config.js"&gt;&lt;/script&gt;
   ... other app scripts
  &lt;script&gt;System.import('js/app.js')&lt;/script&gt;
  </code></pre>
  
  <p>However, this doesn't work, as SystemJS does not seem happy about this:</p>
  
  <blockquote>
    <p>Invalid System.register call. Anonymous System.register calls can only
    be made by modules loaded by SystemJS.import and not via script tags.</p>
  </blockquote>
  
  <p>How do I use SystemJS and at the same time have the ability to debug in Safari? I'm looking for a solution a little more sophisticated than 'put a debugger statement in each script'...</p>