CODEWITHSUNDEEP
meteorsource-maps
Alex028502
Alex028502

Reputation: 3814

url scheme meteor://💻app/..... in meteorjs

What does this url-scheme/protocol mean? meteor://💻app/.....

I see it when I open a meteor project in browser developer tools. All the compiled/transpiled/minified files are under http://localhost:3000. However, all the source files that the source maps point to are in another directory called meteor://💻app

When I try to open those paths in the browser (or by choosing Open Link in New Tab) it says it can't open them.

How are they served by meteor? How are the accessed by chrome debug tools? How does chrome debug tools know what to do with "meteor://"?

developer tools with http://location:3000 and meteor://..app

example in .js.map file: {"version":3,"sources":["meteor://💻app/password_client.js"],"names"

Upvotes: 3

Views: 412

Answers (1)

Alex028502
Alex028502

Reputation: 3814

If anybody else every wonders how this works.....

The original source code can be contained in the source map (sourcesContent). If you provide it there, you can put any path you like in "sources", dev tools will show it in its own folder as in the picture in the question.

To try:

mkdir example
cd example
npm install babel-cli #needed to compile and create source map

#create a hello world js website:
echo "document.write('hello world')  ;  //spaces before ; will be removed in transpiled file" > hello.js
echo "<script src='hello-compiled.js'></script>" > hello.html

#create compiled version and source map
node ./node_modules/babel-cli/bin/babel hello.js --out-file hello-compiled.js --source-maps

cat hello-compiled.js #to see the generated map file
sed -i 's/hello.js/sourcefiles:\/\/sourcesfiles\/hello.js/g' hello-compiled.js.map #change the local url to one with the new protocol
cat hello-compiled.js #to see the map file after the change
#(or just open up the file in an editor and change sources":["hello.js"] to sources":["sourcefiles://sourcefiles/hello.js"]

rm hello.js #get rid of the original so that you don't see it in your sources
#(you can always regenerate it with the echo command above)

google-chrome hello.html #on ubuntu if you have chrome installed
open hello.html #will probably work on osx

##now look at sources in developer tools - you should see source files in theor own folder called sources
#I had to ctrl-shift-r to see all the files
#you should be able to add a breakpoint in the sourcefiles://sourcefiles/hello.js

Upvotes: 3

Related Questions