How do I enable debug in jade loader

[kavaro]

Hi @sokra

I am unable to see error messages from jade loader.
I assume I need to set debug flag for the loader, how do I do this.
I am working with wpt and dev-server

thx,

Kavaro

[sokra]

Can you provide more details?

What message do you see? What would you expect?

[kavaro]

I am using wpt dev-server.sh

What I see:
- when the jade compile fails, no errors/warnings are shown
- the web pack build succeeds
- in the browser the html body is empty

What I would like to see:
- show all error/warning messages of the jade compile
- if the jade compile fails, then the web pack build should also fail stating which jade file failed

On a related topic: it is also difficult to trace javascript errors, it would save me a lot of time if this could be improved as well
- What I see:
- firebug/chrome dev. tools report errors with a line number in the bundle, and because in debug mode all code is in a string inside an eval statement, the bundle line number just indicates in which file the error occurs. But I get no info about the
actual line number in the source file.
- What I would like to see:
- firebug/chrome dev. tools report the line number of my source file

Thanks,

Kavaro

Op 14-nov.-2012, om 23:14 heeft Tobias Koppers het volgende geschreven:

Can you provide more details?

What message do you see? What would you expect?

—
Reply to this email directly or view it on GitHub.

[sokra]

show all error/warning messages of the jade compile
if the jade compile fails, then the web pack build should also fail stating which jade file failed

I tried it with a(a=a, which make the webpack build fail in cause of a Error from the jade-loader. The Error is weird, in cause of the way jade works. It converts the source code into a function and "evals" it. A syntax error in jade source causes a syntax error in the function's javascript. :(

firebug/chrome dev. tools report the line number of my source file

This should be so. (I fixed a bug in the jade-loader and it should be so for jade also)
You need to have the dev tools open while opening the site.

The evaling with //@ sourceURL=... should do the trick. Chrome version? Firebug version?

---

In Chrome dev tools it looks like this:

Uncaught ReferenceError: !C:\Users\Sokrates\temp\testapp\app\test.jade:2
    1| h1 Hello World
  > 2| a(a=a

a is not defined 

webpack-module:///./~/jade-loader!./app/test.jade:28

webpack-module:///./~/jade-loader!./app/test.jade:28 is a clickable link which opens the "Source" tab with the compiled "test.jade" source only. On the left side is a hierachie with all loaded webpack modules.

[kavaro]

How do I install your fix ?

Have changed my package.json devDependencies to the following:

    "devDependencies": {
        "wpt": "0.5.x",
        "webpack": "0.8.x",
        "webpack-dev-server": "0.8.x",
        "enhanced-require": "0.4.x",
        "coffee-loader": "0.2.x",
        "jade-loader": "0.2.2",  // NEW JADE LOADER ???
        "json-loader": "0.2.x",
        "raw-loader": "0.2.x",
        "express": "3.0.x"
    },

followed by 'npm install'

Introduced the error: a(a=a,

The html body is now empty, so, for sure there is a jade error, however dev-server.sh does not fail and there are no error messages.
I gues I am not using the right versions.
Can you check the above package.json and see what I am missing ?

On the issue about javascript source files:
- I have firebug open when loading, so, this should not be the issue.
- In chrome I am able to see the line number by expanding the given error message, so, this is fine

However in firebug I get the following message: (the error is ReferenceError: doesnotexist, this error occurs in ../../app.js line 15, however I don't see the source line number), I am using firefox 16.0.2

"Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null"
ReferenceError: doesnotexist is not defined

(15 out of range 3)
Error: Argument 'tapController' is not a function, got undefined
assertArg@http://localhost:8081/assets/dev.bundle.js:1010
assertArgFn@http://localhost:8081/assets/dev.bundle.js:1021
@http://localhost:8081/assets/dev.bundle.js:4655
@http://localhost:8081/assets/dev.bundle.js:4237
forEach@http://localhost:8081/assets/dev.bundle.js:154
nodeLinkFn@http://localhost:8081/assets/dev.bundle.js:4222
compositeLinkFn@http://localhost:8081/assets/dev.bundle.js:3871
@http://localhost:8081/assets/dev.bundle.js:3783
@http://localhost:8081/assets/dev.bundle.js:969
@http://localhost:8081/assets/dev.bundle.js:7845
@http://localhost:8081/assets/dev.bundle.js:7925
@http://localhost:8081/assets/dev.bundle.js:967
invoke@http://localhost:8081/assets/dev.bundle.js:2825
bootstrap@http://localhost:8081/assets/dev.bundle.js:966
angularInit@http://localhost:8081/assets/dev.bundle.js:941
@http://localhost:8081/assets/dev.bundle.js:14434
trigger@http://localhost:8081/assets/dev.bundle.js:1732
@http://localhost:8081/assets/dev.bundle.js:1967
forEach@http://localhost:8081/assets/dev.bundle.js:147
@http://localhost:8081/assets/dev.bundle.js:1966
(5563 out of range 3)

Op 15-nov.-2012, om 09:26 heeft Tobias Koppers het volgende geschreven:

show all error/warning messages of the jade compile
if the jade compile fails, then the web pack build should also fail stating which jade file failed

I tried it with a(a=a, which make the webpack build fail in cause of a Error from the jade-loader. The Error is weird, in cause of the way jade works. It converts the source code into a function and "evals" it. A syntax error in jade source causes a syntax error in the function's javascript. :(

firebug/chrome dev. tools report the line number of my source file

This should be so. (I fixed a bug in the jade-loader and it should be so for jade also)
You need to have the dev tools open while opening the site.

The evaling with //@ sourceURL=... should do the trick. Chrome version? Firebug version?

In Chrome dev tools it looks like this:

Uncaught ReferenceError: !C:\Users\Sokrates\temp\testapp\app\test.jade:2
1| h1 Hello World

2| a(a=a

a is not defined

webpack-module:///.//jade-loader!./app/test.jade:28
webpack-module:///.//jade-loader!./app/test.jade:28 is a clickable link which opens the "Source" tab with the compiled "test.jade" source only. On the left side is a hierachie with all loaded webpack modules.

—
Reply to this email directly or view it on GitHub.

[sokra]

ok something seem to be buggy...

maybe this applies here: http://code.google.com/p/fbug/issues/detail?id=2198

You can disable the "eval" stuff with

wpt enable customWebpackOptions

and add these lines to webpackOptionsDevServer.js

options.debug = false;
options.includeFilenames = true; // this include filenames in comments

or use chrome for debugging

npm ls

testapp@0.1.0
├─┬ coffee-loader@0.2.0
│ └── coffee-script@1.4.0
├─┬ enhanced-require@0.4.0
│ ├── buffer-equal@0.0.0
│ ├── clone@0.0.7
│ └── enhanced-resolve@0.4.7
├─┬ express@3.0.3
│ ├── commander@0.6.1
│ ├─┬ connect@2.7.0
│ │ ├── bytes@0.1.0
│ │ ├── formidable@1.0.11
│ │ ├── pause@0.0.1
│ │ └── qs@0.5.1
│ ├── cookie@0.0.5
│ ├── cookie-signature@0.0.1
│ ├── crc@0.2.0
│ ├── debug@0.7.0
│ ├── fresh@0.1.0
│ ├── methods@0.0.1
│ ├── mkdirp@0.3.3
│ ├── range-parser@0.0.4
│ └─┬ send@0.1.0
│   └── mime@1.2.6
├─┬ jade-loader@0.2.2
│ ├─┬ jade@0.27.7
│ │ ├── coffee-script@1.4.0
│ │ ├── commander@0.6.1
│ │ └── mkdirp@0.3.4
│ └─┬ loader-utils@0.1.2
│   └── json5@0.1.0
├── json-loader@0.2.0
├── raw-loader@0.2.0
├─┬ webpack@0.8.0
│ ├─┬ bundle-loader@0.3.0
│ │ └─┬ loader-utils@0.1.2
│ │   └── json5@0.1.0
│ ├─┬ css-loader@0.2.4
│ │ └── csso@1.2.18
│ ├── enhanced-resolve@0.4.7
│ ├── esprima@0.9.9
│ ├── file-loader@0.1.2
│ ├─┬ less-loader@0.2.2
│ │ └── less@1.3.1
│ ├─┬ optimist@0.2.8
│ │ └── wordwrap@0.0.2
│ ├─┬ script-loader@0.3.0
│ │ ├─┬ loader-utils@0.1.2
│ │ │ └── json5@0.1.0
│ │ └── raw-loader@0.1.6
│ ├── sprintf@0.1.1
│ ├── style-loader@0.2.1
│ ├─┬ uglify-js2@2.1.11
│ │ ├─┬ optimist@0.3.5
│ │ │ └── wordwrap@0.0.2
│ │ └─┬ source-map@0.1.7
│ │   └── amdefine@0.0.4
│ └─┬ val-loader@0.2.0
│   └─┬ loader-utils@0.1.2
│     └── json5@0.1.0
├─┬ webpack-dev-server@0.8.1
│ ├─┬ optimist@0.3.5
│ │ └── wordwrap@0.0.2
│ ├─┬ socket.io@0.9.11
│ │ ├── policyfile@0.0.4
│ │ ├── redis@0.7.3
│ │ └─┬ socket.io-client@0.9.11
│ │   ├─┬ active-x-obfuscator@0.0.1
│ │   │ └── zeparser@0.0.5
│ │   ├── uglify-js@1.2.5
│ │   ├─┬ ws@0.4.22
│ │   │ ├── commander@0.6.1
│ │   │ ├── options@0.0.3
│ │   │ └── tinycolor@0.0.1
│ │   └── xmlhttprequest@1.4.2
│ ├── stream-cache@0.0.2
│ └── webpack-dev-middleware@0.8.0
└─┬ wpt@0.5.0
  ├── buffer-equal@0.0.0
  ├── json-loader@0.1.8
  ├─┬ optimist@0.3.5
  │ └── wordwrap@0.0.2
  └─┬ read@1.0.4
    └── mute-stream@0.0.3

[sokra]

Seem to be a firebug bug: http://groups.google.com/group/firebug/browse_thread/thread/8632fe7e6a7e1c4f

Your package.json is ok, you can even leave it 0.2.x.

Unfortually npm update --dev do not work :(, so you have to npm uninstall jade-loader && npm install (bug in npm?)

[kavaro]

Thx for the super fast responses.

There indeed seems to be a firebug bug :-)
Will switch to chrome until firefox fixes this issue, no problem .

Tried the new jade-loader using a fresh install with the latest wpt:
- sudo npm install wpt -g
- wpt create test-app
- cd test-app
- npm install
- edit _template/index.jade to introduce error: a(a=a,
- dev-server.sh
- The build stops with an error, great
Next I tried the following:
- remove the error from _template/index.jade
- edit app/body.jade (which is by default required from _template/index.jade)
- introduce the same error in app/body.jade: a(a=a,
- dev-server.sh
- In this case the build succeeds and no error message is given. Chrome dev.tools show an empty body tag, which confirms there should have been an error.
I gues this explains why I was not able to get the same error messages as you. I was introducing errors in body.jade and not in index.jade

Any ideas why an error in body.jade does not cause an error message and stop the build.

Op 15-nov.-2012, om 13:50 heeft Tobias Koppers het volgende geschreven:

Seem to be a firebug bug: http://groups.google.com/group/firebug/browse_thread/thread/8632fe7e6a7e1c4f

Your package.json is ok, you can even leave it 0.2.x.

Unfortually npm update --dev do not work :(, so you have to npm uninstall jade-loader && npm install (bug in npm?)

—
Reply to this email directly or view it on GitHub.

[sokra]

ah ok...

Now I see the problem...

First you should not edit any file in _template ;)... app/body.jade is the right place, BUT app/body.jade and app/head.jade are not build with webpack they are build with enhanced-require while starting the dev-server and I ignored any error because the files are optional.

// _template/index.jade
- try {
!= require("../app/body.jade")(locals)
- } catch(e) {}

I'll replace this with file existance detection, so it fail if a error in the jade occurs.

---

I thought you did something like

// app/app.js
var template = require("./test.jade");
document.write(template());

---

To update to a new wpt version run:

npm uninstall wpt && npm install
wpt init