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

来源：http://www.cnblogs.com/jikey/p/3607133.html

 

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/

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+方向键可以修和里边的数值

2). html 效果：

3). sublime的emmet规则修改：

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

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

1).

写js的效果：

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

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调试工具的使用： 

html、css和js查看和调试：
支持在位修改(即使ctrl+s,也不会修改源码)
如果编辑就不能用这边的工具啦。自己找对应的编辑工具(+支持语法高亮+语法认证+语法提示+快速完成)

-------通用
js调试工具Console命令详解
http://www.jb51.net/article/56504.htm

JavaScript调试技巧之console.log()详解
http://www.jb51.net/article/48233.htm

-------chrome 浏览器 （这个最好）
F12快捷键也可以呼叫出来
在Sources里面断点调试
在console里面输入“alert('hello world')”后，按下回车键，就调试代码了

作为Web开发人员，我为什么喜欢Google Chrome浏览器
http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html

Chrome的JS调试工具
http://www.360doc.com/content/14/0620/14/12278201_388327756.shtml

查看html元素绑定的事件与方法的利器
http://www.cnblogs.com/xiaoyao2011/p/3447421.html

用Chrome开发者工具做JavaScript性能分析
http://blog.jobbole.com/31178/

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

Android上的远程调试
http://www.seejs.com/archives/296

chrome console 命令详解
https://developers.google.com/chrome-developer-tools/docs/commandline-api 看？

chrome移动版调试
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation 看？

用谷歌(Chrome)浏览器来当手机模拟器
http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html 看？

综合浏览器开发工具
http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/ 看？

Chrome神器Vimium快捷键学习记录
http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html 看？

Chrome 开发工具 Workspace 使用
http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/ 看？

 

-------IE 浏览器
IE Developer Tools
F12快捷键也可以呼叫出来
能调试各个版本浏览器和不同浏览器

IETester-同时拥有IE6、IE7、IE8（Vista兼容）
主要用于Internet Explorer 浏览器各个版本的页面呈现测试

IE8“开发人员工具”使用详解上(各级菜单详解)
http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html

IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html

常用JS调试工具使用方法，帮你快速定位问题
http://www.360doc.com/content/14/0620/14/12278201_388326976.shtml

-------火狐浏览器的
Firebug

Firebug入门指南
http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

常用JS调试工具使用方法，帮你快速定位问题
http://www.360doc.com/content/14/0620/14/12278201_388326976.shtml

Firebug控制台详解
http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

 

 

 

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://www.cnblogs.com/spriteflk/p/5755847.html