웹 사이트를 개발할 때 많은 복잡한 요구 사항에 대한 체크리스트를 만들어야 합니다. 색상 또는 글꼴 구성표, CSS 레이아웃 문제 또는 다양한 장치의 웹 사이트 응답성을 처리하든 관계없이 새로운 문제를 파악하는 것이 중요합니다. 다음은 Google Chrome(및 기타 Chromium 기반 브라우저)을 위한 최고의 웹 개발 확장 프로그램입니다.
1. 색상 선택 스포이드
임의의 웹 페이지의 색 구성표가 마음에 들고 자신의 프로젝트에서 활용하고 싶습니까? Color Pick "Eyedropper"라는 Chrome 확장 프로그램을 사용하면 정확한 색상과 조정 가능한 확대/축소 기능으로 색상을 추출할 수 있습니다.
이와 같은 확장 프로그램을 사용하려면 모든 웹사이트에서 색상 추출을 수행할 수 있는 권한이 필요합니다. 좀 더 고급 기능을 원하시면 그라디언트 생성기, 팔레트 뷰어 및 색상 기록과 함께 제공되는 ColorZilla라는 유사한 도구가 있습니다.
2. 원클릭 전체 페이지 스크린샷
전체 페이지 웹 스크린샷을 찍는 것은 일상 업무의 필수 요소입니다. 때때로 디자인 변경 사항을 전달하는 가장 좋은 방법은 전체 웹 사이트를 있는 그대로 캡처하는 것입니다. "원 클릭 전체 페이지 스크린샷"이라는 확장 기능을 사용하면 정확하게 달성할 수 있습니다.
화면 캡처가 진행되는 동안 완료된 스크롤 이미지는 완료되면 새 창에서 열립니다.
이제 전체 웹 페이지 화면을 PNG 형식으로 다운로드할 수 있습니다. 또한 필터, 웹페이지 위에 그리기, 텍스트 추가 등을 포함하여 이미지 화면에 다양한 효과를 적용할 수 있습니다.
3. 편집이 쿠키
웹 개발자는 쿠키를 추가, 삭제, 편집, 보호 및 차단하기 위해 쿠키 관리자에 액세스할 수 있어야 합니다. EditThisCookie는 원하는 대로 쿠키를 사용하고 JSON 형식으로 내보내거나 가져올 수 있는 유용한 확장입니다. 이렇게 하면 오래된 쿠키를 제거하고 쿠키의 최대 추출 날짜를 제한하여 웹사이트를 건강하게 유지하는 데 도움이 됩니다.
4. 모드 헤더
ModHeader는 웹 페이지 HTTP 헤더를 수정하는 가장 널리 사용되는 Chrome 확장 프로그램 중 하나입니다. 한두 번의 클릭만으로 URL 또는 리소스 유형을 기반으로 헤더 수정을 활성화할 수 있습니다. 가장 좋은 점은 여러 프로필을 만들고 수정된 헤더에 다른 값을 추가할 수 있다는 것입니다. 모든 수정은 하나의 탭 또는 전체 사이트로 제한될 수 있습니다.
5. UX 확인
우리 모두는 때때로 실행 중인 웹사이트에 대한 경험적 평가가 필요합니다. 측면 창에 모든 UX 관련 피드백을 표시하는 확장 기능인 UX Check를 사용하면 이 작업을 쉽게 수행할 수 있습니다. 자신이 평가한 휴리스틱과 일치하지 않는 요소를 클릭한 후 메모를 추가하고 스크린샷을 찍을 수 있습니다. 마지막으로 모든 변경 사항을 .docx 형식으로 내보낼 수 있습니다.
6. 창 크기 조정
웹 개발자는 다양한 화면 크기에 대해 웹 페이지를 에뮬레이트해야 합니다. Window Resizer를 사용하면 랩톱, 태블릿, 스마트폰 및 선택한 화면 크기에 대해 이러한 평가를 쉽게 수행할 수 있습니다.
이 도구에는 다양한 시각적 사용자 지정 기능과 함께 "회전" 및 "실시간 측정"과 같은 몇 가지 멋진 기능이 있습니다. 진정한 반응형 웹사이트를 구축하려면 모든 화면 크기에 대한 모양을 교차 확인해야 합니다.
7. Lorem Ipsum 생성기
웹 페이지에서 작업을 빠르게 완료하려면 기본 텍스트가 필요합니다. Lorem Ipsum Generator라는 확장은 다양한 단락과 단락당 문장의 여러 기본 텍스트 옵션을 제공합니다. "자동 선택" 옵션을 사용하여 텍스트의 일부 또는 전체 텍스트를 선택할 수 있습니다. 최종 템플릿은 텍스트의 변형 가능성으로 인해 우아한 모양을 제공합니다.
8. BuiltWith 기술 프로파일러
BuiltWith는 웹사이트를 지원하는 모든 기본 기술에 대해 배울 수 있는 고전적인 확장입니다. 클릭 한 번으로 웹사이트를 더욱 돋보이게 하는 최신 애드온 및 도구에 대해 배울 수 있는 프로필이 생성됩니다. 이렇게 하면 자신의 기능을 복제하는 데 도움이 됩니다.
9. WhatFont
WhatFont는 웹 페이지에서 다양한 글꼴 유형을 식별하는 가장 빠르고 쉬운 방법 중 하나입니다. 전체 세부 정보를 얻으려면 텍스트 근처에 마우스를 가져가기만 하면 됩니다. TypeKit 및 Google FontAPI와 같은 고급 템플릿을 지원합니다.
10. 내 링크 확인
때때로 우리는 웹사이트에 대한 모든 링크에 대한 객관적인 요약이 필요합니다. CheckMyLinks는 유효하고 유효하지 않거나 끊어진 링크를 요약하는 널리 사용되는 확장입니다. 실행 중인 웹 사이트에 대한 링크 결과는 측면 창에서 즉시 볼 수 있습니다. 이 도구는 웹사이트나 게시된 변경 사항이 게시되기 전 마지막 순간에 즉시 확인하는 데 매우 유용합니다.
11. 살충제
웹사이트에서 CSS 레이아웃 문제가 예상됩니까? Pesticide를 사용하면 모든 페이지 요소에 대한 개요를 제공하여 이러한 문제를 디버깅할 수 있습니다. Ctrl 키를 누른 상태에서 키를 누르면 요소 정보를 보고 페이지에서 요소의 위치를 분석할 수 있습니다.
웹 사이트 응용 프로그램에서 중요한 세부 정보를 관리하는 다른 많은 인기 있는 웹 확장 프로그램이 있습니다. 예를 들어 JSON 뷰어는 JSON 파일로 작업하는 사람들을 돕습니다. 웹사이트의 모든 요소에 대한 트리를 제공하는 HTML 트리 생성기가 있습니다.
위의 것 외에도 탐색 속도를 향상시키는 Chrome 확장 프로그램이 많이 있습니다. 확인해 보세요!