EJS documentation at ejs.co says "It's easy to debug EJS errors: your errors are plain JavaScript exceptions, with template line-numbers included.".
However, when debugging the code with an bug in the template, I only get references to the functions inside my cza.js module that calls the ejs.renderFile and references to the "internal" errors within the EJS (ejs.js) itself. Reference to the bug within the .ejs template (ideally the line-number) is missing, in fact the template goes unmentioned.
So, the screenshot is of an the error within ejs.js, where EJS itself got stuck processing the bugged template, NOT the template itself, and so worthless:
So, how do I get the debugger to point out the bug in my template?
So, I have just found out that EJS does print out the code to terminal, unless a debugger does not step in to handle the exception before EJS can point out the bug.
In my scenario, I debug the app using node --inspect app.js, with debug auto-attach in VS Code enabled. The debugger then describes the exception as shown in the question screenshot.
How I found out the debugger was blocking EJS's output to terminal? I had a browser already requesting the app, when I launched it and the exception occured within the second before the debugger was attached.
Related
I am using WebIde of SAPUI5 development.
If I write a console.log or alert it shows error of unexpected Alert and so on inside of the editor.
While the code works and I prefer to not see these errors inside of the editor.
How can I customize WebIde to not show these kind of errors.
While it is discouraged to use console.log and alert statements in your code because
[...] such messages are considered to be for debugging purposes and therefore not suitable to ship to the client [...]
http://eslint.org/docs/rules/no-console
and
[...] JavaScripts’ alert, confirm, and prompt functions are widely considered to be obtrusive as UI elements and should be replaced by a more appropriate custom UI implementation [...]
http://eslint.org/docs/rules/no-alert
you can have your Linter configured to bypass these checks (although I would not recommend to do so)
But keep in mind these checks are not specific to SAPUI5 or Web IDE, rather for every Javascript project!
Anyway, since Web IDE uses ESLint, to disable the check, add the following on top of the affected Javascript file:
/*eslint-disable no-console, no-alert */
I have an application that uses brunch, chaplin, and coffeescript for the front end. Brunch builds the application without any errors. However, when I do brunch watch --serverand navigate to http://localhost:3333, an error is generated and the page never loads.
This was previously working just fine. diff shows no changes in the repository that would account for the change in behavior. I also checked out previous versions of the front end code from when I know the dev. server was working, but they all give the same error. I tried deleting the built code and completely rebuilding, but that didn't help either.
I am thinking it must be something I did in an untracked file, but for the life of me, I can't find it. Here is the output of the chrome error message:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3333/pub/css/app.css". localhost/:10
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3333/pub/js/vendor.js". localhost/:11
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3333/pub/js/app.js". localhost/:20
Uncaught SyntaxError: Unexpected token < vendor.js:1
Uncaught SyntaxError: Unexpected token < app.js:1
Uncaught ReferenceError: require is not defined (index):21
(anonymous function) (index):21
The offending line in index appears to be
<script>require('initialize');</script>
This line is unchanged from other similarly configured projects that work perfectly. I assume it is probably something dumb, but it is just vague enough that web search hasn't helped much. Hopefully someone else has come across this.
What can I do do diagnose the problem or fix this?
You have to confirm, but I believe you are getting 404 errors on your JavaScript and Stylesheets, so they are returning HTML pages that describe the 404 error. That's why that line of JavaScript is erroring out - it depends on code in app.js, which is not being loaded.
Make sure the paths are correct, i.e. point your browser to http://localhost:3333/pub/css/app.css and confirm that you get a CSS file and not a 404 from your web server. If you get a 404, that means you have to update the href for the CSS and the src for the JS, or make sure Brunch is placing the files where they are supposed to be.
I've created a fresh install of Moodle 2.5. I installed successfully, I thought. I have not customized the theme, so it can NOT be theme-based.
TinyMCE's file picker is not loading...whether trying to upload a file or creating/editing a course under the Course summary files section...all I get is the "Loader" star. I did some research and found no solutions that worked. Quite a few said "custom themes," but I have no custom themes yet. Now, in checking the console, I got this:
- Uncaught SyntaxError: Unexpected Identifier /lib/editor/tinymce/tinymce/3.5.8/tiny_mce.js:2
- Uncaught ReferenceError: tinymce is not defined module.js:1
- Uncaught ReferenceError: tinyMCE is not defined yui_combo.php?moodle/1374671241/editor_tinymce/collapse/collapse-min.js:1
Digging further, I found the error on tiny_mce.js with the "uncaught syntax error" is around this area (I beautified the JavaScript for better readability and it ended up on line 3344):
pi: function(h, i) {
if (i) {
c.push("")
} else {
c.push("")
}
if (a) {
c.push("\n")
}
}
I also have no clue why the page is not seeing TinyMCE as defined.
In my browsing of multiple sites, one person mentioned being able to open the file picker in Moodle 2.5 when logged in as a regular non-Moodle user. They, too, have no answer to the problem, but I tried that and the file picker did, indeed, open.
Update
I've found it's not quite just the file picker. This whole thing is tying in to TinyMCE not loading properly...with the editing toolbar capability (whether collapsed or not.) It acts as if it's a simple text editor.
I fought with it and ended up causing more problems than solutions, so I uninstalled everything, and started from scratch. I have no plugin add-ons, no fancy themes (it's the basic one it installs with), and no customization, and it's still buggy.
The console continues to say:
- Uncaught SyntaxError: Unexpected Identifier /lib/editor/tinymce/tinymce/3.5.8/tiny_mce.js:2
- Uncaught ReferenceError: tinymce is not defined module.js:1
- Uncaught ReferenceError: tinyMCE is not defined yui_combo.php?
And it pauses the debugger on practically every page with this. It's telling me that there's a problem with how TinyMCE is called in.
I've submitted a bug report, but haven't gotten the answer yet. What I'm hoping for is someone else to have had the same problem and come up with the solution, remembering there is no theme customization, no add-ons...so they can't be at fault.
As a matter of fact I also banged to this issue after upgrading to Moodle 2.5.1+, and after digging it for hours came up with a solution that made things work smooth again, I have disabled Cache JavaScript from:
Home / ► Site administration / ► Appearance / ► AJAX and Javascript
After saving the settings the file picker started working as normal. I am not sure how bad this will affect overall moodle performance and how bad it will increase the load on server and website loading overhead, but at the moment that was the only solution that I came up with.
Hope this will help...
version 2.5.1+
The FilePicker doesn't load when editing is turned on.
If you have this issue where the FilePicker hangs while loading, click on the following:
Administration | Course Administration | Turn editing off
Then refresh the page with the FilePicker that you need to use.
I'm putting this as an answer, because I received one, and I want everyone who ends up with a similar problem to know the way to solve it.
The problem was with the admin user profile settings. The Moodle team responded, and told me what to do.
It's as simple as:
Change the admin's user profile and set not to use html editor by default.
Purge all caches both in moodle and in your browser.
Make sure that in "Site administration ► Development ► Debugging" you have "debug messages = developers" and "display debug = yes"
Thanks!
For example, I have an ajax request and it returns <script src='buggy.js'></script>.
Problem is, it doesn't show up in sources or resources panel. That means I can't do all the cool stuffs like adding breakpoint and inspecting the elements as they run.
I could only see the source of the js file under the Network panel.
Is there anyway to make chrome add them to the sources panel?
Or how do you guys go about debugging dynamically added scripts?
Using Canary.
I was having the same problem, and I found a workaround that is better than the deliberate exception. It does still require changing the code as opposed to just setting a breakpoint inside the chrome dev tools.
I tried using the "//# sourceURL=dynamicScript.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.
Please refer to https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript
(Original link is broken-- archived link below)
http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript ("Breakpoints in Dynamic JavaScript").
When I dynamically load a snippet of html containing javascript via AJAX, I cannot see that content in the source tab in the developer tools window in Chrome 22.0.1229.94. Tellingly, I went here
https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#js_dynamic
This page shows an example developer tools window which is out of date. There is a button on the page to load a dynamic script and it does not show up in the source tab when you do.
As a work-around, I have found that adding
debugger;
to the script and reloading it will cause it to pause in the dynamically loaded code, but unfortunately, all the line numbers are greyed out and you can't set any breakpoints within the debugger.
Am I missing something here or what?
Thanks,
Rob
When you use a library or javascript code that you have loaded it dynamically, you can use the phrase
//# sourceURL=foo.js
at the beginning of your javascript code that foo.js is the name that will be assigned it. debugger will show it with that name.
This is true in chrome, and I think in firebug too.
In this case you can place a breakpoint in the dynamically loaded javascript code.
Possible duplicate of:
Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?
Don't know if this works or not in chrome (This definitely doesn't work for me now, may be in the past).
//# sourceURL=foo.js
Working Solution
For your dynamically loaded script via ajax to appear in your chrome source tool, you need to add the following line at the start or end (I prefer) location of your script file:
//# sourceURL=foo.js
And your script with name foo.js will appear at the left pane of source tab under (no domain) dropdown
->localhost
-- source/src
->(no domain)
-- foo.js
Alternatively you can add the below line in your script anywhere between the scripts.
debugger;
In chrome, you can use " debugger; " statement to break at a statement when debugger panel is open. Chrome will simply ignore this if the debugger panel is closed.
This will help stop your script in debugging mode and you will see your script in source (debugging) panel with name like VM****.
Hope this helps.
You can use //# sourceURL. Chrome doesn't seem to be supporting //# sourceURL for inline scripts. However, it does work on eval expressions. This article gives more details about naming eval blocks and naming of any anonymous functions in your code.
Instead of using eval, you can try embedding a script tag or JSONP may be.
Varunkumar Nagarajan
for me it happened on nodejs project.
i restarted server and open in new tab my app and tada!..
Alternatively, to fix this problem you can open developer tool in a seprate window by clicking the icon. Now reload your script, and it will shown in script tab as expected. I know this is not a solution but a work arround.