WEB 프론트 엔드 디자이너가 일반적으로 사용하는 도구 모음_기본 지식

다음은 제가 프론트엔드 개발을 위해 컴파일하고 수집한 일반적으로 사용되는 플러그인, 도구, 소프트웨어 등입니다. 사용 방법은 컴퓨터에 작은 백업을 만드는 것과 같습니다. 나중에 요약해 드리겠습니다. 지금은 직접 Google에 검색해 보세요.

【FireFox 플러그인】

1. Firefbug —— 페이지 디버깅 도구

2. YSlow —— 웹페이지 평가 도구

3. Pixel Perfect —— HTML과 디자인 초안 비교

4. CSS 사용 —— CSS 사용 효율성 최적화 도구

5. 페이지 속도 ​—— YSlow와 유사한 웹페이지를 빠르게 최적화

6. Measureit —— 실시간 측정 도구

7. Fiddler —— 페이지 스타일을 로컬로 조정하는 강력한 도구

8. DNS 플러셔 —— DNS 새로 고침 도구

9. 실시간 색상 선택 도구

10. 웹 개발자 —— 웹페이지 관련 정보 확인

11. FireMobileSimulator —— 휴대폰 시뮬레이션

12. JavaScript Dubugger —— JavaScript 문제 해결

13. 그리스몽키 —— 스크립트 애플릿

14. 파이어쿠키 —— 쿠키

【크롬 플러그인】

1. 멋진 스크린샷 —— 웹페이지 스크린샷

2. 사용자 에이전트 전환기 —— 디스플레이 장치 전환

3. 웹 개발자 —— 웹페이지 관련 정보 확인

4. 창 크기 조정 —— 해상도 변경

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,라이브

http://ikeepu.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. 비교를 넘어 —— 파일 비교

7. GIT —— 분산 버전 관리

8. Opera 모바일 에뮬레이터 —— 모바일 브라우저

9. 간단 —— 적게

위의 도구를 대부분 마스터하신 것을 축하합니다. 이제 훌륭한 프론트엔드 디자이너가 되실 날이 멀지 않았습니다~~