前端开发工具:

web前端开发乃及其它的相关开发,

推荐sublime text,
webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet,

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

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

 

webstorm针对前端er。 

他们的详细对比: 

 

一. css工具:

  1. emmet 

ca88官网 1

ca88官网 2

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

emmet在sublime上的效果:

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

ca88官网 3

2). html 效果:

ca88官网 4

3). sublime的emmet规则修改:

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

ca88官网 5

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

1).

ca88官网 6

写js的效果:

ca88官网 7

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

ca88官网 8

  1. css压缩办法:

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

b. 模块化工具

二. js工具:

  1. 压缩等:

在线压缩

在线压缩

工具集

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

  1. firebug,chrome调试工具的使用: 

 

chrome调试

chrome的调试

chrome console 命令详解

Firebug入门指南

Firebug控制台详解

chrome移动版调试

【译】Android上的远程调试

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

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

查看事件绑定

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″

综合浏览器开发工具

关于FireBug和Chrome的控制台

chrome profiles

Chrome神器Vimium快捷键学习记录 

Chrome 开发工具 Workspace 使用 

 

  1. js参考手册:

w3c手册

  1. 其它开发工具:

新手推荐:editplus,vim

团队开发:

webstorm, phpstorm(phper), pycharm(pythoner), intellij idea(javaer).

  1. 模块化开发grunt

入门

扩展工具grunt

前端项目构建工具—Grunt

享受 Grunt

  1. gulpjs

http://gulpjs.com

官网

教程

gulp plugins

前端构建工具gulp入门教程

Gulp 另一种自动化流水线

三:jq工具

  1. oschina参考手册大全。

2.
w3c_all.chm,w3cschool离线版,包含了javascript,jquery,php,sql,html,css2.x,3.x的手册。

ca88官网 9

 

相关文章