We Keep Coding

How do I solve the ReferenceError in my API calls from my UI?

I have done a microsoft tutorial called Web API with Javascript
I now have a UI made with Javascript and HTML which looks like this:
How do I use the UI? I keep getting a Reference Error. Is there a specific syntax I am supposed to follow when I add and edit something via APIs?

In the future, please copy and paste error messages into your question. I would normally copy and paste the error message in my answer, but I don't want to type it all out :)
The errors (red) mean that you're trying to use JavaScript that is not defined yet. The warnings (yellow) are the reason why.
The second warning says that it could not load the JavaScript. That explains the errors. The first warning might be the reason why. It's saying that the MIME type is empty, when it should be application/javascript.
But you said in the comments that the site.js file is empty when you try to access it directly. Did you save all the JavaScript in step 4 of that tutorial to site.js?
And what are you using as a web server? IIS Express?

Debugging JavaScript in client

I'm facing an issue while debugging my application. Following is the architecture:
Server: Java (Servlet)
Client: React+D3
Problem: Whenever, I change some react or d3 code and if an error occurs then it just shows me that some react (or d3) error has occurred but never tells me which function the error occurred (as seen in snapshot). Now, I know that simply debugging it by having the information like variable name and searching where I defined that variable. However, situation becomes tough when I use same object multiple times (say window) and had made several changes in the code. In this case, a specific line number where the error occured can be handy and quick. Let me know if I'm missing some basics about debugging such applications?
EDIT1:
1. In the snapshot, http://localhost:8080/..../Server Server is the main servlet application, kind of launchpad, which triggers several other react-based js files.
2. The mentioned ReferenceError is inside a function updateWindow() but the console never mentions this (and that's my problem).
PS: I'm using Eclipse tomcat on server-side

I think there's no straight forward solution to this problem. So, I'll post the method that worked for me with few additional points:
Problem: It doesn't gives a nice error trace like standard Java application, probably because it mixes with JavaScript code.
At every line of the error trace, line:column specifies the error line. I used this as a reference and started manual debugging from where my application launches i.e. Server.java and look where I defined the createChart() in the JS file and drill-down until I found the referenced variable.
In case of ReactJS' error (an error after resolving reference issue), I debugged it with normal react.js (not minified version react.min.js) so that it shows me exact line of error. Minified version is cluttered and is useless while debugging.
PS: If someone has better answer I'll edit this in future.

Not able to access variable in google chrome console

I am using the latest version of Meteor js. I am a newbie and couldn't find the solution. I have surfed for this problem a lot.
Before going to the problem, please have look at the directory structure first.
My directory structure of the project is like this :
\client
\main.html
\main.css
\main.js
\imports
\lib
\todos
\todos.js
\server
\main.js
I have created a Mongo Object in todos.js.
export const Todos = new Mongo.Collections('todos');
This is working fine.
Now in client\main.js, I am importing this object,
import { Todos } from '\imports\lib\todos\todos.js';
Note: I tried relative and absolute both type of addressing.
I put a debugger after that and checked and the variable is there. I can access that variable on the console. But as soon as I pass the statement and all the code is rendered on the browser(google chrome), I am not able to use Todos. It is giving me a ReferenceError. The error is
Todos is not defined.
I know there is no problem till the browser is loading because I checked that. I have surfed a lot. Please help me.
Thank you in advance.
Edit 1: I am using windows 7 if that is necessary.

As the comments above said, variables declared or imported in a file/module don't end up on the developers console.
What you can do to get stuff on the console is import it to the console using require
> require('/imports/lib/todos/todos.js')
Any valid absolute path or package will work here
Note: the path separators are always *nix style /

I had a similar problem while trying to evaluate moment from Moment.js in Chrome console. It was imported by the script being debugged/under breakpoints but does not work in console. import or require Moment.js in console gave me errors and did not work for me.
I ended up switching to Firefox Developer Edition, where I can put breakpoints and then evaluate moment in its console out of the box without any problems.

Firebase 3.6.2 Web SDK missing "use strict"

I was trying to get a web app up and running and followed a very straightforward tutorial from Firebase. The link is pasted as a comment below.
The webpage, upon being loaded in Google Chrome, does not behave according to the tutorial. You are supposed to be able to change the value at a location specified at the child node "text" of my Firebase database and the webpage ought to update the text of a to reflect the change of the database. It doesn't. Dreamweaver tells me I'm forgetting the "use strict"; line in Firebase.js
I was wondering if anybody had any idea why this was? I imagine I'm making an obvious mistake somewhere.
I've also included screenshots of the error and my source code. I appreciate any help!
Thanks!
error from Firebase.js
my source code

Dreamweaver runs a linter on all code and the 'use strict' warning is a red herring for your problem. Code without 'use strict' isn't going to break anything so ignore it. If you find the warning distracting, you can disable it in Dreamweaver.
Anyway, if something isn't working in your app, you should be checking for errors in your browser's console log.
If your screenshot contains the entirety of your code, your problem might be that you're trying to set the innerText of a non-existent element, bigOne. This would present in the console as an error like "cannot set property innerText of undefined".

Getting data from the browser's console using javascript

I don't know if this has been asked before, but what i'd like to be able to do is get data from the error console within the browser itself(if it supports it) this would be for when a user sends off a bug report it'd pull up any errors related to pages at my website for things such as typos in code and other things that somehow managed to slip by. Also, in that regard is there a way to pass the errors from the console to a useable format? If this isn't possible, then i could just tell them to copy and paste what came up from the site itself.
I thought of this right now as i was thinking about how to make the bug reporting system run better since the entire thing is basically ran within the browser and for the backend I can easily just look at error logs but for the frontend ie javascript bits of things it's not goign to be as easy.
So to finish wrap all of this up in one little statement, is there an easy way to get the data from the error console and be able to send it along via javascript ie to a form, or something similar.

You can use the onerror event in JS to get the details of the error. Hoptoad do this for example and log the errors to their console, Their code re-uses lots of nice JS scripts including a printStackTrace function that is great.....
You can see how they do it here:
http://hoptoadapp.com/javascripts/notifier.js