如何调试它并找到实际发生错误的地方？

Question

没有r.js优化我的require js模块的所有工作。但是使用优化的js文件...

r.js -o public/js/app.build.js

...其中app.build.js是......

({
    appDir: "../",
    baseUrl: "js",
    dir: "../../appdirectory-build",
    paths: {
        jquery: "./jquery-1.9.1",
        jade: "lib/requireJade"
    },
    modules: [
        {
            name: "main"
        }
    ]
})

...并且输出没有错误和警告......

Optimizing (standard.keepLines) CSS file: /pathToProject/appdirectory-build/bootstrap-3.2.0-dist/css/bootstrap-theme.css
Optimizing (standard.keepLines) CSS file: /pathToProject/appdirectory-build/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css
Optimizing (standard.keepLines) CSS file: /pathToProject/appdirectory-build/bootstrap-3.2.0-dist/css/bootstrap.css
Optimizing (standard.keepLines) CSS file: /pathToProject/appdirectory-build/bootstrap-3.2.0-dist/css/bootstrap.min.css
Optimizing (standard.keepLines) CSS file: /pathToProject/appdirectory-build/css/media.css
Optimizing (standard.keepLines) CSS file: /pathToProject/appdirectory-build/css/style.css
Optimizing (standard.keepLines) CSS file: /pathToProject/appdirectory-build/min/bundle/3c95026_global.css

Tracing dependencies for: main
Uglifying file: /pathToProject/appdirectory-build/bootstrap-3.2.0-dist/js/bootstrap.js
Uglifying file: /pathToProject/appdirectory-build/bootstrap-3.2.0-dist/js/bootstrap.min.js
Uglifying file: /pathToProject/appdirectory-build/js/app.build.js
Uglifying file: /pathToProject/appdirectory-build/js/jquery-1.9.1.js
Uglifying file: /pathToProject/appdirectory-build/js/lib/bootstrapRequire.js
Uglifying file: /pathToProject/appdirectory-build/js/lib/requireJade.js
Uglifying file: /pathToProject/appdirectory-build/js/main.js
Uglifying file: /pathToProject/appdirectory-build/js/main_built.js
Uglifying file: /pathToProject/appdirectory-build/js/require.js
Uglifying file: /pathToProject/appdirectory-build/js/submain/load_digits.js
Uglifying file: /pathToProject/appdirectory-build/js/submain/load_map.js
Uglifying file: /pathToProject/appdirectory-build/js/submain/load_more_records.js
Uglifying file: /pathToProject/appdirectory-build/js/submain/load_more_records_event.js
Uglifying file: /pathToProject/appdirectory-build/js/submain/submit_number_chooser_form.js
Uglifying file: /pathToProject/appdirectory-build/js/yamapsapi2.js
Uglifying file: /pathToProject/appdirectory-build/js/yandex-map-show-group.js
Uglifying file: /pathToProject/appdirectory-build/js/yandex-map.js

bootstrap-3.2.0-dist/css/bootstrap-theme.css
----------------
bootstrap-3.2.0-dist/css/bootstrap-theme.css

bootstrap-3.2.0-dist/css/bootstrap-theme.min.css
----------------
bootstrap-3.2.0-dist/css/bootstrap-theme.min.css

bootstrap-3.2.0-dist/css/bootstrap.css
----------------
bootstrap-3.2.0-dist/css/bootstrap.css

bootstrap-3.2.0-dist/css/bootstrap.min.css
----------------
bootstrap-3.2.0-dist/css/bootstrap.min.css

css/media.css
----------------
css/media.css

css/style.css
----------------
css/style.css

min/bundle/3c95026_global.css
----------------
min/bundle/3c95026_global.css

js/main.js
----------------
js/jquery-1.9.1.js
js/yamapsapi2.js
js/yandex-map.js
js/submain/load_map.js
js/lib/requireJade.js
jade!lib/jade/records
js/submain/load_more_records.js
js/submain/load_more_records_event.js
js/submain/submit_number_chooser_form.js
js/main.js

...当页面加载时，在Chrome控制台中出现错误 ...

Uncaught TypeError: undefined is not a function
(anonymous function) main.js:172
anonymous main.js:172
e.ajax.success main.js:172
l main.js:172
c.fireWith main.js:172
N main.js:172
r

...某些功能在我的页面上无效

所以我可以获得发生错误的行号：172。但问题是优化的main.js行号172的长度为206490。很难找到错误。

如何调试它并找到实际发生错误的地方？

没有任何优化我没有任何错误。通过优化，我得到错误和输出太差，无法调试此错误。

我尝试将excludeShallow与疑似错误文件

一起使用

r.js -o public/js/app.build.js excludeShallow=load_more_records

但是仍然会出现错误并且输出仍然相同。

Answer 1

为了使main.js更可调试，我在config中添加了optimize: "none"。

({
    appDir: "../",
    baseUrl: "js",
    dir: "../../appdirectory-build",
    paths: {
        jquery: "./jquery-1.9.1",
        jade: "lib/requireJade"
    },
    modules: [
        {
            name: "main"
        }
    ],
    optimize: "none"

})

此选项限制在一行中写入所有js。然后我看到了发生错误的实际行。并修复错误添加...

pragmasOnSave: {
      excludeJade : true
    }

... app.build.js写为here。

错误已修复。最终app.build.js：

({
    appDir: "../",
    baseUrl: "js",
    dir: "../../appdirectory-build",
    paths: {
        jquery: "./jquery-1.9.1",
        jade: "lib/requireJade"
    },
    modules: [
        {
            name: "main"
        }
    ],
    // optimize: "none",
    pragmasOnSave: {
      excludeJade : true
    }
})

使用require.js r.js调试优化的javascript

...当页面加载时，在Chrome控制台中出现错误 ...

如何调试它并找到实际发生错误的地方？

1 个答案: