웹 개발 생산성 향상

2020년 10월 13일 최종 업데이트

나처럼 웹 개발을 하고 싶다면 웹 브라우저에 작업을 단순화하고 생산성을 높이는 훌륭한 도구가 있다는 중요성을 알아야 합니다. 웹 개발 생산성을 높여줄 Google Chrome과 Chrome Extensions의 포괄적인 제품이 바로 그런 경우입니다.

예, Firefox는 웹 개발을 위한 훌륭한 브라우저이고 Firefox Developer Edition은 CSS 디버깅 및 테스트에 환상적입니다. 그러나 Chrome에는 최신 웹 기능을 지원하는 다양한 도구 확장 목록과 웹 개발 생산성 향상을 위해 많은 웹 개발자가 선호하는 개발자 도구가 있습니다.

Chrome 마켓플레이스에는 개발자가 웹사이트 또는 방문 페이지를 개발하고 테스트하는 데 도움이 되는 가장 오래된 확장 프로그램이나 최신 확장 프로그램이 있습니다. 아래에서 내가 웹 개발 도구 상자에서 "필수"로 제안하는 최고의 확장 기능을 알게 될 것입니다.

웹 개발 생산성을 높이는 Chrome 확장 프로그램

태그 어시스턴트

Tag Assistant는 Google 애널리틱스, Google 태그 관리자 등 다양한 Google 태그 설치 문제를 해결하는 데 도움이 됩니다. Tag Assistant를 사용하면 페이지에 다른 Google 태그를 올바르게 설치했는지 확인할 수 있습니다. 아무 페이지로 이동하기만 하면 Tag Assistant가 어떤 태그가 있는지 알려주고, 발견된 오류를 보고하고, 구현을 개선할 수 있는 방법을 제안합니다. Google Analytics, Adwords Conversion Tracking, Google Tag Manager 등을 포함한 대부분의 Google 태그가 확인됩니다.

WhatRuns

웹사이트를 실행하는 요소(프레임워크, 분석 도구, WordPress 플러그인, 글꼴)를 찾아보세요. WhatRuns 확장 프로그램은 클릭 한 번으로 방문하는 모든 웹사이트에서 사용되는 기술을 찾을 수 있습니다. 개발자 도구 및 광고 네트워크에서 WordPress 플러그인 및 테마에 이르기까지 새로운 도구와 서비스를 감지합니다. 그뿐만 아니라 웹 사이트를 팔로우하여 새로운 기술을 사용하거나 기존 기술을 제거할 때 알림을 받을 수 있습니다.

Vue.js 개발 도구

그의 이름은 매우 명백합니다. Vue.js 애플리케이션 디버깅을 위한 Chrome 및 Firefox DevTools 확장 프로그램입니다. Chrome 개발자 도구에서 Vue.js 구성 요소 계층 구조를 검사할 수 있습니다. Chrome DevTools에 "Vue"라는 새 탭이 표시됩니다.

React 개발자 도구

Vue.js Devtools인 React 개발자 도구는 오픈 소스 React JavaScript 라이브러리를 위한 Chrome 및 Firefox DevTools 확장입니다. Chrome 개발자 도구에서 React 구성 요소 계층 구조를 검사할 수 있습니다. Chrome DevTools에 "구성 요소" 및 "프로파일러"라는 두 개의 새 탭이 표시됩니다. 구성 요소 탭에는 페이지에서 렌더링된 루트 React 구성 요소와 렌더링을 마친 하위 구성 요소가 표시됩니다. 세 가지 구성 요소 중 하나를 선택하면 오른쪽 패널에서 현재 소품과 상태를 검사하고 편집할 수 있습니다. 이동 경로에서 선택한 구성 요소, 이를 생성한 구성 요소, 해당 구성 요소를 생성한 구성 요소 등을 검사할 수 있습니다.

JSON 뷰어 굉장

이 확장은 브라우저에서 모든 웹사이트 또는 API 요청의 JSON 응답을 시각화하는 데 도움이 됩니다. 멋진 JSON prettify 경험을 소개합니다. 그것은 그것을 훌륭하게 만드는 많은 독특한 기능을 가지고 있습니다. 개발자가 JSON을 형식화하거나 예쁘게 꾸미고 그래픽 보기에서 속성을 탐색하는 데 도움이 됩니다. 그래픽 보기의 입력 섹션에 서버 응답 또는 제공된 JSON을 나타내는 친숙한 대화형 차트가 있습니다.

메타 SEO 인스펙터

일반적으로 탐색하는 동안 표시되지 않는 웹 페이지 내부에 있는 메타데이터를 검사하는 데 유용합니다. 메타데이터는 일반적인 HTML 메타 태그가 아니라 XFN 태그, 다양한 마이크로포맷, 최근 도입된 표준 속성, 팔로우 금지 링크 등입니다. 이 확장은 주로 사이트의 HTML을 확인해야 하는 웹 개발자를 대상으로 합니다. 웹마스터의 Google 가이드라인을 따르되, 일반적으로 눈에 띄지 않지만 흥미로운 사이트 속성을 드러낼 수 있는 페이지 콘텐츠에 대해 궁금해하는 사람에게도 해당됩니다. 또한 보고서를 인쇄하거나 PDF로 저장하거나 원하는 도구에서 데이터를 복사/붙여넣기할 수 있는 인쇄/내보내기 옵션이 있습니다.

HTML 스타일 빠른 뷰어

HTML DOM 요소 스타일 빠른 뷰어. 마우스를 움직이면 대상의 스타일이 표시됩니다.

CSS 뷰어

CSSViewer는 Chrome 및 Firefox용 간단한 CSS 속성 뷰어입니다. CSSViewer를 활성화하려면 도구 모음 아이콘을 클릭한 다음 현재 페이지에서 검사하려는 요소를 가리킵니다.

글꼴 닌자

모든 웹사이트에서 글꼴을 식별하고, 즐겨찾기에 추가하고, 시도하고, 구매하세요. 보다 정확한 결과를 얻기 위해 글꼴 파일을 분석합니다. 텍스트를 롤오버하여 글꼴 이름과 CSS 속성을 가져옵니다. 기본 확장 창에는 웹사이트에서 사용되는 모든 글꼴의 요약도 표시됩니다. 글꼴에 대한 자세한 정보를 얻을 수 있습니다. 사용 가능한 스타일의 수, 해당 파운드리 및 가격을 확인하십시오.

I love 적응형 – 모바일/반응형 테스트

반응형 웹사이트를 테스트하기 위한 도구입니다. ILOVEADAPTIVE Chrome 확장 프로그램은 도구 모음에 버튼을 추가합니다. 버튼을 클릭하면 현재 탭에 있는 URL이 열립니다. 주요 기능에는 한 번에 여러 장치에서 URL 미리보기, 장치 필터링, OS 필터링, 수량 변경, 확대/축소, ios 패널 표시, 가로 및 세로로 전환이 포함됩니다.

웹 바이탈

건강한 사이트에 대한 측정항목을 측정합니다. Web Vital은 웹(https://web.dev/vitals)에서 뛰어난 UX를 제공하기 위한 핵심 품질 신호입니다. 이 확장은 Core Web Vitals를 측정하여 로딩, 상호 작용 및 레이아웃 변경 메트릭에 대한 즉각적인 피드백을 제공합니다. 이러한 측정항목이 Chrome에서 측정되고 다른 Google 도구에 보고되는 방식과 일치합니다.

페이지 눈금자 Redux

웹 개발자\디자이너 눈금자는 모든 웹 페이지의 요소를 측정하기 위한 완벽한 픽셀 치수 및 위치 지정을 제공합니다. Page Ruler Redux는 웹 요소를 픽셀 단위로 완벽하게 측정할 수 있는 핵심 웹 개발자 및 디자이너 도구입니다. 웹 사이트 프론트 엔드 개발, 웹 디자인 또는 웹 요소의 완벽한 픽셀 측정을 얻는 데 필요한 모든 작업을 위해 설계되었습니다.

격자 눈금자

그리드를 만들고 거리를 쉽게 측정할 수 있습니다. 수직 및 수평 격자, Photoshop 스타일을 만들 수 있습니다. 그리드 사이의 거리를 측정하는 눈금자가 있습니다.

개요

이 확장은 웹 페이지의 모든 HTML 요소를 요약하여 요소의 테두리를 볼 수 있도록 합니다. 확장 프로그램은 모든 무지개(빨간색, 주황색, 노란색, 녹색, 파란색, 남색 및 보라색) 색상을 지원합니다. 외곽선이 적용된 후 제거하는 기능도 있습니다.

모바일 브라우저 에뮬레이터

데스크탑에서 모바일 및 반응형 웹 페이지를 테스트합니다. 한 번의 마우스 클릭으로 가장 일반적인 모바일 화면 해상도를 선택하십시오. 활성 탭의 페이지가 별도의 창에서 열립니다.

글쎄요, 이것이 웹 개발 생산성을 높이기 위해 Chrome 브라우저에 있어야 하는 Chrome 확장 프로그램 목록입니다. 예, 예... 위 목록에 포함되지 않은 다른 유용하고 멋진 확장이 있습니다. 그러나 시간이 되면 향후 블로그에 나열될 다른 환상적인 확장 기능을 계속 탐색할 것입니다.