1. 개발자 도구

https://developers.google.com/web/tools/chrome-devtools

F12 / ctrl + shift + i / 더보기 > 도구 더보기 > 개발자 도구



Google 크롬에 내장되어있는 개발자를 위한 도구 모음.

웹페이지에 문제가 있을 때 원인을 찾는데 사용하거나, 페이지를 즉석에서 편집하고 테스트 해볼 수 있다.

HTML, CSS, Javascript 소스를 볼 수 있으며(물론 서버사이드 스크립트는 볼 수 없다.), HTTML, CSS는 실시간으로 수정하며 반영되는 결과를 미리 볼 수 있다.

페이지 로딩시, 모든 리소스에 대한 로딩속도, 원본정보 (소스 or 이미지) 등의 상세 정보를 볼 수 있으며, 리소스가 없는 경우 에러가 표시되므로 오류를 수정할 수 있다.

모바일 모드로 모바일이나 태블릿으로 접속했을때의 모습을 볼 수 있다. (실제 기기에서와 차이가 있을 수 있다.)

스토리지(로컬, 세션, 쿠키) 정보를 보거나 수정, 삭제할 수 있다.



2. Visual Studio Code

https://code.visualstudio.com



마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기.

디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있다.

사용하는 프로그래밍 언어와 별개로, 추천하는 몇개의 플러그인은 아래와 같다.

  * Korean Language Pack for Visual Studio Code
    VS Code용 한국어 팩
    https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko
 
  * Auto Close Tag
    HTML/XML 닫기 태그가 자동으로 추가/수정되는 플러그인
    https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
   
 

  * Color Picker
    CSS색상 표기법과 같은 색상코드를 생성하는 GUI 방식의 색상 선택기
    https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color 
   

  * Beautify
    코드를 보기좋기 정렬
    https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify 

  * VS DocBlockr
    유용한 주석 플러그인
    https://marketplace.visualstudio.com/items?itemName=jeremyljackson.vs-docblock
   



3. 간단한 퍼블이 필요할때 유용한 사이트

* on/off 버튼 생성
CSS만으로 애니메이션 효과가 있는 on/off 버튼을 만들 수 있다.
https://proto.io/freebies/onoff/

* 박스 그림자 css 생성
우측의 여러가지 옵션을 변경하면서, 원하는 박스 그림자를 바로 만들 수 있으며 소스를 복사할 수 있다.

https://shadows.brumm.af

* 그라데이션 css 코드 생성
색상을 추가/변경하며, 각도를 조정하여 원하는 그라데이션을 생성하고 코드를 복사할 수 있다.
https://www.grabient.com

* 색상 추출 (색상정보와 비슷한 색 추천 등)
검색한 색상과 비슷한 색상을 나열하거나, 색맹인 사람들에겐 어떻게 보이는지 등 색상에 관한 정보가 제공된다.

https://www.colorhexa.com
https://www.color-hex.com



4. 개발 시 참고하면 편리한 사이트

* 정규식 검증
정규식을 생성하여 적용하기 전에 테스트를 쉽게 해볼 수 있으며, 그에 따른 결과물 목록을 추출할 수도 있다.

https://ihateregex.io
https://regexr.com


* API 테스트
API를 호출하고 결과값을 받아보는 등 API 를 간단하게 테스트 할 수 있는 사이트.

https://www.postman.com



5. 코드를 정리해주는 사이트

* JSON의 유효성 확인 및 코드 정리
https://jsonlint.com

* SQL 정리
https://www.dpriver.com/pp/sqlformat.htm
https://codebeautify.org/sqlformatter

* HTML, CSS, Javascript 정리
https://beautifier.io/



6. 기타

* 이미지 편집
이미지 편집을 위해 포토샵과 유사한 기능들을 가입이나 설치없이 간단하게 사용할 수 있다.
https://pixlr.com

* 특수문자의 Entity Name, Entity Number

https://dev.w3.org/html5/html-author/charref

* 폴더, 파일비교 프로그램
폴더나 파일을 비교해서 다른부분을 표시해주는 프로그램
https://winmerge.org/
 

★ C++, Java 등 개발 언어 강좌가 궁금하다면?(클릭!)