웹 프런트엔드 개발 도구 요약-HTML 튜토리얼-php.cn

웹 프런트엔드 개발 도구 요약

WBOY

풀어 주다： 2016-08-20 08:47:48

원래의

1459명이 탐색했습니다.

프런트엔드 개발 도구:

웹 프론트엔드 개발 및 기타 관련 개발,

제가 sublime text와 webstorm(jetbrains사 시리즈 제품)을 추천하는 이유는 emmet, http://docs.emmet.io라는 기술이 있고, 이 둘에 대한 지원은 다음과 같습니다.

Sublime Text는 모든 에디터 중에서 emmet을 잘 지원하는 유일한 에디터입니다.

Webstorm은 모든 에디터 중 유일하게 emmet이 내장된 에디터이며, emmet의 정신을 이어나가는 에디터입니다.

webstorm은 프론트엔드를 목표로 합니다.

자세한 비교: http://www.36ria.com/5884

1. CSS 도구:

1. 에밋 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

에밋이 숭고에 미치는 영향:

1) css: 다른 편집기와 차이점은 세부 사항에 있습니다. 예를 들어 Ctrl, Alt+화살표 키는

내부의 값을 수정할 수 있습니다.

2) HTML 효과:

3) sublime의 emmet 규칙 수정:

패키지->Emmet->emmet->snippets.json

b. jetbrain 제품 라인에는 단 한 가지 예외가 있습니다. webstorm, phpstorm 및 intellij idea는 모두 내장되어 있으며 설치가 필요하지 않습니다.

1).

js 작성의 효과:

2) Webstorm의 emmet 규칙 수정: 파일 -> 라이브 템플릿

2. CSS 압축 방법:

a. 일반적인 5단계 교체 방법을 통해 모든 편집자에게 적용 가능합니다.

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

b. 모듈형 도구

2. JS 도구:

1. 압축 등:

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

온라인 압축

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

온라인 압축

http://tool.oschina.net/

도구 세트

2. emmet 메소드를 사용하여 js, php, jsp, java 등을 개발합니다.

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

크롬 디버깅

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

크롬 디버깅

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

크롬 콘솔 명령어에 대한 자세한 설명

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

Google(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) 버전/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

크롬 프로필

http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html

크롬 아티팩트 Vimium 단축키 학습기록

http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/
Chrome 개발 도구 작업공간 사용