Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@paulirish

paulirish/index.html

Forked from bhauman/index.html
Created October 20, 2015 01:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulirish/9697a2889f46b280483a to your computer and use it in GitHub Desktop.
Save paulirish/9697a2889f46b280483a to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic source map test
Raw
index.html
<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>
Raw
modifyme.coffee
# 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