web前端开发分享-css,js工具篇

web前端开发乃及其它的相关开发，推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于，有个技术叫emmet, http://docs.emmet.io，而这两个对他的支持是：

sublime text 是所有编辑器里边支持emmet比较好的的唯一一款。

webstorm是所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。

phpstorm，idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。

他们的详细对比： http://www.36ria.com/5884

一. css工具:

1. emmet http://docs.emmet.io/

web前端开发分享-css,js工具篇

a. 可以以插件的形式安装在dreamweaver,notepad++,editplus,sublime各个编辑器上。

http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

http://www.qianduan.net/the-zen-coding-renamed-as-emmet.html

http://www.qianduan.net/zen-coding-update-to-0-7.html

http://www.qianduan.net/zen-coding-resources-to-update.html

http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html

emmet在sublime上的效果：

1). css ：他与其它编辑器的区别在于细节上，比如ctrl,alt+方向键可以修和里边的数值

web前端开发分享-css,js工具篇

2). html 效果：

web前端开发分享-css,js工具篇

3). sublime的emmet规则修改：

packages->Emmet->emmet->snippets.json

web前端开发分享-css,js工具篇

b. 只有一个例外jetbrain公司的产品线：webstorm,phpstorm,intellij idea都是内置的，不需要安装。

1).

web前端开发分享-css,js工具篇

写js的效果：

web前端开发分享-css,js工具篇

2). webstorm的emmet规则修改：Files -> settings -> Live Templates

web前端开发分享-css,js工具篇

2. css压缩办法：

a. 通过正则五步替换法，适用于任何编辑器：

http://www.cnblogs.com/sky000/archive/2010/12/22/1913719.html

b. 模块化工具

二. js工具：

1. 压缩等：

http://www.yulonghu.com/?post=5

在线压缩

http://tools.css-js.com/

在线压缩

http://tool.oschina.net/

工具集

2. 以emmet的方式开发js,php,jsp,java and so on。

http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html

http://www.cnblogs.com/jikey/archive/2012/06/14/2549347.html

3. firebug,chrome调试工具的使用：

http://ued.taobao.org/blog/?p=5534

chrome调试

http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html

chrome的调试

https://developers.google.com/chrome-developer-tools/docs/commandline-api

chrome console 命令详解

http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

Firebug入门指南

http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

Firebug控制台详解

https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

chrome移动版调试

http://www.seejs.com/archives/296

【译】Android上的远程调试

http://blog.jobbole.com/31178/

用Chrome开发者工具做JavaScript性能分析

http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html

用谷歌(Chrome)浏览器来当手机模拟器

http://www.cnblogs.com/xiaoyao2011/p/3447421.html

查看事件绑定

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/

综合浏览器开发工具

http://ccforward.net/2013/02/firebug_console.html

关于FireBug和Chrome的控制台

http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

http://h5dev.uc.cn/article-25-1.html

chrome profiles

http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html

Chrome神器Vimium快捷键学习记录

http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/

Chrome 开发工具 Workspace 使用