Html 推荐用于纯 Web 应用程序（HTML5 等）的 IDE

Recommended IDE's for pure web apps (HTML5, etc.)

提问by Clay Nichols

I'd like to play around a bit with pure web app programming.

我想玩一些纯网络应用程序编程。

Coming from a VB6 background, some features I'd like are:

来自 VB6 背景，我想要的一些功能是：

• step-by-step debugging
• Visual UI design

• 分步调试
• 视觉界面设计

If we decide to do our next app as a web app, price isn't terribly important (a better IDE being more productive and pleasant to use).

如果我们决定将我们的下一个应用程序作为一个 Web 应用程序，价格并不是非常重要（一个更好的 IDE 会更高效且使用起来更愉快）。

Update: I'm looking for something like (what I hear you get with) jQuery where there is an underlying framework that takes care of all the browser differences. So I just plop a UI widget (Drop-down combo box, etc.) onto the IDE and the framework takes care of the javascript, etc. dealing with all the variations of browsers and O/S's.

更新：我正在寻找类似（我听说你得到的）jQuery 的东西，其中有一个底层框架可以处理所有浏览器差异。所以我只是将一个 UI 小部件（下拉组合框等）放到 IDE 上，框架负责处理 javascript 等，处理浏览器和 O/S 的所有变体。

采纳答案by robertc

I think you'll struggle by starting off with those requirements.

我认为从这些要求开始你会很挣扎。

• Step-by-step debugging: More commonly, you're going to want to do this in the browser itself rather than in the IDE. If you have a bug that only happens in Chrome 6 then being able to debug JavaScript in an IDE isn't going to help you much
• Visual UI design: Again the issue is that, in the end, what it looks like visually in your IDE is unimportant, it's what it looks like in different browsers, on mobile phones etc. that matters

• 逐步调试：更常见的是，您希望在浏览器本身而不是在 IDE 中执行此操作。如果您有一个仅在 Chrome 6 中发生的错误，那么能够在 IDE 中调试 JavaScript 对您没有多大帮助
• 视觉 UI 设计：同样的问题是，最终，它在 IDE 中的视觉外观并不重要，重要的是它在不同浏览器、手机等中的外观

Probably the closest thing to what you're after is Dreamweaver, or if you're more comfortable with MS products you could try Expression Web(never used it myself). Personally I use Komodo Edit, the latest version has support for HTML5 and CSS3, and there's a paid versionwhich adds a number of features, but neither are IDEs like you're (apparently) expecting.

可能与您所追求的最接近的是Dreamweaver，或者如果您对 MS 产品更满意，您可以尝试Expression Web（我自己从未使用过）。我个人使用Komodo Edit，最新版本支持 HTML5 和 CSS3，还有一个付费版本，它增加了许多功能，但也不是您（显然）期望的 IDE。

In response to your edit: Komodo Edit has built in support for jQuery (ie. it offers code completion and tooltips), and you'll probably get a long way with a CSS framework(or even an HTML5 one) for ironing out the browser differences, but primarily front end web development is about editing text files and looking at them in browsers. The sort of things that IDEs are generally helpful for are not really major factors.

响应您的编辑：Komodo Edit 内置了对 jQuery 的支持（即它提供代码完成和工具提示），并且您可能会使用CSS 框架（甚至是 HTML5框架）来解决浏览器问题差异，但前端 Web 开发主要是关于编辑文本文件并在浏览器中查看它们。IDE 通常有帮助的事情并不是真正的主要因素。

Further edit: Also, if you want a JavaScript widget framework, you probably should look at one of:

进一步编辑：另外，如果您想要一个 JavaScript 小部件框架，您可能应该查看以下之一：

• jQueryUI
• YUI
• Dojo
• ExtJS

• 用户界面
• 唯
• 道场
• 扩展JS

回答by netrox

Clay, web development is nothing like software development. I have done both and I can assure you that there's no way you can make web development work like software development or visa versa. You just have to learn a new way of programming with Dreamweaver (that's what I use) or HTMLPad or any HTML editor would do.

Clay，Web 开发与软件开发完全不同。我已经完成了这两项工作，我可以向您保证，您无法像软件开发那样进行 Web 开发工作，反之亦然。您只需要学习一种使用 Dreamweaver（这就是我使用的）或 HTMLPad 或任何 HTML 编辑器都可以使用的新编程方式。

Even jQuery is NOT a visual IDE - you don't just drag the icon and drop it on a webpage. You have to CODE it (you insert its javascript and then add your code to manipulate the widgets) and then check the webpage online (or offline with local server). You have to know WHERE to put the widget. You need to learn HTML and CSS. It's required.

甚至 jQuery 也不是可视化 IDE - 您不只是将图标拖放到网页上。您必须对其进行编码（您插入其 javascript，然后添加您的代码来操作小部件），然后在线检查网页（或使用本地服务器离线检查）。您必须知道将小部件放在哪里。你需要学习 HTML 和 CSS。这是必需的。

回答by Clay Nichols

Another option I've seen is Google Web Toolkitwhich lets you develop in Java using Eclipse and debug within Eclipse (even at the browser level) and then "compiles" that to Javascript, creating one version of your code for each type of browser (so you only need on "set" of Javascript). Lots of built in stuff to otimize the speed of the code.

我见过的另一个选项是Google Web Toolkit，它允许您使用 Eclipse 在 Java 中进行开发并在 Eclipse 中进行调试（甚至在浏览器级别），然后将其“编译”为 Javascript，为每种类型的浏览器创建一个版本的代码（所以你只需要“设置”Javascript）。许多内置的东西来优化代码的速度。

回答by Clay Nichols

And another suggestion is : http://www.visualwebgui.com/but I don't know much about it other than it's targeted at .net developer.

另一个建议是：http: //www.visualwebgui.com/，但除了针对 .net 开发人员之外，我对它知之甚少。

回答by Ken

For a free IDE that covers most languages you can try RJ textedit. Has code folding. You can add to it's syntax definitions. Allows you to zoom your IDE font with the middle mouse wheel and ctrl, for those of us with bad eyes. Hitting f10 - f12 to test your code on IE, Firefox or Chrome, respectively makes it easy to see how it works on all three major browsers. Just download it, unzip it, make a shortcut to TEXTEDIT.exe in the RJ textedit folder and go. I find it the easiest to program in, no bull about workspaces or long set ups, just type in some JavaScript and or HTML code and run. With HTML5 elements being so easy to set up, I see no need for a visual editor myself. I just like typing something in and seeing the results. But then again we all walk the path differently don't we. Hope this helps.

对于涵盖大多数语言的免费 IDE，您可以尝试 RJ textedit。有代码折叠。您可以添加到它的语法定义。允许您使用鼠标中滚轮和 ctrl 缩放 IDE 字体，适合我们这些眼睛不好的人。分别按 f10 - f12 在 IE、Firefox 或 Chrome 上测试您的代码可以很容易地了解它在所有三种主要浏览器上的工作情况。只需下载它，解压缩它，在 RJ textedit 文件夹中创建一个指向 TEXTEDIT.exe 的快捷方式，然后就可以了。我发现它最容易编程，没有关于工作区或长时间设置的废话，只需输入一些 JavaScript 和/或 HTML 代码并运行。由于 HTML5 元素非常易于设置，因此我自己认为不需要可视化编辑器。我只是喜欢输入内容并查看结果。但话又说回来，我们都走不同的道路，不是我们。希望这可以帮助。