Jump to content

Review JS Console


PrateekSaxena

Recommended Posts

Hello :) ,This might be a little bit off-topic but I would love it if I could get your reviews on this :) . I have written a Console or a Logger if you may in JavaScript. This Console allows you to log information from you JS code that can be used for debugging purposes. The user can also add watches on variables and stuff. This is for JS Developers. You can download it from here SF.net Download. You can see screenies over here Console Screenshots. I would like your feed back on the following :) -

  • Features: I have added the features that I felt were useful. I was thinking of adding some CSS and PHP features too. If there are any features that you would like please tell me!
  • Bugs: Are there any bug that needs to be squatted immediately?
  • License: Currently it is under the MIT license, and that is only because it is the only License that I have read fully. Even thought it seems nice but that part that says that I allow the user to make sub license and stuff is not good :blink: . So is there any Open Source license that you know of that I can use??

Thanks in advance for any help! I know that code is not good but I made this in like one and a half hours for a quick job and now I will be optimizing everything or js.console 1.5. :ph34r:Thanks,Prateek

Link to comment
Share on other sites

License: Currently it is under the MIT license, and that is only because it is the only License that I have read fully. Even thought it seems nice but that part that says that I allow the user to make sub license and stuff is not good :) . So is there any Open Source license that you know of that I can use??
Look into the GPL, LGPL, and BSD licenses.http://www.gnu.org/copyleft/gpl.htmlhttp://www.gnu.org/licenses/lgpl.htmlhttp://www.opensource.org/licenses/bsd-license.phphttp://en.wikipedia.org/wiki/BSD_licenseThat's funny, I went to Google and searched for BSD license, but it's easier to just go here and search for license:http://www.google.com/bsd
Link to comment
Share on other sites

Thanks! Could you also please suggest more features for the console?

Link to comment
Share on other sites

Alright! I would await you reply!

Link to comment
Share on other sites

I'm not at all experienced in JavaScript. I only know some it's basic syntax. So... how exacly do I use this so called console? I mean I read the readme and understood how to create the console, but... how... what the? I don't get it... And what's with "taking over the world"?

Link to comment
Share on other sites

It doesn't really seem like so much of a Javascript console, it's just a place for messages. There are 4 tabs that each display messages, so all it really is is a way to have a message appear on one of four possible areas, and you can also drag it around. For example, watching a variable is sort of mislabeled. You're not watching, you're tracing. You have a function call (addWatch) to display the value of a certain variable, that's all it does. That is a trace. If the variable were truly being watched, then any time the value of that variable changed you would see the updated value, without having to call another function that will trace the value back out. Things like watching a variable are for debugging code automatically, you wouldn't want to go in and add a bunch of function calls to display values, because at some point after you're done you would have to go take all that debug stuff out. Debug utilities just let you do something like watch a variable or step through execution without having to change the code. Likewise, something with an error log would be expected to trap errors automatically and display them as they occur. You have a function call to add a new error message, so there could be errors happening that aren't showing up under the error tab because the programmer didn't put the function call there to add the message. So consoles and debuggers should be automatic, they shouldn't require you to modify the code and add things like function calls in order to trace execution or program state.So I'm not trying to put this down or anything, I just think it is mislabelled. I wouldn't really call it a console, it's just a generic message center. The key difference is that a console is automatic, it displays errors and warnings as they happen (without requiring an explicit function call).Also, "successfully" is one word. Saying that it "loaded success fully" is saying that it fully loaded something called success. Also, license is incorrectly spelled.

Link to comment
Share on other sites

it throws an error on load in IE6 but works fine in Firefox. I'll blog about it when you get the IE bug fixed if you want.
Ok, I will correct it and tell you! I would love it if you blog about it! Thanks!
I'm not at all experienced in JavaScript. I only know some it's basic syntax. So... how exacly do I use this so called console? I mean I read the readme and understood how to create the console, but... how... what the? I don't get it... And what's with "taking over the world"?
I know that the README.txt file is not very descriptive and stuff. JustSomeGuy is right it is not really a debuger but a message center. The taking over the world part if just a joke. Like the warning part says that the Console is trying tp take over the world but the error's section says that is failed to do so!
The Logger Control provides a simple way to read or write log messages with a single line of code. With this control, you can tap into the rich event-driven messages included with the YUI Library's debug files; This messaging allows you to get a fuller picture of the inner workings of any YUI Library component. The Logger Control provides a simple messaging interface that allows you to filter, pause, resume, and clear log messages on your screen. Whether or not you invoke this UI, you can monitor log output via the FireBug extension for Firefox or via the Safari JavaScript console. The Logger Control supports logging messages with customizable categories and sources. Adventurous developers can extend Logger to build their own implementations to suit any requirement.
@justsomeguy : Sorry I did not know that this feature was called Trace. I will definitely correct this in the next release. I wanted that it would be able to find out errors and display it in the errors tabs but was not able to find a way to do so! I was actually trying to make something like the Yahoo Logger Console, and I have mentioned what they do above. And sorry for the spellings I will correct them too!
Link to comment
Share on other sites

Yeah, I understand. Yahoo just calls theirs a logger, that's probably more accurate then calling it a console (although the distinction is pretty arbitrary). For a message center though, it's a good job. One thing I would change would be to move all of the demo code into the HTML file instead of the Javascript file. Keep the Javascript file a clean script of the message center, and have the Javascript in the HTML file create the object and send all of the test messages. That way people don't have to edit the test stuff out of the Javascript file before they use it, and it will encourage people to write their code in external files other then your library, so that when you release a new version people can just replace the one Javascript file and have it work with all the code they already have.

Link to comment
Share on other sites

Okay...I will do that! In the new release I was thinking of -

  • DIV highlighter which would first populate a list of all the DIV's that exist in the HTML, hopefully in a nested format and then on mouseover it would be highlighted!
  • CSS Viewer, in which one would be able to see all the CSS stuff that has been implemented for a particular DIV

Any more suggestions?Any ideas on how I can actually be able to find out about errors and stuff??

Link to comment
Share on other sites

hey thanks man...that is going to be very useful!I will use DOM for the DIV thing that I was talking about!Any feature suggestions??

Link to comment
Share on other sites

Whatever I can make actually! I want a good idea!

Link to comment
Share on other sites

Adding error capturing would help a lot. It would be nice if you could also track when a variable changes and implement variable watching, but I don't think you can do that with Javascript. You might be able to though, some browsers may actually run this and some might not. But Javascript has an onchange event, right? So maybe you can set a handler to fire when a variable changes. So if someone makes a function call to watch a variable:

addWatch("var");

Your addWatch function can set an onchange handler, which would be a callback for a function that would display the variable name and value.

function traceVar(name, val){  alert (name + ": " + val); //whatever your output code is}function addWatch(name){  eval (name + ".onchange = traceVar(\"" + name + "\", this.valueOf());");}

You might have to experiment around, I'm not sure if this would even work. I'm just sort of thinking that the Javascript object model might allow for event handlers to be registered for variables.Actually, forget about that, look at this:http://devguru.com/technologies/javascript/10770.aspThat only works for object properties, but you may be able to use it.

Link to comment
Share on other sites

Alright I would try to implement that too and see the link! I hope that js.console 1.5 is better than this :) !!

Link to comment
Share on other sites

Whatever I can make actually! I want a good idea!
Well, in that case I agree an external application would be a lot better, for the arguments mentioned above, and also because I wouldn't expect to debug a JavaScript by bugging it with more code.
Link to comment
Share on other sites

Well, in that case I agree an external application would be a lot better, for the arguments mentioned above, and also because I wouldn't expect to debug a JavaScript by bugging it with more code.
I did not understand what you just said :)
Link to comment
Share on other sites

Hi,So there are certain changes that I have decided to make in the Console, so that it actually becomes a console and not just a Logger. So there are now 6 tabs having Logs, Errors, Watch, HTML, CSS Script. All the log will be in the logs part and will be of two types that is "info" and "log". Errors will be pointed out automatically. I still have to see whether it will be a Watch or a Trace. In the HTML,CSS,Script parts it will be like the HTML,CSS,Script parts of Firebug. I have figured out how to make the thing and I am hard on work! I have attached an image of the new interface, which is a screen shot and not something made on PhotoShop. the console now actually looks like this on the HTML page.Your comments please...post-8609-1173961553_thumb.png

Link to comment
Share on other sites

he he...thanks for that link for "onerror" :)

Link to comment
Share on other sites

Hey aspnetguy....I wanted to ask one thing!When I do the onerror thing then there is on problem, if let us say I call 4 undefined functions in a row, then it displays only the first one and then stops the script. How can I make it display all the errors??

Link to comment
Share on other sites

so the errors section would only be displaying one or no errors and never a list of errors??

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...