다음은 컴파일 및 수집 한 프론트 엔드 개발을 위해 일반적으로 사용되는 플러그인, 도구, 소프트웨어 등입니다. 컴퓨터의 작은 백업을 만드는 것과 같습니다. 그것을 사용하는 방법에 관해서는, 나는 앞으로 그것을 요약 할 것입니다. 현재 Google 직접 Google이 더 낫습니다.
【Firefox 플러그인】
1. Firefbug- 페이지 중재자
2. YSLOW- 웹 등급 도구
3. Pixel Perfect- HTML 및 디자인 초안 비교
4. CSS 사용 - CSS 사용 효율 최적화 도구
5. Page Speed- yslow와 유사한 웹 페이지를 신속하게 최적화합니다.
6. 측정 - 실시간 측정 도구
7. 피들러 - 로컬 페이지 스타일 도구
8. DNS Flusher -DNS 새로 고침 도구
9. Colorzilla- 실시간 색상 선택 도구
10. 웹 개발자 - 웹 페이지의 관련 정보 확인
11. Firemobilesimulator- 휴대 전화 시뮬레이션
12. JavaScript Dubugger -JavaScript 오류
13. Greasemonkey- 스크립트 애플릿
14. FireCookie- 쿠키
Chrome 크롬 플러그인 ome
1. 멋진 스크린 샷 - 웹 페이지 스크린 샷
2. 사용자 에이전트 스위처 - 디스플레이 장치를 전환하십시오
3. 웹 개발자 - 웹 페이지의 관련 정보 확인
4. Window Resizer- 해상도 변경
5. YSLOW- 웹 등급 도구
6. 브라우저 호환성 감지
[프론트 엔드 개발을위한 일반적인 URL 도구]
웹 컬러 매칭
http://www.peise.net/tools/web/
http://www.peise.net/tools/lilun/lilunxuexi.html
http://www.colorschemer.com/online.html
http://www.workwithcolor.com/hsl-color-picker-01.htm
CSS3 생성기
http://www.css3maker.com/
http://www.flickyard.in/autocss3/
http://www.colorzilla.com/gradient-editor/
http://css3pie.com/
http://www.css3.me/
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
CSS3 버튼 생성기
http://www.wordpressthemeshock.com/css-drop-shadow/
http://css3buttongenerator.com/
CSS 사진 신디사이저
http://csssprites.com/
http://cn.spritegen.website-performance.org/
CSS 코드 확인
http://csslint.net/
Ajax 로딩 사진
http://ajaxload.info/
http://preloaders.net/
CSS 해킹 테이블
http://centricle.com/ref/css/filters/
브라우저 시장
http://tongji.baidu.com/data/browser
CSS3에 대한 브라우저의 지원을 테스트하십시오
http://css3test.com/
http://kimblim.dk/css-tests/selectors/
http://selectivizr.com/
http://www.findmebyip.com/litmus
사용자 경험을 감지하십시오
http://gtmetrix.com/
CSS 템플릿 생성기
http://blog.html.it/layoutgala/
http://www.mycelly.com/
http://www.intensivstation.ch/en/templates/
CSS 압축
http://www.csscompressor.com/
CSS의 일반적인 글꼴
http://cssfontstack.com/
http://www.google.com/webfonts#
http://www.dafont.com/
CSS3 변환
http://www.useragentman.com/ietransformstranslator/
CSS3 베 지어 곡선
http://cubic-bezier.com/#.47,.73,1,41
Yui CSS 그리드 도구
http://developer.yahoo.com/yui/grids/builder/
JavaScript 코드 최적화 및 미화
http://js.clicki.cc/
코드 데모
http://jsfiddle.net/
http://jsbin.com/#html,Live
http://ikeeper.com/bar/20143449
http://codepad.org/
프로토 타이핑 도구
https://gomockingbird.com/mockingbird/#
http://www.jotform.com/
【로컬 및 일반적으로 사용되는 소프트웨어 및 IDE 편집자】
1. Markman- 디자이너, 프론트 엔드 엔지니어를위한 필수 아이템
2. VIM- 슈퍼 빠른 편집자
3. Adobe Photoshop CS6- 그림 절단 스페셜
4. IE 테스터 - 페이지 호환성을 확인합니다
5. Fiddler2- 탐지 요청
6. COMMPAR를 넘어서 - 파일 비교
7. GIT- 분산 버전 제어
8. Opera 모바일 에뮬레이터 - 모바일 브라우저
9. 단순함 - 덜
위의 대부분의 도구 인 축하를 마스터 한 후, 당신은 훌륭한 프론트 엔드 디자이너와 멀지 않습니다 ~~