Search code examples
meteorsource-maps

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"


Solution

  • 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