Summary of Web front-end development tools

Front-end development tools:

Web front-end development and other related development,

The reason why I recommend sublime text and webstorm (jetbrains company series products) is that there is a technology called emmet, http://docs.emmet.io, and the support for these two is:

sublime text is the only one among all editors that supports emmet well.

Webstorm is the only editor among all editors that has built-in emmet, and it is the one that pushes the spirit of emmet forward.

Their detailed comparison: http://www.36ria.com/5884

1. css tool:

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

a. Can be installed as a plug-in on various editors such as dreamweaver, notepad++, editplus, and 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

The effect of emmet on sublime:

1). css: The difference between it and other editors lies in the details. For example, ctrl, alt + arrow keys can modify the values ​​inside

2). html effect:

3). Modification of sublime’s emmet rules:

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

b. There is only one exception to jetbrain’s product line: webstorm, phpstorm, and intellij idea are all built-in and do not require installation.

1).

The effect of writing js:

2). Webstorm’s emmet rule modification: Files -> settings -> Live Templates

2. CSS compression method:

a. Through the regular five-step replacement method, applicable to any editor:

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

b. Modular tools

2. js tool:

1. Compression, etc.:

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

Online compression

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

Online compression

http://tool.oschina.net/

Toolset

2. Develop js, php, jsp, java and so on using emmet method.

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

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

3. Use of firebug and chrome debugging tools:

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

chrome debugging

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

Chrome debugging

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

Detailed explanation of chrome console commands

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

Getting Started with Firebug

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

Detailed explanation of Firebug console

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

Chrome mobile version debugging

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

【Translation】Remote debugging on Android

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

Use Chrome Developer Tools to do JavaScript performance analysis

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

Use Google (Chrome) browser as a mobile phone simulator

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

View event binding

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/

Integrated browser development tools

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

About FireBug and Chrome’s Console

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 artifact Vimium shortcut key learning record

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

Chrome development tools Workspace use

4. js reference manual:

w3c manual

5. Other development tools:

Recommended for newbies: editplus, vim

Team Development:

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

http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook

6. Modular development grunt

http://www.gruntjs.org/article/getting_started.html

Getting Started

http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows

Extension tool grunt

http://www.gruntjs.org/article/home.html

http://www.cnblogs.com/tugenhua0707/p/3497488.html

Front-end project building tool---Grunt

http://javascript.ruanyifeng.com/tool/grunt.html

http://www.infoq.com/cn/articles/GruntJs

http://blog.segmentfault.com/frankfang/1190000000372612

Enjoy Grunt

http://www.cnblogs.com/yexiaochai/p/3603389.html

http://www.cnblogs.com/yexiaochai/p/3594561.html

7.gulpjs

http://gulpjs.com

Official website

http://www.tuicool.com/articles/n2Uj2y

Tutorial

http://gratimax.github.io/search-gulp-plugins

gulp plugins

https://github.com/gulpjs/gulp

http://blog.segmentfault.com/laopopo/1190000000372547?page=1

Getting started with the front-end building tool gulp

http://zhuanlan.zhihu.com/TLA42/19691575

Gulp Another automated pipeline

Three: jq tool

1. Complete oschina reference manual.

2. w3c_all.chm, w3cschool offline version, contains manuals for javascript, jquery, php, sql, html, css2.x, 3.x.