Web front-end development sharing-CSS,JS Tool Chapter

Source: http://www.cnblogs.com/jikey/p/3607133.html

Web front-end development is and other related development, recommended sublime text, Webstorm (jetbrains Company series products) The reason is that there is a technology called Emmet, Http://docs.emmet.io, and these two support for him is:

Sublime text is the only one that supports Emmet in all editors.

Webstorm is one of the only built-in Emmet in all editors and pushes the spirit of Emmet forward.

The Phpstorm,idea includes all Webstorm functions. Just Phpstorm is for phper, and idea is for javaer,webstorm for front-end er.

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

A. CSS tool:

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

A. Can be installed in the form of a plug-in dreamweaver,notepad++,editplus,sublime each editor.

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

Effect of Emmet on sublime:

1). CSS: He differs from other editors in detail, such as the ctrl,alt+ key can be repaired and the value inside

2). HTML effect:

3). Sublime's Emmet Rule modification:

Packages->emmet->emmet->snippets.json

B. Only one exception Jetbrain company's product line: Webstorm,phpstorm,intellij idea is built-in and does not need to be installed.

1).

Write the effect of JS:

2). Webstorm Emmet Rules modified: Live Templates, Settings, Files

2. CSS compression method:

A. With the regular five-step substitution method, apply to any editor:

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

B. Modular Tools

Two. JS Tool:

1. Compression, etc.:

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

Online compression

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

Online compression

http://tool.oschina.net/

Tool Set

2. Develop Js,php,jsp,java and so on in a emmet manner.

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 the Firebug,chrome Debug tool:

HTML, CSS, and JS viewing and debugging:
Support in-place modification (even if ctrl+s, the source code is not modified)
If you edit, you can't use the tools here. Find the corresponding editing tools (+ support syntax highlighting + grammar authentication + Grammar tips + Quick Completion)

-------Universal
JS Debug Tool Console command
Http://www.jb51.net/article/56504.htm

A console.log () Explanation of JavaScript debugging techniques
Http://www.jb51.net/article/48233.htm

-------Chrome Browser (this is the best)
F12 shortcut keys can also be called out
Breakpoint Debugging in Sources
After entering "alert (' Hello World ') inside the console, press ENTER to debug the code.

Why I like Google Chrome as a web Developer
Http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html

Chrome's JS debugging tool
Http://www.360doc.com/content/14/0620/14/12278201_388327756.shtml

A powerful tool for viewing the events and methods of HTML element bindings
Http://www.cnblogs.com/xiaoyao2011/p/3447421.html

JavaScript performance analysis with chrome developer tools
http://blog.jobbole.com/31178/

Improve Web application performance with chrome Devtools timeline and profiles
Http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

Remote Debugging on Android
http://www.seejs.com/archives/296

Chrome console commands in a detailed
Https://developers.google.com/chrome-developer-tools/docs/commandline-api look?

Chrome Mobile Debugging
Https://developers.google.com/chrome-developer-tools/docs/mobile-emulation look?

Use the Google Chrome browser to be the phone simulator
Http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html look?

Integrated Browser Development Tools
http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/look?

Chrome artifact Vimium shortcut key learning record
Http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html look?

Chrome Development Tools Workspace Use
http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/look?

-------IE Browser
IE Developer Tools
F12 shortcut keys can also be called out
Ability to debug various versions of browsers and different browsers

Ietester-also has IE6, IE7, IE8 (Vista compatible)
Page rendering testing primarily for various versions of Internet Explorer browser

IE8 "Developer Tools" in detail (detailed menu at all levels)
Http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html

IE8 "Developer Tools" in detail (browser mode, text mode, JavaScript debugging, Profiler)
Http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html

Common use of JS Debugging tools to help you quickly locate the problem
Http://www.360doc.com/content/14/0620/14/12278201_388326976.shtml

-------the Firefox browser
Firebug

Firebug Getting Started Guide
Http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

Common use of JS Debugging tools to help you quickly locate the problem
Http://www.360doc.com/content/14/0620/14/12278201_388326976.shtml

Firebug Console Detailed
Http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

4. JS Reference manual:

Brochure

5. Other development tools:

Beginner's recommendation: 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

Entry

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 Tools---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

Leaves-Chai first bomb

7. Gulpjs

Http://gulpjs.com

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

Front-end build tool Gulp Getting Started tutorial

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

GULP Another automated assembly line

III: JQ Tool

1. Oschina reference manual Daquan.

2. The W3c_all.chm,w3cschool offline version contains the javascript,jquery,php,sql,html,css2.x,3.x manual.

Web front-end development sharing-CSS,JS Tool Chapter