Menu

Subscribe

Debugging Typescript in Chrome with IIS

Sourcemap support in Chrome is amazing. Usually, I can debug typescript, coffeescript, LESS, SASS (.scss), and anything else I desire quite happily in the browser. Then every so often, it stops working in any one of a variety of ways, and is frustrating enough that I need to keep track of the reasons why here.

The problems

  • .ts files appear blank in dev tools source tab, and accessing them directly gives a 404. This is caused by mime-type issues.
  • .ts or .js files appear to be 'cached'. A change to the underlying file has no effect in dev tools, and you're left debugging an old version of the file. Or, the behaviour doesn't seem to match that of the file(s) on disk.
  • Breakpoints aren't being hit as expected.

Things to check

  • web.config mime-type mappings. The mapping should be present as a system.webServer.staticContent.mimeMap entry, having the right resulting at the level you're looking at. Make sure you check for nested config files: once I had an untracked web.config file hiding in a particular subdirectory (god knows why?!) that removed the typescript mapping and caused this. For reference, the IIS Express config file lives here:

    %userprofile%\Documents\IISExpress\config\applicationhost.config

  • The file is actually being compiled. If there is an error in the typescript file, it won't be compiled and the resulting javascript will represent some older version of the code. You might have thought that tsc would compile to nothing (or write an error), but you'd be wrong.

  • There is only one version of the file. Sometimes you can end up with another version of the same code hanging around (copy/paste anyone?). If pulled into the browser, it can obviously end up overriding your nice new version of the code with something old, and probably broken. Do a search on the disk folder (not on the project/solution), to check that there's nothing lying around!

  • The version in Chrome DevTools isn't out-of-date. Sometimes I've found that despite having the 'Disable cache (while DevTools is open)' option ticked, the typescript files displayed are out of date. The following couple of steps always clear it up as a last resort (assuming none of the other issues described here are present!):

    1. On the Sources tab, right-click a file and choose 'Close all'.
    2. On the Network tab, right-click any request and choose 'Clear browser cache', then confirm 'OK'.