프런트엔드 개발자를 위한 10가지 Chrome 확장 프로그램(공유)

이 기사에서는 프런트엔드 개발자를 위한 10가지 Chrome 확장 프로그램을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1. CSSViewer

이 도구는 요소의 CSS 속성을 식별하고 표시하는 데 유용합니다. 여기에는 페이지의 요소 위로 마우스를 가져가면 모든 CSS 속성을 볼 수 있는 부동 창이 포함되어 있습니다. 단축키를 사용하여 CSSViewer 양식에서 선택한 요소의 스타일을 쉽게 복사할 수 있습니다.

Chrome 자체 개발자 도구만으로는 충분하지 않은데 왜 사용해야 하는지 궁금하신가요?

사실 이 플러그인은 브라우저의 개발자 도구보다 더 많은 고급 정보를 표시합니다. 기본 요소의 너비 및 높이 상자 모델 외에도 적용되는 모든 스타일 등도 포함됩니다.

2. Augury

Auury는 Angular 프로젝트 디버깅, 분석 및 최적화를 위해 Rangle.io에서 만든 DevTool 확장입니다.

Auury는 DevTools에서 풍부한 UI를 제공합니다.

• 구성 요소의 DI(종속성 주입) 트리 다이어그램 보기
• 구성 요소 속성 편집 및 수정
• 이벤트 방출
• etc...

개인적으로 구성 요소의 변경 감지 트리거가 구성 요소 트리에서 얼마나 멀리까지 갈 수 있는지 알고 싶을 때 유용할 것이라고 생각했습니다.
당신이 Angular 개발자이고 DevTool에서 Augury를 사용해 본 적이 없다면 이것은 부끄러운 일입니다. Augury는 브라우저에서 직접 Angular 애플리케이션을 디버깅하는 데 필요한 모든 것을 갖추고 있습니다. 한번 사용해 보세요.

3. React 개발자 도구

이것은 React 팀에서 개발한 훌륭한 DevTool입니다.

Augury와 마찬가지로 React 개발자 도구는 React 구성 요소의 이벤트 흐름을 모니터링할 수 있는 풍부한 UI를 제공합니다. React 구성 요소의 속성과 상태를 검사하고 원하는 대로 변경하며 구성 요소 트리를 통해 변경 사항이 전파되는 것을 볼 수 있습니다.

4. JSONView

브라우저는 일반적으로 JSON 데이터를 잘 표시하지 않습니다. 데이터는 종종 흑백으로 조밀하게 표시되므로 이해하기가 매우 어렵습니다. 특히 깊게 중첩된 속성을 찾으려는 경우에는 더욱 그렇습니다.
JSONView는 JSON 데이터의 형식을 지정하고 아름답게 만듭니다. 풍부한 색상의 트리 보기로 표시되므로 속성과 값을 더 쉽게 식별할 수 있습니다.

5. 라이브러리 스니퍼

저는 일반적으로 웹페이지가 어떤 프레임워크를 기반으로 작성되었는지, 이 사이트가 참조하는 라이브러리가 무엇인지 알고 싶습니다.
Library Sniffer는 이런 점에서 나에게 많은 도움을 주었습니다. 이 도구는 React, Angular, Vue, Svelte, Wordpress 및 기타 플랫폼 또는 프레임워크.

6. 웹 개발자

웹 개발자가 브라우저에 도구 모음을 추가합니다. 이 도구 모음에는 프로그래머와 디자이너 모두 일상 작업에서 생산성을 높이기 위해 사용할 수 있는 편리한 도구가 많이 포함되어 있습니다. 요소에 윤곽선 추가, 눈금자 표시, 페이지에서 깨진 이미지 모두 찾기, 페이지 레이아웃 변경, 그림 조작 등에 이르기까지 다양합니다.
기본 DevTools 검사기에 자주 필요한 기능을 추가합니다.

7. LambdaTest

다중 브라우저 호환성은 항상 웹 개발자에게 골치 아픈 문제였습니다. 다양한 브라우저에서 웹 사이트를 렌더링하는 것은 개발자가 항상 생각하는 것입니다.

우리는 일반적으로 웹사이트를 테스트하기 위해 어떤 브라우저든 실행할 수 있도록 컴퓨터에 다양한 브라우저를 설치하도록 선택합니다.
이 확장 프로그램은 당신을 위해 모든 것을 수행합니다. 이를 통해 데스크탑과 모바일 장치에서 다양한 브라우저를 사용하여 웹 페이지의 스크린샷을 찍을 수 있으며 호환성 질문에 대한 빠르고 확실한 답변을 제공합니다.

8. 컬러픽 스포이드

ColorPick Eyedropper에는 웹 페이지의 요소 위에 마우스를 올려 요소의 색상을 표시하는 부동 패널이 있습니다. 요소를 클릭하면 선택한 요소의 색상이 클립보드에 복사됩니다. 이는 색상을 검색하고 복사하고 붙여넣는 데 걸리는 시간을 단축할 수 있는 좋은 방법입니다.

9. CSSPeeper

요소 스타일을 검사하고 복사하는 또 다른 훌륭한 도구입니다.

CSSPeeper를 사용하면 웹페이지의 모든 요소 위로 마우스를 가져가서 한 번의 마우스 클릭으로 요소의 스타일을 복사할 수 있습니다.

크롬 검사기 도구의 요소에서 CSS 스타일 코드를 복사해 본 적이 있다면 CSSPeeper가 제공하는 가치를 쉽게 이해할 수 있습니다.

10. WhatFont

웹을 탐색할 때 주로 눈에 띄는 것은 페이지에 사용된 글꼴입니다. 텍스트에 관심이 있고 그 텍스트에 사용된 글꼴이 무엇인지 알고 싶을 때 무의식적으로 마우스 오른쪽 버튼을 클릭하여 개발자 도구를 열고 소스 코드를 봅니다. 그러나 이는 여전히 너무 번거롭다.

WhatFont를 사용하면 글꼴 보기가 더 쉬워집니다. 텍스트 위로 마우스를 가져가면 사용된 글꼴을 빠르게 확인할 수 있습니다.

결론

위의 내용은 단지 내 자신의 이해를 바탕으로 한 것입니다. 이러한 확장 기능을 사용하면 작업이 더 쉽고 빨라집니다.

위 내용에 추가할 내용이 있다면 댓글로 알려주시면 감사하겠습니다!

원본 소스: https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 교육 ! !

위 내용은 프런트엔드 개발자를 위한 10가지 Chrome 확장 프로그램(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!