Web前端开发工具总结
2016-08-18 14:39
926 查看
前端开发工具:
web前端开发乃及其它的相关开发,
推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是:
sublime text 是所有编辑器里边支持emmet比较好的的唯一一款。
webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款。
webstorm针对前端er。
他们的详细对比: http://www.36ria.com/5884
一. css工具:
1. emmet http://docs.emmet.io/
![](https://images0.cnblogs.com/i/100150/201403/180949554743916.gif)
![](https://images0.cnblogs.com/i/100150/201403/180951102093317.gif)
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+方向键可以修和里边的数值
![](https://images0.cnblogs.com/i/100150/201403/180927136315899.gif)
2). html 效果:
![](https://images0.cnblogs.com/i/100150/201403/181000217098363.gif)
3). sublime的emmet规则修改:
packages->Emmet->emmet->snippets.json
![](https://images0.cnblogs.com/i/100150/201403/180932425686039.jpg)
b. 只有一个例外jetbrain公司的产品线:webstorm,phpstorm,intellij idea都是内置的,不需要安装。
1).
![](https://images0.cnblogs.com/i/100150/201403/181010207249461.gif)
写js的效果:
![](https://images0.cnblogs.com/i/100150/201403/181023110216332.gif)
2). webstorm的emmet规则修改:Files -> settings -> Live Templates
![](https://images0.cnblogs.com/i/100150/201403/180937265991602.jpg)
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 使用
4. js参考手册:
w3c手册
5. 其它开发工具:
新手推荐:editplus,vim
团队开发:
webstorm, phpstorm(phper), pycharm(pythoner), intellij idea(javaer).
http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook
6. 模块化开发grunt
http://www.gruntjs.org/article/getting_started.html
入门
http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows
扩展工具grunt
http://www.gruntjs.org/article/home.html
http://www.cnblogs.com/tugenhua0707/p/3497488.html
前端项目构建工具---Grunt
http://javascript.ruanyifeng.com/tool/grunt.html
http://www.infoq.com/cn/articles/GruntJs
http://blog.segmentfault.com/frankfang/1190000000372612
享受 Grunt
http://www.cnblogs.com/yexiaochai/p/3603389.html
http://www.cnblogs.com/yexiaochai/p/3594561.html
7. gulpjs
http://gulpjs.com
官网
http://www.tuicool.com/articles/n2Uj2y
教程
http://gratimax.github.io/search-gulp-plugins
gulp plugins
https://github.com/gulpjs/gulp
http://blog.segmentfault.com/laopopo/1190000000372547?page=1
前端构建工具gulp入门教程
http://zhuanlan.zhihu.com/TLA42/19691575
Gulp 另一种自动化流水线
三:jq工具
1. oschina参考手册大全。
2. w3c_all.chm,w3cschool离线版,包含了javascript,jquery,php,sql,html,css2.x,3.x的手册。
web前端开发乃及其它的相关开发,
推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是:
sublime text 是所有编辑器里边支持emmet比较好的的唯一一款。
webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款。
webstorm针对前端er。
他们的详细对比: http://www.36ria.com/5884
一. css工具:
1. emmet http://docs.emmet.io/
![](https://images0.cnblogs.com/i/100150/201403/180949554743916.gif)
![](https://images0.cnblogs.com/i/100150/201403/180951102093317.gif)
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+方向键可以修和里边的数值
![](https://images0.cnblogs.com/i/100150/201403/180927136315899.gif)
2). html 效果:
![](https://images0.cnblogs.com/i/100150/201403/181000217098363.gif)
3). sublime的emmet规则修改:
packages->Emmet->emmet->snippets.json
![](https://images0.cnblogs.com/i/100150/201403/180932425686039.jpg)
b. 只有一个例外jetbrain公司的产品线:webstorm,phpstorm,intellij idea都是内置的,不需要安装。
1).
![](https://images0.cnblogs.com/i/100150/201403/181010207249461.gif)
写js的效果:
![](https://images0.cnblogs.com/i/100150/201403/181023110216332.gif)
2). webstorm的emmet规则修改:Files -> settings -> Live Templates
![](https://images0.cnblogs.com/i/100150/201403/180937265991602.jpg)
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 使用
4. js参考手册:
w3c手册
5. 其它开发工具:
新手推荐:editplus,vim
团队开发:
webstorm, phpstorm(phper), pycharm(pythoner), intellij idea(javaer).
http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook
6. 模块化开发grunt
http://www.gruntjs.org/article/getting_started.html
入门
http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows
扩展工具grunt
http://www.gruntjs.org/article/home.html
http://www.cnblogs.com/tugenhua0707/p/3497488.html
前端项目构建工具---Grunt
http://javascript.ruanyifeng.com/tool/grunt.html
http://www.infoq.com/cn/articles/GruntJs
http://blog.segmentfault.com/frankfang/1190000000372612
享受 Grunt
http://www.cnblogs.com/yexiaochai/p/3603389.html
http://www.cnblogs.com/yexiaochai/p/3594561.html
7. gulpjs
http://gulpjs.com
官网
http://www.tuicool.com/articles/n2Uj2y
教程
http://gratimax.github.io/search-gulp-plugins
gulp plugins
https://github.com/gulpjs/gulp
http://blog.segmentfault.com/laopopo/1190000000372547?page=1
前端构建工具gulp入门教程
http://zhuanlan.zhihu.com/TLA42/19691575
Gulp 另一种自动化流水线
三:jq工具
1. oschina参考手册大全。
2. w3c_all.chm,w3cschool离线版,包含了javascript,jquery,php,sql,html,css2.x,3.x的手册。
![](https://images0.cnblogs.com/i/100150/201403/180942555846727.jpg)
相关文章推荐
- 2012年度最佳Web前端开发工具和框架总结
- 2012年度最佳Web前端开发工具和框架总结
- 转WEB前端开发经验总结(1)
- [CSS]Web前端开发之CSS工具列表
- web前端开发工具
- Java web开发流行工具总结(转)
- web前端开发远程调试工具Weinre
- 转WEB前端开发经验总结(2)
- java web开发总结(四):apache自带压力测试小工具ab(apache benchmark)
- Web前端开发:DIV+CSS网页布局总结
- 最受Web前端开发者欢迎的五大开发工具
- Web前端开发基础知识--部分总结
- 针对web前端开发不可缺少的调试工具
- WEB前端开发工具--整理
- web前端开发学习经验总结
- 转WEB前端开发经验总结(5)
- Web前端开发之CSS工具列表(经典)
- [CSS]Web前端开发之CSS工具列表 (转)
- web前端开发经验总结(个人笔记)
- 在HTML5 Web SQL中使用ORM工具 - 前端开发 - e800