https://github.com/thlorenz/browserify-sourcemap-example

Shows how browserify source mapping urls work (via separate browserify fork).
https://github.com/thlorenz/browserify-sourcemap-example

Last synced: 13 days ago
JSON representation

Shows how browserify source mapping urls work (via separate browserify fork).

• Host: GitHub
• URL: https://github.com/thlorenz/browserify-sourcemap-example
• Owner: thlorenz
• License: mit
• Created: 2013-03-10T22:24:09.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2013-03-11T17:20:50.000Z (almost 12 years ago)
• Last Synced: 2024-12-10T08:26:30.990Z (about 1 month ago)
• Language: JavaScript
• Size: 328 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# browserify-sourcemap-example

Shows how browserify source mapping urls work (via [separate browserify

fork](https://github.com/thlorenz/node-browserify)).

## Give it a try

    git clone git://github.com/thlorenz/browserify-sourcemap-example.git && cd browserify-sourcemap-example

    npm install

    node app

## What you get

### Original filenames and locations in console output

![console](https://raw.github.com/thlorenz/browserify-sourcemap-example/master/assets/devtools-console.png)

### Separate sources

- original files in sources

- break points referring to original files

- stack traces referring to locations in original files

![sources](https://raw.github.com/thlorenz/browserify-sourcemap-example/master/assets/devtools-sources.png)

### Find original files via Command-O

![search](https://raw.github.com/thlorenz/browserify-sourcemap-example/master/assets/devtools-search.png)

## Few simple steps I took to build this

1. Install dependencies:

  

  - browserify fork that supports sourceMappingURLs: `npm i -S git://github.com/thlorenz/node-browserify.git#sourcemaps`

  - express `npm i -S express`

2. Create directories: 

   mkdir -p public/js views routes

3. Create index.html in /views which requires the bundle we'll generate in the bundle route

4. Create app.js 

5. Create a bundle route which re-generates the bundle every time it is requested

6. Create some sample JavaScript files that will be required via the `main.js` entry file