웹 개발을 위한 Chrome 확장 프로그램

2010년 5월 27일 목요일

Chrome 개발자 도구는 Chrome에서 HTML, 자바스크립트, CSS를 디버깅할 때 유용하게 사용할 수 있습니다. 웹페이지나 Chrome 웹 스토어용 웹 앱을 작성하고 있다면 DOM에서 요소를 검사하고, 실시간 자바스크립트를 디버깅하며, 현재 페이지에서 바로 CSS 스타일을 수정할 수 있습니다. 확장 프로그램을 사용하면 브라우저에서 쉽게 액세스할 수 있는 추가 기능을 제공하므로 Chrome의 웹 개발 환경을 개선할 수 있습니다. Google에서는 개발자를 돕기 위해 웹 개발용 확장 프로그램 페이지를 만들었습니다. 웹용 애플리케이션 및 사이트를 개발할 때 도움이 되기를 바랍니다.

Speed Tracer Chrome 확장 프로그램

예를 들어 Speed Tracer는 웹 애플리케이션에 성능 문제가 있는지 파악하고 수정하는 데 도움이 되는 확장 프로그램입니다. Speed Tracer를 사용하면 애플리케이션의 어떤 부분에서 시간이 소요되는지 더 정확하게 파악하고 자바스크립트 파싱 및 실행, CSS 스타일 등의 문제를 해결할 수 있습니다.

Resolution Test Chrome 확장 프로그램

또 다른 유용한 확장 프로그램은 브라우저 창의 크기를 변경해 주는 해상도 테스트입니다. 웹 개발자는 이 확장 프로그램을 통해 다양한 화면 해상도에서 웹사이트가 어떻게 표시되는지 미리 볼 수 있습니다. 일반적으로 사용되는 해상도 목록과 함께 자체 해상도를 입력하는 맞춤 옵션도 포함되어 있습니다.

Web Developer Chrome 확장 프로그램

Web Developer 확장 프로그램을 사용하면 유효성 검사 옵션, 페이지 크기 조절 및 CSS 요소 뷰어와 같은 추가 개발자 도구에 액세스할 수 있으며, 툴바에 표시되는 추가 버튼 하나면 이 모든 기능을 사용할 수 있습니다.

Chrome 편집기 Chrome 확장 프로그램

주목해야 하는 또 다른 확장 프로그램은 Chrome 편집기로, 브라우저 내에서 쉽게 코딩할 수 있으므로 브라우저와 코드 편집기를 전환할 필요가 없습니다. 나중에 사용할 수 있도록 참조 코드를 컴퓨터에 로컬로 저장할 수도 있습니다.

이러한 확장 프로그램은 웹 개발용 확장 프로그램 페이지에서 제공되는 항목 중 일부일 뿐이며 확장 프로그램 갤러리에서 더 많은 확장 프로그램을 확인하실 수도 있습니다.

작성자: 코 김, Chrome팀