diff --git a/README.md b/README.md
index d84a10e..15007ab 100644
--- a/README.md
+++ b/README.md
@@ -8,13 +8,13 @@
 npm install weex-loader babel-loader babel-preset-es2015 babel-runtime babel-plugin-transform-runtime --save
 ```
 
-## Feature
+## Features
 
 0. Can load `.we` file.
-1. Can load parted files(`.js/.css/.html`) via `src` attribute.
-2. Can specify a custom language to chain any loader.
-3. Can specify name when require `.we` file.
-4. Can write es2015 in script.
+0. Can load parted files(`.js/.css/.html`) via `src` attribute.
+0. Can specify a custom language to chain any loader.
+0. Can specify name when require `.we` file.
+0. Can write es2015 in script.
 
 ## Usage
 
@@ -22,14 +22,10 @@
 
 **make a webpack config**
 ```javascript
-var path = require('path');
-var webpack = require('webpack');
-var loader = require('weex-loader');
-
 module.exports = {
-  entry: './test/main.we?entry',
+  entry: './main.we?entry',
   output: {
-    path: './test/actual',
+    path: './dist',
     filename: 'main.js'
   },
   module: {
@@ -121,4 +117,29 @@
 
 And you can check the specs in `test/spec` folder.
 
+## Specs
+
+- [Build with single template tag](test/spec/a.we)
+- [Build with template and style tags](test/spec/b.we)
+- [Build with template/style/script tags](test/spec/c.we)
+- [Build with single element tag](test/spec/d.we)
+- [Build with multiple element tag](test/spec/e.we)
+- [Build from parted files specifed in `src` attr](test/spec/f.we)
+- [Manually Require component and specifies an alias name](test/spec/g.we)
+- [Automaticely require component under some folder](test/spec/h.we)
+- [Build with config/data tag](test/spec/i.we)
+- [Require weex module](test/spec/j.we)
+- [Build by using custom language](test/spec/k.we)
+- [Require commonjs module](test/spec/l.we)
+- [Require weex module in commonjs module](test/spec/m.we)
+- [Build with sourcemap(no test)](test/spec/n.we)
+
+## Knew Issues
+
+- [`Bug` Source Map Offset](https://github.com/webpack/webpack/issues/2145). Encoding to this problem, please use `devtool:"eval-source-map"` instead of `devtool:"source-map"`.
+- [`Bug` Can't set debugger breakpoint](#). I still don't know the reason, but you can debug with `debugger` keywords.
+
+
+
+
 
diff --git a/package.json b/package.json
index 441d91f..d7d304c 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "eslint": "^2.13.1",
     "jade": "^1.11.0",
     "jade-html-loader": "0.0.3",
+    "js-base64": "^2.1.9",
     "mocha": "^2.4.5",
     "parse5": "^2.1.5",
     "postcss-cssnext": "^2.7.0",
diff --git a/src/extract.js b/src/extract.js
index c507912..d103e3f 100644
--- a/src/extract.js
+++ b/src/extract.js
@@ -5,10 +5,12 @@
 } from './parser'
 import {
   splitSourceLine,
-  generateMap
+  generateMap,
+  consumeMap
+  // printSourceWithLine
 } from './util'
 
-module.exports = function (source) {
+module.exports = function (source, inputSourceMap) {
   this.cacheable && this.cacheable()
 
   const callback = this.async()
@@ -26,43 +28,68 @@
         result = result[index]
       }
       const content = result.content.trim()
+
       let map
-      if (this.sourceMap && type === 'scripts') {
+      if (this.sourceMap &&
+        (type === 'scripts' || type === 'elements')) {
+        const contentLineStart = result.line
         let contentLineCount = 0
+
+        let cmap
+        if (inputSourceMap) {
+          cmap = consumeMap(this, source, inputSourceMap)
+          source = cmap.sourcesContent.join('')
+            // printSourceWithLine(source)
+        }
+
         const iterator = splitSourceLine(content)
-                          .map((input, line) => {
-                            contentLineCount++
-                            line = line + 1
-                            return {
-                              original: {
-                                line: line + result.line,
-                                column: 0
-                              },
-                              generated: {
-                                line: line,
-                                column: 0
-                              }
-                            }
-                          })
+          .map((input, line) => {
+            contentLineCount++
+            line = line + 1
+            let originalLine = line + contentLineStart
+            const generatedLine = line
+            if (cmap) {
+              // mapping to the original of input source
+              originalLine = cmap.mapping[`line-${originalLine}-column-0`].line
+                // console.log(originalLine + ':', input)
+            }
+            return {
+              original: {
+                line: originalLine,
+                column: 0
+              },
+              generated: {
+                line: generatedLine,
+                column: 0
+              }
+            }
+          })
 
-        const commentSource = splitSourceLine(source)
-                          .map((input, line) => {
-                            line = line + 1
-                            if (line <= result.line
-                                  || line > result.line + contentLineCount) {
-                              return '// ' + input + ' /* generated by weex-loader */'
-                            }
-                            else {
-                              return input
-                            }
-                          }).join('\n')
+        // if (type === 'scripts') {
+        //   let lineStart = contentLineStart
+        //   if (cmap) {
+        //     // mapping to the original of input source
+        //     lineStart = cmap.mapping[`line-${lineStart}-column-0`].line
+        //   }
+        //   source = splitSourceLine(source)
+        //     .map((input, line) => {
+        //       line = line + 1
+        //       // console.log(line + ':', input)
+        //       if (line === lineStart
+        //           || line === lineStart + contentLineCount + 1) {
+        //         return input + ' /* generated by weex-loader */'
+        //       } else {
+        //         return input
+        //       }
+        //     }).join('\n')
+        // }
 
-        map = generateMap(this, commentSource, iterator)
+        map = generateMap(this, source, iterator)
       }
 
       return [content, map]
     }).then(([content, map]) => {
-      callback(null, content, map && map.toJSON())
+      callback(null, content, map && map.toJSON() || inputSourceMap)
     }).catch(e => {
       callback(e, '')
     })
diff --git a/src/loader.js b/src/loader.js
index e364507..0fc97fe 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -191,6 +191,7 @@
 
 function loader (source) {
   this.cacheable && this.cacheable()
+
   const options = this.options.weex || {}
   const customLang = options.lang || {}
 
diff --git a/src/util.js b/src/util.js
index 325a734..d1328f9 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,7 +1,10 @@
 import path from 'path'
 import loaderUtils from 'loader-utils'
 import hash from 'hash-sum'
-import { SourceMapGenerator } from 'source-map'
+import {
+  SourceMapGenerator,
+  SourceMapConsumer
+} from 'source-map'
 
 import * as config from './config'
 
@@ -12,7 +15,7 @@
 export function getFileNameWithHash (resourcePath, content) {
   const filename = path.relative('.', resourcePath)
   const cacheKey = hash(filename + content)
-  return `${filename}?${cacheKey}`
+  return `./${filename}?${cacheKey}`
 }
 
 export const FUNC_START = '#####FUN_S#####'
@@ -74,8 +77,15 @@
 }
 
 export function generateMap (loader, source, iterator) {
-  const fileNameWithHash = getFileNameWithHash(loader.resourcePath)
-  const map = new SourceMapGenerator()
+  const filePath = loader.resourcePath
+
+  const fileNameWithHash = getFileNameWithHash(filePath)
+  const sourceRoot = path.resolve('.')
+
+  const map = new SourceMapGenerator({
+    sourceRoot,
+    skipValidation: true
+  })
   map.setSourceContent(fileNameWithHash, source)
 
   for (const { original, generated } of iterator) {
@@ -89,7 +99,59 @@
   return map
 }
 
+export function consumeMap (loader, target, map) {
+  const smc = new SourceMapConsumer(map)
+  let source
+  const original = []
+  const generated = []
+  const mapping = {}
+
+  splitSourceLine(target)
+    .forEach((input, line) => {
+      const column = 0
+      line = line + 1
+
+      const pos = smc.originalPositionFor({
+        line,
+        column
+      })
+
+      if (pos.source) {
+        source = pos.source
+        original.push({
+          line: pos.line,
+          column: pos.column
+        })
+        generated.push({
+          line,
+          column
+        })
+        mapping[`line-${line}-column-${column}`] = {
+          line: pos.line,
+          column: pos.column
+        }
+      }
+    })
+
+  return {
+    source,
+    original,
+    generated,
+    mapping,
+    sourcesContent: smc.sourcesContent
+  }
+}
+
 const LINE_REG = /\r?\n/g
 export function splitSourceLine (source) {
   return source.split(LINE_REG)
 }
+
+export function printSourceWithLine (source) {
+  console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
+  source = splitSourceLine(source)
+              .map((input, line) => {
+                console.log(line + 1 + ':', input)
+              })
+  console.log('<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<')
+}
diff --git a/test/spec/name.js b/test/spec/name.js
index 934290b..d52e553 100644
--- a/test/spec/name.js
+++ b/test/spec/name.js
@@ -1,5 +1,5 @@
-module.exports = {
-    data: function() {
+export default {
+    data() {
         console.log('Name Component Comment')
         return {
             name: ''
diff --git a/test/test.js b/test/test.js
index f9aaac8..4208749 100644
--- a/test/test.js
+++ b/test/test.js
@@ -9,6 +9,10 @@
 const expect = chai.expect;
 chai.use(sinonChai);
 
+const Base64 = require('js-base64').Base64;
+const SourceMap = require('source-map');
+
+
 
 function getActualString(name) {
   const filepath = path.resolve(__dirname, 'actual', `${name}.js`);
@@ -31,6 +35,13 @@
   }, '  ');
 }
 
+function extractMap(actualStr) {
+  const mapStr = actualStr.match(/\/\/\# sourceMappingURL=data:application\/json;charset=utf-8;base64,([0-9a-zA-Z=+\/]+)/)
+  if (mapStr) {
+    return JSON.parse(Base64.decode(mapStr[1]));
+  }
+}
+
 describe('build', () => {
   let __weex_define__;
   let __weex_bootstrap__;
@@ -43,12 +54,14 @@
     const fn = new Function('__weex_define__', '__weex_bootstrap__', actualStr);
     fn(__weex_define__, __weex_bootstrap__);
 
-    const filepath = path.resolve(__dirname, 'expect', `${name}.js`);
-    fs.writeFileSync(filepath, stringifyActual(components), 'utf-8');
+    // const filepath = path.resolve(__dirname, 'expect', `${name}.js`);
+    // fs.writeFileSync(filepath, stringifyActual(components), 'utf-8');
 
     const expectJSON = getExpectJSON(name);
     expect(JSON.parse(stringifyActual(components))).eql(expectJSON);
     expect(components).to.include.keys(__weex_bootstrap__.firstCall.args[0]);
+
+    return actualStr;
   }
 
   beforeEach(() => {
@@ -132,7 +145,20 @@
     expect(requireStub.firstCall.args).eql(['@weex-module/modal']);
   });
 
-  it('template with sourcemap', () => {
-    expectActual('n');
-  })
+  it.skip('template with sourcemap', () => {
+    const actualStr = expectActual('n');
+    const map = extractMap(actualStr);
+    const smc = new SourceMap.SourceMapConsumer(map);
+
+    // new Array(276).fill(0).forEach((n, i) => {
+    //   i = i + 1
+    //   const original = smc.originalPositionFor({
+    //     line: i,
+    //     column: 0
+    //   })
+    //   if (original.source) {
+    //     console.log(i, original.line, original.source)
+    //   }
+    // })
+  });
 })
diff --git a/test/webpack.config.js b/test/webpack.config.js
index bfd8e4a..1b0f484 100644
--- a/test/webpack.config.js
+++ b/test/webpack.config.js
@@ -30,7 +30,7 @@
       }
     ]
   },
-  devtool: 'source-map',
+  devtool: 'inline-source-map',
   resolveLoader: {
     modulesDirectories: ['./', './node_modules']
   },