前端程序员的工具链都有哪些呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4386 天前的主题，其中的信息可能已经有所发展或是发生改变。

看了一些写前端的文章，大多就是忽悠，什么整合js, css，然后启用压缩啦，好好设置200和304之类的这些大路边上的东西，而对于更基础的工具链这部分基本上没有什么介绍。

虽然不太懂前端，但也常常需要做个网页什么的，发现自己的工具链少得可怜。想交流一下大家都用哪些工具链。

我先说我的：

工具就是自己喜欢的编辑器，然后调试器就是Firefox(firebug),Chrome和Opera，然后写一堆的HTML,JS,CSS再跑到浏览器里刷新然后看效果。手机端就更没谱了，就只会安装一个Opera Mobile的模拟器，然后使用一些简单的框架，比如less, bootstrap之流，然后其他基本上完全不懂。

这几个工具是能工作的，只是效率很低，有几个问题一直解决不好：
1, 浏览器的兼容问题，特别是HTML5的兼容问题，在PC端不知道有没有网站或者工具能介绍一下各个浏览器对于HTML5的兼容性问题。
2, 便捷性，每次都必须编写程序，然后在浏览器中刷新，不知道真正的前端在做活的时候有没有什么先进的，靠谱的，不玩票的做法？
3, 手机端兼容。
我的理解是现在手机上的浏览器分两种，一种是UA是Android或者iPhone的，这里面或许也包括Opera，而另一种是UC(大量的旧版本的存在，各种不好的js,css支持等等）
我只知道用Opera Mobile的模拟器来测试一下，但对于UC浏览器等等，就不知道怎么来测试了。

前端程序员的工具链都有哪些呢？

浏览器

工具

Opera

15 条回复 • 1970-01-01 08:00:00 +08:00

gucheen

2012-11-19 20:32:48 +08:00

1. https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
这个可以作为速查
2. 通常利用浏览器工具进行微调效率更高，使用编辑器的话，每次都需要保存+刷新，当然，现在有工具可以css免刷新了，有帖子，可以搜索一下
3. 移动端做的比较少，无法给出建议
看一下Google HTML/CSS Style Guide 会有很大帮助

pansafe

2012-11-19 22:21:51 +08:00

我觉得前端开发者都偏爱Ruby,偏爱nodejs,于是便有了osx+sublime text/emacs 的工具组合，然后less,coffee,blade这类前端可用的dsl多是通过nodejs的npm进行发布的，所以node可以说是不得不上，用firefox还是chrome应该纯粹是个人口味，我就搞数据时用firebug，搞样式时用chrome dever，速查工具首推MDN,https://developer.mozilla.org/en/,如果你还在查w3school请看看这里，http://w3fools.com/，自动刷新等可以自己写一个firefox下的greasemonkey脚本，也有三方插件 ,http://fed.renren.com/archives/1135

liliang13

2012-11-19 22:32:20 +08:00

getf5, 可以自动刷新

Keinez

2012-11-19 23:10:19 +08:00

只说说第二点，一般我写完代码之后用chrome的开发者工具看效果/微调或者整体修改，修改完了贴回编辑器里边，ietester同理，不过效率要低一些。

lisztli

2012-11-19 23:29:53 +08:00

coffee
stylus
makefile
rsync

momou

2012-11-19 23:40:11 +08:00

w3c 验证。。。

hzlzh

2012-11-20 00:29:43 +08:00

看看这个，或许有参考，
前端工程师工具推荐：
https://github.com/hzlzh/GeekPark-FrontEnd-Standard#%E5%B7%A5%E5%85%B7%E6%8E%A8%E8%8D%90mac

chone

2012-11-20 00:34:51 +08:00

兼容性的检测基本是个体力活，IE方面可以用IEtester，其他的基本就只能靠各种浏览器和模拟器了，更方便的也不可能做到，所以经验的积累就显得尤其的重要。

spritevan

2012-11-20 17:35:10 +08:00

在 tornado 里添加个 StaticComboHandler(): 用来打包文件，调用 lessc
再把 static 目录加入 autoreload._check_file 再开个 websocket 来自动加载修改后的样式，以及刷新页面

saharabear

2012-11-20 22:44:44 +08:00

@spritevan 看来手机上各种兼容只能是体力活了。

spritevan

2012-11-21 09:33:57 +08:00

@saharabear 我这儿只保证 mobile chrome，其他的浏览器看情况
开启 remote debugging 以后调试还是挺方便的
比之前用 adb logcat | grep 'Web Console' 轻松多了
https://developers.google.com/chrome/mobile/docs/debugging

chitsaou

2012-11-21 15:33:57 +08:00

查文件我用 [Dash](https://itunes.apple.com/us/app/dash-docs-snippets/id458034879?mt=12) ，内建了包括 MDN (HTML / CSS / JavaScript) 在内的文件库，不过要花钱买，试用期过了以后会出现奇怪的限制，我觉得很方便所以买了。

IE 测试我用 [ievms](https://github.com/xdissent/ievms) ，它会去微软的网站下载测试用的 [IE VirtualPC 映象檔](http://www.microsoft.com/en-us/download/details.aspx?id=11575)，安装在 VirtualBox 里面。由于是真的 Windows 和 IE ，所以出来的结果比 IETester 还准确，缺点是只有英文版，而且 Windows 是试用版的，总有一天会过期，到时候需要重新下载。

CSS Sprite 可以通过 [Compass](http://compass-style.org/) 来自动产生。

JavaScript 代码质量我使用 JSHint 来检查，搭配的是 [Sublime-Linter](https://github.com/SublimeLinter/SublimeLinter) 这个插件，存檔的时候就会自动检查 bad syntax 。

说到 Sublime Text ，我还会使用 [ColorPicker](https://github.com/weslly/ColorPicker) 这个插件，按下组合键就能叫出颜色选择的视窗，选颜色后会自动插入，要是先选取一段色码如 `#abcdef` 或有名的颜色 `gray` ，那选择颜色时就会使用选定的颜色。

即时刷新我是使用 [LiveReload](http://livereload.com/) ，CSS 的话还可以做到不重新载入整页，只载入 CSS 。不过 App 要花钱。据说有 open source 的 guard-livereload ，不过我没用过。

loveminds

2012-11-22 21:57:46 +08:00

移动端JQuery Mobile兼容性貌似还可以

tulike1

2012-11-23 11:04:54 +08:00

http://www.jiankongmf.com/
测试工具，可以测前端页面性能，也能测试链路上的情况，可以看你的网站在全国各地的访问速度，很牛的工具，比基调强。

squallsdjl

2012-11-23 12:55:48 +08:00

其实落到实战上前端靠经验不靠工具的可能性很大，我说说我的工具，我们的支持兼容的前端框架zarkfx、我的iphone4s，老的索爱w803c、小米手机、windows phone htc的c110e，桌面的配置我的是mac，另外有2台笔记本一台ie6，一台是ie7。我使用vim写代码，手动浏览器刷新测试。我们的前端框架就是血的经验积累，这个省了我不少工作。最后就真的是经验了，当你一片黑的时候真的觉得什么都搞不定，整天想整死ie。工具什么的我觉得也不是不行，主要是前端的工作很多是历史遗留的复杂问题，工具什么的难以做到全面。。。最后，前端，也切忌单兵作战，有困难，找朋友。