-
-
Save paulirish/9697a2889f46b280483a to your computer and use it in GitHub Desktop.
Dynamic source map test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="modifyme.js"></script> | |
| </head> | |
| <body> | |
| <h1>Testing source map reloading.</h1> | |
| <h3>Open Dev Tools and look in the console.</h3> | |
| <p>Execute the <code>test_sm()</code> function and follow the source links.</p> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Testing source map reloading | |
| console.log "feel free to change this" | |
| # autoreloading | |
| # when this file loads the first time it will start reloading itself | |
| # over and over every second | |
| unless window.reload_file | |
| console.log "sssss the test_sm() function and follow the source links." | |
| setInterval (-> reload_file("modifyme.js")), 1000 | |
| window.reload_file = (path) -> | |
| x = document.createElement "script" | |
| x.setAttribute "src", path | |
| document.body.appendChild x | |
| # just can't stand to not clean this up :) | |
| setTimeout (-> document.body.removeChild(x)), 1000 | |
| # install coffeescript | |
| # $ npm install -g coffee-script | |
| # | |
| # compile this file with | |
| # $ coffee -mcw modifyme.coffee | |
| # | |
| # That will watch and recompile the file and it's source maps as you | |
| # edit and save this file | |
| # | |
| # load the index.html file into Chrome over http | |
| # | |
| # Open the DevTools console and run window.test_sm() | |
| # and follow the source links for the log and error statements | |
| # and see that they work | |
| # | |
| # Now modify the file by changing the console log at the top. | |
| # Save the file after modifying it. | |
| # !!! The new modifyme.js will get loaded into the browser automatically. !!! | |
| # Do not refresh the browser by hand. | |
| # | |
| # Then view the source in devtools Sources panel. None of the changes are represented. | |
| # Change the console assert below to 4 == 3 so it will fail. Save. | |
| # Then execute the window.test_sm() function in the DevTools console | |
| # Follow the assertion failure to look at the source. | |
| # You're looking at 4==4 despite the failure | |
| window.test_sm = -> b() | |
| b = -> c() | |
| c = -> d() | |
| d = -> | |
| console.log "Click the source link -> \n | |
| Click the source link for the error below. \n | |
| Also open the stack trace and click the source links for the different trace points." | |
| e() | |
| e = -> | |
| console.assert(4 == 4, 'four is four') | |
| f() | |
| f = -> g() | |
| g = -> h() | |
| h = -> i() | |
| i = -> DoesntExist.yep() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment