Add source maps for generated code #7
Conversation
Codecov Report
@@ Coverage Diff @@
## master #7 +/- ##
=========================================
Coverage ? 57.63%
=========================================
Files ? 15
Lines ? 491
Branches ? 87
=========================================
Hits ? 283
Misses ? 208
Partials ? 0
Continue to review full report at Codecov.
|
| @@ -2,15 +2,17 @@ import { ProjectFileType } from '@dojo/cli-export-project/interfaces/project.jso | |||
| import Evented from '@dojo/core/Evented'; | |||
| import { createHandle } from '@dojo/core/lang'; | |||
| import project from './project'; | |||
| import * as base64 from './support/base64'; | |||
There was a problem hiding this comment.
Does this belong as a support helper, or something in core, or revisit doing something with crypto? Not a blocking comment, just something we should open an issue for elsewhere?
There was a problem hiding this comment.
Possibly... but I wasn't sure where.
There was a problem hiding this comment.
Ok, let's just open an issue in meta and decide that later.
There was a problem hiding this comment.
A related defect is essentially here: dojo/core#299 which I should port over and fix and then refactor here off of core.
src/Runner.ts
Outdated
| for (const mid in modules) { | ||
| modulesText += `\t'${mid}': function () {\n${modules[mid]}\n},\n`; | ||
| /* inject each source module as it's own <script> block */ |
| request.setDefaultProvider(getProvider(require)); | ||
| require([ 'src/main' ], function () { }); | ||
| }); | ||
| <script>require.config({ |
There was a problem hiding this comment.
Is this section intentionally unindented?
There was a problem hiding this comment.
Yes, because it the view in the debugger much cleaner and more readable.
tests/unit/Runner.ts
Outdated
| @@ -176,7 +204,7 @@ registerSuite({ | |||
| await runner.run(); | |||
| const doc = getDocFromString(getDocumentStrings(iframe)[0]); | |||
| const scripts = doc.querySelectorAll('script'); | |||
| assert.lengthOf(scripts, 4, 'should have four script nodes'); | |||
| assert.lengthOf(scripts, 5, 'should have four script nodes'); | |||
There was a problem hiding this comment.
should have four script nodes -> should have five script nodes
kitsonk
force-pushed
the
feature-source-map
branch
from
c1ddf22 to
fa8fa7c
Compare
Feature
This PR provides support for source maps in generated code. It also "names" the scripts in a way that is recognised by some debuggers that make debugging dynamically generated applications from the Runner easier to debug. In Chrome DevTools, breakpoints can be set on the generated runner applications.
This also includes source maps for CSS as well, which Chrome DevTools will automatically recognise.
The dynamically generated JavaScript will be located under the runner
iframe:For some reason the original TypeScript is not visible at this point, but if you wanted to set a breakpoint on the generated code, you would open the emitted JavaScript:
And when you click on the gutter to set the breakpoint, Chrome will realise it has a source map and open up the original TypeScript file:
After this point, debugging the application should work, remembering the breakpoints.