Just as we have http://www.sliver.com/dotnet/SnippetCompiler/ (link inactive on 2021-04-24) to test a C# code quickly, I can also do the same for javascript in chrome debugger tools and Firebug (firefox).
I would be more interested in a tool or some online tool which can run a small piece of javascript and tell if it properly runs in prominent browsers and the result.
UPDATE:
I'm a developer and not tester. I don't want to install all browsers on my PC. I like chrome and I can debug/test (for syntax/result) almost every javascript quickly in chrome by just clicking Ctrl+Shift+J and pasting my javascript in its console. But that will just test if it works in chrome. I'm not interested in creating a library right now. Google and Stackoverflow helps me get the greatest and latest javascript for a specific task very quickly.
I found one way. But it is not that quick and still would like to know better answer. May be some kind of tool which can do this.
One Way:-
Write your javascript enclosed in try-catch block on JsBin and create its public link. Now check your link with BrowserShots.
Write considerable amount of html (conditionally) using javascript to be able to see the difference on Images given by BrowserShots.
To propose another option 10 years down the line: I would suggest using JSHint for this.
The first page as you navigate to their site allows you to simply paste a JS snippet and get information regarding everything from potentially confusing syntax to "minimum ES version" warnings.
Furthermore, you can also install JSHint to your project and have a command to either run manually or slot into your existing build chain to do the same thing locally with custom rules.
I've also found this tool: JS Compatibility Checker, which is based on Can I use.
Could be helpful, but won't outline every issue.
You can easily make a test page to house your snippets, then try them in your target browsers. That has the added advantage of providing a central library for the snippets you do create, so you don't have to go hunting through entire directories looking for that cool little widget you created back in 2010.
Also, you can check the MDN Web Docs Browser Compatibility section if that interface is available (Eg. window.location - https://developer.mozilla.org/en-US/docs/Web/API/Location#browser_compatibility)
Related
So I've been coding for a while now in school, and I'm having my first introduction into a real working code base at my new job. When it comes to debugging, like if I want to find out what a certain variable is equal to, I'll often just console.log() things out and hope that something useful comes out of it.
It seems really inefficient considering how many moving parts there are in the code. Most of the time, it works eventually, but it feels so barbaric just editing the code over and over and looking at the browser's console until something useful comes out, and it feels like there has to be a better way to debug in a production environment. I am specifically using Ember.JS, but this question would apply to any framework like React or Angular or Node.
There are many tools out there to debug JS, the most "basic" being the debugger in your browser. Some tools go further also, for example VSCode has a slew of extensions that open and control the browsers debugger.
Chrome: https://developers.google.com/web/tools/chrome-devtools/javascript/
Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger
Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger
Safari also has one in the develop menu but there is no site describing it in detail - it is located in the sources pane
If you use VS Code, you can run Node apps in debug mode then select Node.js.
I would like to see what the JavaScript interpreter is doing in real-time, which line it is reading and which function it is running, because I would like to make a full debug on every little piece of the JavaScript to make it faster. For this I need some tool to tell me what the interpreter is doing exactly, if it is defining a variable, if it's running a function, if it's in a loop, check the current intervals (defined in setInterval).
As far as I know Firebug can't do that.
Check out the javascript tab in Firebug, it's a full debugger. Set a break point and when your code hits that line you will have full debugging access to variables etc. Chrome has similar functionality in the developer tools which are included in a standard install.
If you're looking to do automated monitoring/analysis of your program, check out Chrome's Debugger Protocol. It provides a programatic API. I believe (but could be wrong) that this is what tools like Web Inspector and node-inspector are built on.
If you want something more than what the standard Firebug/Web Inspector interfaces are built on, you're going to have to either use something like this or start hacking on the internals of the V8 and Gecko JS interpreters.
As the other answer says,if you want to go step by step, setting a debug point is the way to go.
But since you seem interested in improving performance you might want to consider optimizing only the true bottlenecks in your application. To see which functions take the most to run, and other statistics you might want to take a look at console.profile() (available both in firebug and chrome).
Here is an example:
console.profile('myProfile');
//some code you want to know more about
console.profileEnd();
You can also start it manually by clicking the Profile button in the Console panel(in firebug)/ Profile panel (chrome)
In Chrome you might want to also take a look at Heap Snapshots (they tell you about memory usage).
I know I'm not the first one that would like to have #region and brace matching support for Javascript. That's why I don't want to install one by one and see which one behaves better and which functionality it supports.
I would like to ask other fellow developers to provide feature comparison for these Visual Studio 2010 Javascript extensions:
JSEnhancements
Visual Studio 2010 JavaScript Outlining
JScript Editor Extensions
And any issues you might've had with them. JSEnhancements seems to have the most downloads, but that still doesn't give me any ideas of its features compared to others.
It's great that Microsoft provides some sort of integrated extension propagation and management, but there's an overwhelming amount of them and it's really hard to choose the right ones.
Other Javascript VS tools
There are other tools as well that some of you may be using. If you find any of those particularly useful, please provide some information and I'll add it here to this list. It may help us lots.
Javascript Parser - parses Javascript file and displays a tree structure of the code (closures/functions/...)
Since nobody answered my question let me give you some information about JSEnhancements that I installed in the end and am very very pleased with:
it supports #region in javascripts (// #region Name) as well as in CSS files (/* #region Name */) which is really great and they don't interfere with anything since they're part of comments
it highlights matching braces even though this is not always working, you have to position yourself correctly. Maybe it interferes with Power Tools that I also use...
Sometimes you have to close+reopen the file for regions to start working. Sometimes writing them down doesn't recognise them. Newer versions work as expected It obviously works fine when you open the file and it parses it.
Anyway. It's stable, works and I'm very pleased with this extension. You won't miss with its installation.
Well there is one more tool for javascript "Javascript parser" which will parse your files and make a map on it. It is good but for me working with jquery it didn't help much.
Among the rest of the tools you mentioned, I was working too with JSenhancements for some time but I have switched to JScript Editor Extensions which I can tell seems more promising (highlight of current word, para comments etc).
It hasn't crashed since.
Try JScript Editor Extensions by Microsoft for VS2010
JScript Editor Extensions is much better than JSEnhancements.
It will highlight matching braces, cold-folding the blocks, current word highlighting.
Although it does not support #region name,
but you can use javascript curly brackets to enclose your code and place a comment above to know what you are making collapsible.
//My region
{
//lines of code
//lines of code
//lines of code
}
these will collapse and don't appear to affect anything else. javascript just treats them as simple compound statement.
Further, I would also recommend Web Standards Update as it also helped me with intellisense and validation.
Javascript Explorer -
Though this will not region'ize your code, it sounds to be handy!
I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!
Warning: I have very little JavsScript experience.
In my past programming experience, I usually have a standalone interpreter/compiler, a text editor and a command line to compile/run my software or my tests (I love test driven development). I really like it this way, since I have the feeling of being in complete control over the tools. However, editing JavaScript I need to put statements in a text file , open my web browser and click on reload. I don't feel comfortable with it, as I cannot really see what is going on (besides some alert boxes).
Can you suggest me (I'm on a Mac) another workflow? Perhaps with a debugger? Is there a standalone JavaScript interpreter?
Opera, Internet Explorer, Chrome and Safari all come with good debuggers built in (links go to information about the debuggers).
They are all modeled after Firebug, an extension for Firefox (and the existence of which is why Firefox doesn't have one built in).
Firebug has a javascript debugger,a console, and a command line. I couldn't live without it.
Firebug is a firefox extension. They do have firebug lite for other browsers.
As far as workflow goes... Ctrl+S, Alt+Tab, F5 over and over again.
I would throw in validation there as well, use jslint either via one of the available command line tools, or via eg. Aptana which has builtin validation.
Setting up a simple build script is also preferable. I do it with all my projects and lets it handle validation, conditional code (debug versions etc) and minifying.
This http://github.com/oyvindkinsey/easyXDM/blob/master/build.xml is for instance the build setup for easyXDM. It does everything from pushing out new versions to the website to creating documentation and zip files..