웹 개발 워크 플로우를위한 10 상단 크롬 확장

웹 개발 산업은 빠르게 진행되고 있으며 추세를 유지하는 것은 쉽지 않습니다. 따라서 기존 도구를 최대한 활용하는 것이 중요합니다. 이 기사는 웹 개발 워크 플로를 최적화하고 효율성을 향상 시키도록 설계된 10 개의 크롬 확장을 소개합니다.

코어 포인트 :

크롬 확장은 웹 개발자의 탐색 경험과 생산성을 향상시키는 작은 소프트웨어입니다. 웹 개발자, 프레임 워크 개발자 도구, Daily 2.0, Toggl Button, Lighthouse, Onetab, CSS Peeper, 사용자 CSS, 웹 개발자 체크리스트 및 TamperMonkey가 있습니다. 웹 개발자는 JavaScript 비활성화, 이미지 윤곽선, 브라우저 창 크기 조정, HTML 검증 및 메타 태그 정보보기를 포함하여 다양한 웹 분석 도구를 제공하는 필수 확장입니다. Daily 2.0은 인터넷에서 최신 웹 개발 및 기술 기사를 수집하여 개발자가 업계 뉴스를 이해할 수 있도록 사용자 친화적 인 레이아웃의 새로운 탭에 표시합니다.

TamperMonkey는 개발자가 웹 동작을 변경하거나 추가 기능을 추가하거나 반복적 인 작업을 자동화하거나 웹 사이트 레이아웃을 개인 취향에 맞게 조정할 수있는 사용자 스크립트 관리자입니다.

크롬 확장 란 무엇입니까?
• Chrome Developer Portal에 언급 된 바와 같이, 확장은 브라우징 경험을 사용자 정의하는 소규모 소프트웨어 프로그램입니다. 철자 및 문법 검사기에서 입력 한 내용을 확인하는 것이 좋습니다.
크롬은 수천 개의 확장 기능을 제공하며, 모두 크롬 웹 스토어에서 무료로 제공됩니다. 브라우저에서 다음 링크를 방문하여 현재 설치된 확장자를 확인할 수 있습니다.
왜 크롬을 선택합니까?
• 이 기사는 시장 점유율이 엄청나고 크롬에 ​​중점을 둡니다 (현재 65%이며 여전히 성장하고 있습니다). 크롬 기반 브라우저 지원 확장도 많이 있습니다. 여기에는 Brave, Vivaldi 및 다가오는 Microsoft Edge가 포함됩니다. 그러나 우리는 크롬이 유일한 옵션이 아니라, 여기에 언급 된 많은 확장에는 Firefox 및/또는 오페라 등가물이 있음을 기억해야합니다.
마지막으로, 우리가 확장을 시작하기 전에, Chrome은 Google에서 출시 된 독점 소프트웨어라는 것을 기억하십시오. 우리 모두가 알고 있듯이 Google 제품에는 개인 정보 문제가 있으므로 Github를 방문하여 비우색 그리스로미움 프로젝트를 볼 수 있습니다. 이름에서 알 수 있듯이 이것은 Google Chromium이며 Google과의 통합은 포함되지 않습니다.

1 우리는 연장의 스위스 육군 칼로 시작할 것입니다. Chrome 웹 개발자의 1 백만 명이 넘는 사용자와 4.5 성급 등급을 보유한 것은 필수입니다. Chrome에 도구 모음 버튼을 추가하여 모든 웹 페이지에 사용할 수있는 많은 도구를 표시합니다. 이 도구는 카테고리 (CSS, 양식, 이미지 등)로 그룹화하여 JavaScript 비활성화, ALT 속성이 누락 된 윤곽선 이미지, 브라우저 Windows 크기 조정, 페이지 HTML 확인, 페이지 메타 태그 정보보기 등과 같은 작업을 수행 할 수 있습니다. .

여기에서 다운로드 할 수 있습니다.

2 프레임 워크를 사용하는 개발자 도구없이 JavaScript 프레임 워크를 사용하여 응용 프로그램을 개발하는 경우 문제가 발생할 수 있습니다. Vue와 함께 예를 들어 설명하겠습니다.

vue 응용 프로그램을 디버깅해야하거나 무대 뒤에서 상황을 알고 싶다면 어떻게해야합니까? 페이지의 소스 코드를 확인하면 vue가 렌더링되는 HTML이 표시되지만 VUE 응용 프로그램은 그 이상입니다. 구성 요소의 소품, 데이터 또는 컴퓨팅 속성은 어떻습니까? 아니면 응용 프로그램의 상태 또는 라우팅은 어떻습니까? 이 내용을 어떻게 확인합니까?

좋은 소식은 vue.js 개발자 도구가 귀하의 요구를 충족시킬 수 있다는 것입니다. 확장자를 설치하고 VUE 개발 버전을 실행하는 페이지에서 열면 응용 프로그램에서 무슨 일이 일어나고 있는지 정확히 확인하십시오.

다음은 세 가지 프레임 워크 개발자 도구를 다운로드 할 수있는 링크입니다.

vue

반응

ember

우리는 빠르게 진행되는 산업에서 일하기 때문에 뉴스와 역학을 유지하는 것이 때때로 도전이 될 수 있습니다. Daily 2.0이 인터넷에서 최신 웹 개발 및 기술 기사를 수집하여 매력적인 벽돌 레이아웃으로 새로운 탭에 표시하는 확장자가되었습니다.

이 확장은 사용하기 쉽습니다. 설치하면 관심있는 많은 카테고리 중에서 선택하도록 요청 받고 매일 2.0은 나머지를 수행합니다. 새 탭 페이지의 사이드 바 위로 마우스를 가져 가서 태그와 소스로 피드를 필터링하십시오.

여기에서 얻을 수 있습니다.

4. 생산성 및 시간 추적기 바쁜 프리랜서 인 경우 원격으로 일하거나 프로젝트에 소비하는 시간을 추적하면 Toggl이 귀하를위한 것입니다.

이 연장은 계정을 사용하기 전에 계정을 만들어야합니다. 일단 로그인하면 빠르고 쉽게 실시간 생산성 추적이 가능하며 모든 데이터는 TOGGL 계정에 저장됩니다. Github, Trello 및 Slack과 같은 많은 인터넷 서비스의 통합뿐만 아니라 내장 Pomodoro 타이머와 함께 제공됩니다. 내가 가장 좋아하는 기능 중 하나는 유휴 상태이고 타이머가 실행될 때 알림을 팝업하여 시간을 버릴 수 있다는 것입니다.

toggl은 여기에서 다운로드 할 수 있습니다.

5 Lighthouse는 웹 페이지의 성능과 품질을 향상시키기위한 오픈 소스 자동화 도구입니다. Chrome 웹 스토어를 통해 설치하거나 Chrome 60으로 시작하여 브라우저의 DevTools의 감사 탭에서 직접 실행할 수 있습니다 ( f12

를 누르고 감사를 선택하십시오).

등대가 열리면 보고서 생성을 클릭하고 포함 할 감사 범주를 선택하십시오. Lighthouse는 페이지에 대해 선택한 감사를 실행하고 페이지 실행에 대한 보고서를 생성합니다. 실패한 감사를 페이지를 개선하기 위해 메트릭으로 사용할 수 있습니다. 각 검토에는 추가 판독 값 및 잠재적 수정에 대한 링크도 포함되어 있습니다.

Lighthouse는 Google에 의해 만들어졌으며 아마도 검색 엔진과 동일한 순위 요소를 사용합니다. 즉, 웹 사이트를 최적화하는 방법에 대한 최고의 조언을 제공 할 수 있습니다.

여기에서 얻을 수 있습니다.

6 이 경우입니다. 웹 응용 프로그램을 다루고 있으며 갑자기 예기치 않은 오류가 발생합니다. 수정을 추적하는 데 몇 시간을 소비하고 완료되면 브라우저에 많은 탭이 열립니다. 어제 작업중인 프로젝트의 탭 페이지와 읽을 시간이 없었던 모든 기사를 추가하면 곧 태그 혼란에 빠질 것입니다. 이것은 Onetab 확장이 당신의 정신을 되 찾는 데 도움이 될 수있는 곳입니다. 탭이 너무 많을 때마다 OneTab 아이콘을 클릭하여 모든 탭을 목록으로 변환하십시오. 탭에 다시 액세스 해야하는 경우 개별적으로 또는 한 번에 탭을 복구 할 수 있습니다. 제대로 사용하면이 확장이 생산성을 크게 향상시킬 수 있습니다.

onetab은 여기에서 다운로드 할 수 있습니다.

7CSS Peeper는 디자이너를 위해 설계된 CSS 뷰어로 자리 매김하여 CSS를 추출하고 아름다운 스타일 가이드를 만들 수 있습니다. 페이지의 모든 요소에 대한 CSS 규칙을 확인하고 모든 스타일 정보를 간단하고 명확한 방식으로 제시 할 수 있습니다. 또한 클립 보드에 복사하거나 버튼 클릭만으로 내보낼 수있는 페이지의 모든 색상과 이미지를 나열합니다.

이 확장은 브라우저의 내장 "체크 요소"기능보다 사용하기가 더 쉽습니다. 유일한 단점은 요소 스타일을 동적으로 변경할 수 없다는 것입니다.

여기에서 CSS Peeper를 찾을 수 있습니다.

8 이 확장은 CSS Peeper와 함께 작동하며 웹 페이지에 사용자 정의 CSS를 추가 할 수있는 빠르고 쉬운 방법을 제공합니다. 사용자 CSS는 설치 후 사용하기 쉽습니다. 확장 아이콘을 클릭하고 슬라이드 아웃 측면 패널에서 스타일을 입력하십시오.

이 확장의 좋은 특징은 맞춤형 CSS 스타일을 유지한다는 것입니다. 즉, 트위터의 트렌드 위젯과 같이 자주 방문하는 웹 사이트의 산만 기능을 영구적으로 숨길 수 있습니다.

여기에서 사용자 CSS를 다운로드 할 수 있습니다. 9 온라인으로 새로운 프로젝트는 언제든지 스트레스를받을 수 있습니다. 기억하고 조정해야 할 것이 많습니다. 예를 들어, 웹 사이트의 HTML을 확인하는 것을 기억하십니까? SEO를 확인 했습니까? 보조 기능 점검은 어떻습니까? Google 페이지 속도를 통해 실행합니까? 목록은 계속됩니다.

이것은 웹 개발자 점검표 확장이 도움이 될 수있는 곳입니다. 웹 페이지에서 모범 사례 위반을 분석하고 웹 페이지를 클라이언트에게 전달하기 전에 웹 사이트에서 문제 영역을 발견 할 수 있습니다. 이 확장은 webdevchecklist.com을위한 훌륭한 동반자 프로그램입니다.

웹 개발자 점검표는 여기에서 다운로드 할 수 있습니다.

10 사용자 스크립트는 웹 페이지의 동작을 변경할 수있는 작은 컴퓨터 프로그램입니다. 이는 웹 사이트 레이아웃을 기본 설정으로 조정, 페이지에 추가 기능 추가 또는 반복적 인 작업을 자동화하는 등 다양한 작업에 사용할 수 있습니다. TamperMonkey는 사용자 스크립트 관리자입니다. 사용자 스크립트를 관리하고 실행하고 자신의 사용자 스크립트를 만들 수있는 확장자입니다. TamperMonkey를 효과적으로 사용하여 웹 개발 워크 플로우를 단순화 할 수 있기 때문에 목록에 위치하는 마지막 기능입니다. 예를 들어, 최근에 테스트 해야하는 큰 형태로 작업하고 있습니다. 매번 수동으로 값을 입력하는 대신, 나는 탬퍼 몬키 스크립트를 작성하여이를 위해 수많은 키 프레스를 저장합니다.

TamperMonkey는 여기에서 찾을 수 있습니다.

결론

이 기사에서는 웹 개발 워크 플로를 개선하기 위해 가장 좋아하는 크롬 확장 10 개를 소개합니다. 나는 이것이 당신에게 약간의 영감을주기를 바랍니다. 그러나이 목록이 결코 철저하지 않다는 것을 기억하십시오.

당신이 좋아하는 확장을 놓쳤거나 다른 독자들과 공유 할 보석이 있다면 아래 의견에서 여러분의 의견을 듣고 싶습니다. 읽어 주셔서 감사합니다. 웹 개발 워크 플로우를위한 크롬 확장에 대한 FAQS (FAQS) 웹 개발 워크 플로우의 상위 크롬 확장은 무엇입니까?

웹 개발 워크 플로를 크게 향상시킬 수있는 몇 가지 크롬 확장이 있습니다. 상단 확장자 중 일부에는 웹 개발자, Window Resizer, Colorzilla, CSSViewer 및 JSONVIEW가 포함됩니다. 이러한 확장자는 모든 웹 페이지의 HTML 및 CSS 요소를 확인하는 것부터 브라우저 창 크기 조정, 다양한 화면 해상도를 시뮬레이션하는 데 이르기까지 다양한 기능을 제공합니다.

웹 개발자 Chrome Extension을 사용하여 워크 플로를 개선하려면 어떻게해야합니까?

웹 개발자 확장자는 다양한 웹 개발자 도구가 포함 된 브라우저에 도구 모음 버튼을 추가합니다. 이를 통해 JavaScript 비활성화, CSS보기 및 점검 요소와 같은 기능에 신속하게 액세스 할 수 있습니다. 또한 코드를 확인하고 오류 나 불일치를 확인하여 웹 개발 프로세스를보다 효율적으로 만들 수 있습니다.

Window Resizer Extension은 웹 개발을 어떻게 강화합니까?

Window Resizer를 사용하면 다양한 화면 해상도를 시뮬레이션하기 위해 브라우저 Windows 크기를 조정할 수 있습니다. 이는 웹 사이트 나 응용 프로그램이 다른 장치에서 어떻게 보이는지 확인할 수 있으므로 반응 형 설계 테스트에 특히 유용합니다. 사전 설정된 화면 해상도 목록 중에서 선택하거나 고유 한 사용자 정의 크기를 만들 수 있습니다.

Colorzilla는 웹 개발에 어떻게 도움이됩니까?

Colorzilla는 웹 개발자와 그래픽 디자이너를위한 편리한 도구입니다. 빨대, 컬러 선택기, 그라디언트 생성기 및 기타 많은 색상 관련 도구가 포함됩니다. Colorzilla를 사용하면 브라우저의 어느 시점에서나 색상 판독 값을 얻고 빠르게 조정하거나 다른 프로그램에 붙여 넣을 수 있습니다.

웹 개발에서 CSSViewer의 목적은 무엇입니까? CSSViewer는 간단한 CSS 속성 뷰어입니다. 웹 페이지의 모든 요소 위에 마우스를 호버링하고 CSS 속성을 볼 수 있습니다. 특정 설계를 구현하거나 자신의 CSS 코드를 디버깅하는 방법을 이해하려고 할 때 유용합니다. JSONView는 웹 개발 워크 플로를 어떻게 개선합니까?

JSONVIEW는 브라우저에서 JSON 문서를 볼 수있는 크롬 확장자입니다. 일반적으로 JSON 문서는 일반 텍스트로만 표시됩니다. JSONVIEW는이 문서를 쉽게 읽을 수 있도록 이러한 문서를 형식화하고 강조합니다. API 또는 기타 JSON 형식 데이터를 사용할 때 특히 유용합니다.

JavaScript를 디버그하는 데 사용되는 크롬 확장은 무엇입니까?

예, JavaScript를 디버그하는 데 사용할 수있는 몇 가지 크롬 확장 기능이 있습니다. 이 중 가장 인기있는 것은 JavaScript 오류 Notifier입니다. 도구 모음 막대에서 아이콘 또는 알림 팝업을 통해 JavaScript 오류를 알려줍니다.

크롬 확장을 사용하여 코딩 효율성을 향상시키는 방법은 무엇입니까?

Clear Cache 및 Session Buddy와 같은 크롬 확장은 코딩 효율성을 크게 향상시킬 수 있습니다. Clear Cache를 사용하면 한 번의 클릭만으로 캐시, 쿠키 및 기타 브라우징 데이터를 지울 수 있으며 Session Buddy는 브라우저 세션을 관리하여 시간을 절약하고 정리 상태를 유지할 수 있도록 허용합니다.

웹 디자인을위한 크롬 확장은 무엇입니까?

예, 웹 디자인에 사용할 수있는 몇 가지 크롬 확장이 있습니다. 상단 확장자 중 일부에는 WhatFont가 포함되어있어 웹 페이지에 사용 된 글꼴을 식별 할 수 있으며 아이 드롭퍼는 ​​웹 페이지에서 색상을 선택할 수 있습니다.

크롬 확장을 찾고 설치하는 방법은 무엇입니까?

크롬 웹 스토어에서 크롬 확장을 찾아 설치할 수 있습니다. 원하는 확장을 검색하고 "Chrome에 추가"를 클릭하여 설치하십시오. 확장자가 작동하려면 브라우저를 다시 시작해야 할 수도 있습니다.

위 내용은 웹 개발 워크 플로우를위한 10 상단 크롬 확장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!