开发工具
SublimeText
在自动化开发的前提下,仍然有很多编码工作是需要亲手完成的,此时编辑器的效率决定了剩下的开发效率。SublimeText一款很棒的编辑器,通过配置和插件的选择可以达到几乎所有需求。
首先从GUI来说,ST的侧边栏可以随意的拖入文件夹并对其进行操作,而文本区则可以选择多种组合方式,包括网格、最多四栏、最多四列的布局。其滚动条也已经不是一个条了,而是一个代码的缩略图,拖动起来非常方便和清晰。每个文件的标签就像Chrome一样可以随意的拖出拖入。此外,代码的颜色样式可以有几十种方案供选择,还可以下载针对每种语言的颜色方案,目前我知道的仅有最新的Stylus的styl文件没有对应的颜色方案。
在功能方面,ST最大的特色之一就是会自动生成一份正在打开的文件的拷贝,而且会自动保存,也就是说即使是断电关机,重新打开后原本打开的文件也还是存在不会丢失任何代码。其次,多处编辑也是非常的强大,在代码中选择多处后会出现多个光标,可以同时编辑,而选中一个词后,按 Ctrl+D 就可以多选下一个相同的代码。另外通过 'Ctrl+P' 可以搜索文件,配合 @ 或者直接按 Ctrl+R 就可以前往指定的方法和函数,配合 : 或者直接按 Ctrl+G 就可以前往指定的行数。按住 Shift+Ctrl+Up/Down 就可以移动选中行的代码上下移动。其他编辑都有的一般的快捷键自然也都有。
不过最强大的是,这些功能都可以利用插件实现,比如Emmet也就是大名鼎鼎的Zencoding的继任者就可以通过插件指定一个命令并分配一个快捷键来实现。我还喜欢使用Markdown preview,比如现在我就可以通过它预览一下博客的大致效果。还有刚刚提到的针对每种语言的颜色高亮方案也是插件的形式。还有一款老牌版本控制的工具Tortoise,因为公司还在用SVN这种老古董,Tortoise自然成了不二选择。还有很多插件,可以从官方网站搜索。
https://sublime.wbond.net/search/
说到插件,自然少不了管理它的工具,SublimeText的管理工具是Package Control,原来的安装十分麻烦,不过现在官方给出了方法。使用 Ctrl+~ 打开控制台,然后复制这里官方给出的代码到控制台并执行,Package Control就安装好了。之后使用 Ctrl+Shift+P 调出命令面板后就会有一组Package Control的命令,主要会用到 install 和 remove
两个用于安装和卸载插件。
关于用户配置,有很多内容,可以参考 Settings - Default 。比如这样:
{
"caret_style": "phase",
"font_size": 16.0,
"overlay_scroll_bars": "enabled",
"save_on_focus_lost": true,
"scroll_past_end": false,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"word_wrap": true,
"wrap_width": 80
}
这些配置看到名字就基本可以猜出意思了,主要是wrap_width就是每行的字符数,设置到80,这样可以保持代码的简短,避免长语句。而translate_tabs_to_spaces就是用空格代替制表符。
Chrome
我始终喜欢Chrome多过Firefox,因为Chrome的启动速度比Firefox快上许多,Firefox原先有点过于臃肿了,不按标准的地方也不少,虽然后来在Google注资之后,不但版本号追了上来,功能也提升很多。不过Chrome仍是我开发的主要环境,Firefox一般仅作为研究和测试之用。
Chrome的开发者工具界面非常清爽,无论是在Elements中的HTML还是Sources中的Js,代码阅读和编辑都非常方便,而且在Element中可以修改和添加对应元素的CSS代码,而在Sources中可以直接修改CSS文件。Resources中列出了所有加载的文件,还有session、cookie和本地存储之类的缓存信息,可以方便的对其进行操作。而Network则列出了所有请求,以及相关的信息,甚至可以点击下面的圆点按钮 preserve log upon Navigation 进行请求响应时间的监视。在Timeline中还有更详细的时间监视,包括事件、加载以及内存的使用状况,可以方便的对程序的性能进行调试。在Profiles中可以对Js、CSS、DOM进行统计。还有Audits可以对网站性能和网络性能进行统计。
最重要的是Console,在这里可以直接写入Javascript代码进行调试,还可以收集到程序中输出的各种信息和报错。不过最特别的是它是有API的可编程。一般常用到 log 方法,像下面的代码这样来输出一些变量,当然还有不同的类型,比如 error 方法、 warn 方法。它们的参数也很自由,多个参数将会被空格连接输出,还可以在第一个参数中使用占位符来按类型加入后面的参数。
console.log('hello ' + world);
console.error('Error:', 'nothing...');
console.warn('Warn: %s < %d', 'age', 18);
除了上面三个方法以及类似log的 info 和 debug 方法还有一个特别的方法,那就是断言 assert 方法,它可以判断条件,在false时报错,一般用于测试。
另外还有三个关于时间的方法, time , timeEnd 和 timeStamp 。time和timeEnd配合使用可以记录程序运行的时间并输出,而timeStamp可以在Timeline的统计中标出一个时间点。
Chrome的插件也非常的多,这里介绍三款和页面密切相关的工具。
Visual Event 是一个捕获页面事件的插件,它会将页面所有绑定的事件全部以可视化的方式呈现出来,并且可以点击查看某个元素的事件详细信息。我经常用来检查事件是否正确的绑定到了目标元素上。
Edit This Cookie 顾名思义,用来编辑Cookie的,虽然DevTools也带有这样的功能,但是它更加便利,还可以导出导入,随意修改每个Cookie中的任意条目。虽然它很强大,不过好像利用率最高的功能是一键清空Cookie。
Code Cola 可以用来修改CSS,与DevTools不同的是,它的操作是左右滑动滑块,而且主要针对CSS3的空间样式,可以快速将元素变成各种角度各种尺寸。
不过Chrome还是有弱点的,当tab开的太多时会非常卡,因为Chrome每个tab都是一个单独的进程。所以还有一个插件也是很有用的,虽然和开发没有太大关系,One Tab 可以把当前的所有tab都集合起来变成一个页面,当需要打开时在点击链接即可,这样有效防止了过多tab造成的内存不足问题。
我的前端开发工作流 系列文章: