I've been using Sublime Text for creating the Javascript flavor of Extendscript scripts for our company. However, I've been curious about Aptana Studio and whether or not it might be a better choice to move to it. Already, however, I can see two big issues:
Handling Extendscript-specific code
Content assist using a DOM.
In the regular versions of Eclipse, if I wanted to use a specific piece of code from a library and get content assistance with it, I'd just add its .jar file to my build path and I was done. However, Javascript doesn't seem to use libraries, per se, so how would I get it to know the various methods and properties of a TextField object when I use the ol' Ctrl/Cmd+Space after typing in a reference to one, followed by a dot?
And at the beginning of my scripts, I have to use preprocessor directives, such as:
#target indesign;
#targetengine session;
so that the script knows what program I am using, if I want to #include other files, etc. These commands are, of course, specific to Extendscript, so when Aptana sees them, it breaks the Javascript syntax highlighting for the rest of the document. Is there any way to set Aptana to, perhaps, ignore preprocessor directives? Or add their syntax into its rules checking for syntax highlighting?
Also consider the ExtendScript Toolkit, if you haven't tried it yet. While it's not as powerful an editor, it does know about some of the DOM functions, and it has convenient built-in debugging tools for working with CC applications.
Related
I just finished my website, which I started 2 years ago. I was always trying new things, which sometimes included adding different frameworks or other external JS files.
Now I don't know which of the linked files/lines of JS are unused. Is there a tool which can detect these files and lines of code? It would save me a lot of time.
This answer offers Google's Closure Compiler which, in the process of minifying and concatenating your JavaScript code, can remove "dead code".
Quoting from the documentation for the compilation levels:
Compilation with ADVANCED_OPTIMIZATIONS removes code that is provably unreachable. This is especially useful in combination with large libraries. If you use only a few functions from a large library file, the compiler can remove everything except those functions from its output.
Also see this answer which contains more information on Google's Closure Compiler.
I had this need so I created a tool that detects unused JS on the browser side, not just from the sources, so it can also test third parties scripts.
It works by creating a local proxy on your computer that intercepts JavaScript requests and instruments these files on-the-fly. The tool is than able to detect which parts of the instrumented files have been used by the page, and which don't.
I made it open-source and you can find it here: https://github.com/gmetais/unusedjs.
For this answer, I am not sure whether it's helpful or not. How about trying Sonar. Sonar has a javascript plugin that can check your js code quality and list the code that unused.
I've been looking at a similar task for the past few weeks myself and ended up with the following powershell query:
PS> Get-ChildItem -Path C:\PathToProject\ -Filter *.as?x -Recurse
| select-string -pattern "src=""([^""]*.js)"""
| Select -Expand Matches | Foreach { $_.Groups[1].Value } | select -unique
First it recursively selects all .aspx and .ascx files in our project directory, then finds src attribute values that refer to .js files (presumably those of script elements) and traces distinct values - voila, you have a list of .js files as referenced in your project!
It would be fairly straightforward to adjust the query so that it fits your specific project and its structure. Make sure you don't iterate over outdated files that may include obsolete references. Account for markup discreptancies - could you have used single quotes for attribute values in the past, or left unnecessary whitespace around the "equals" symbol, or both? Could you be including these files programmatically or asynchronously from inside another js files? etc. etc.
In Google Chrome Developer tools, you can now view "Coverage" on the Sources tab to display unused Javascript and CSS by percentage of each file, or even on a line by line basis.
Here's the announcement of the feature in 2017.
Though it is pretty old question, this might help for this type of problem - https://github.com/skpaul/LocateMe
I wrote this to use in my project.
I know there is an extension called Dust-Me Selectors for Firefox and also that it doesn't look at dynamic HTML generated by JavaScript.
I'm looking for tool(s) that can identify all unused selectors from a stylesheet, attached to several pages, with all the JavaScript running and checking selectors?
The only option I know right now for this is manually checking files and finding unused selectors :(
In IDE's - I believe NetBeans provides a warning message when writing Java code, if a library is not under use. Without an IDE (NetBeans, Eclipse, Dreamweaver, etc) plugin to search for the selectors what are my options?
Also, is there a tool to check for unused selectors in the same file. I mean if all the JS, HTML and CSS code is in the same file.
I think that http://unused-css.com will do exactly what you want.
https://github.com/geuis/helium-css can help
as well as: http://razorfast.com/2010/11/21/announcing-cssess-the-bookmarklet-that-finds-unused-css-selectors/
I use Dreamweaver for development, mostly PHP, html, css, javascript. Is there anyway to break up JavaScript files? or maybe a better IDE that makes it easier to work with? It just becomes quickly difficult to read and find what I'm looking for.
Thank you!
Intellij and/or Webstorm by Jetbrains has the best JS tools I have found. It has very good (as good as it gets, for JS) intellisense (autocomplete for variables and methods) as well as refactoring for variables and methods. You can cmd+click into method definitions from anywhere, as well. Unfortunately you need to pay for them, but if you are using Dreamweaver you had to pay for that. If you are only doing html/css/javascript Webstorm is the way to go.
Yes, you should break up your javascript files into relevant parts just like you break up your php files into relevant parts. The one key factor here is they should be combined and minified before being served up to the browser so the user does not have to make several network calls to your server for each .js file.
Check out Google Minify for an easy solution to that issue.
Take a look at the JQuery source to see how they divvy up their files. Now look at their combined framework, and of course their minified framework. What is actually served up to the user looks nothing like the source.
Uh, Dreamweaver?
Definitely use a different IDE. Aptana won the poll here :)
I've inherited an legacy project with tons of javascript files all over the place...
Is there a way to find which of those files are used inside pages?
Thanks in advance.
Use a debugging tool like YSlow!
http://developer.yahoo.com/yslow/
Such tools will usually point out redundant files and code.
You can inspect the website logs of past, say, one month, and locate all *.js files requested by browsers. The log might contain referrer page which makes things easier.
Something that I do very often for .asp files: find a good text editor that allows you to find text inside files/folders. Visual Studio .NET does an excellent job but I've tried and had success with Notepad++ too. Find all files that contain .js. If your text editor provides regular expressions support for searching (the aforementioned products do) this makes things even better. The regexp I use in VS is \.asp> (dot asp followed by a word boundary). The search results are often displayed in a window from where you can copy every thing and do some manual processing via more regex operations or copy the data to an excel file.
Macromedia Dreamweaver does an acceptable job if your website has some structure in it. There is a "Find broken links" command in Dreamweaver that generates a side report called "Orphaned files". The orphaned files report can tell you which js files are not referenced by any page. Then you can run the Dreamweaver's "Find" command (find in entire local website/find in folder) to double check each file one by one. I've tried that too. One thing to note is that Dreamweaver might not be able to detect cycles. E.g. if a file foo.js is used by bar.asp but bar.asp itself is not referenced by any other page, Dreamweaver will flag bar.asp as orphan but not foo.js. The recent version of Dreamweaver might do a better job.
You could create a script in a general purpose scripting language that runs through every html file in your project, checking their script tags. Or you could just do it manually, which may or may not save you some time depending on the size of your project.
I have experience using Netbeans with Java but am new to using it with Javascript. I know how to open javascript files within a Java Project but is there a way to open javascript in a "javascript project" where I might be able to "compile" the code and see possible errors. Is this possible or am I asking too much?
By compile, I'm assuming you mean simple validation (like using undefined variables or typos etc.)
I may be wrong, but netbeans has the worst javascript support. If you want simple validation of Javascript code, you may look at Eclipse javascript environment (or the Aptana plugin). IntelliJ IDEA has very decent validator as well.
To check for code quality you can use some JavaScript analysis tools like JSLint.
http://www.jslint.com/
But it's not nearly as good as compilation in a fully typed language like Java.
An alternative is to not write the JavaScript at all but use Java instead and have it converted to JavaScript. This gives you the advantage of writing fully typed code that can be statically analyzed and checked for errors. Google's GWT does this and there are other similar options.
http://www.artima.com/lejava/articles/java_to_javascript.html