최근에 Google은 개발자 및 디자이너를 위한 12가지 Google Chrome 확장 프로그램에 대한 게시물을 발표했으며 이러한 확장 프로그램 중 일부는 Firefox에서 사용할 수 있습니다. , 여기서는 반복하지 않겠습니다.
동일한 방식으로 아래 나열된 확장 프로그램 중 일부는 Chrome에서 사용할 수 있으므로 이러한 앱을 각 브라우저의 보너스로 고려하십시오.
1. HTML 검사기
HTML Validator는 코드를 실행하여 HTML 표준 규칙을 따르는지 확인합니다. 도구 모음의 아이콘에 표시되는 오류 수를 표시합니다.
HTML 유효성 검사기 Firefox 애드온
2. 옥토트리
개발자로서 다른 개발자가 특정 문제를 어떻게 해결했는지 검색할 때 가끔 GitHub에서 여러 코드 페이지를 실행합니다. . 당신이 나와 같다면 Octotree 유용할 것입니다.
Octotree GitHub 코드를 트리 형식으로 표시합니다. 이렇게 하면 소스 파일을 다운로드하지 않고도 코드 라인을 탐색할 수 있습니다.
Octotree는 GitHub 코드를 트리 형식으로 표시합니다.
삼. 어디서나 HTTPS
HTTPS Everywhere HTTPS를 사용하지 않더라도 모든 주요 웹 페이지와 교환하는 데이터를 암호화합니다.
따라서 https를 사용하지 않는 페이지로 이동하는 경우 온라인 통신이 안전한지 확인할 수 있습니다.
4. 페이지 성능 테스트
페이지 성능 테스트는 속도와 로딩 성능을 측정하여 웹 페이지에 대한 통계를 제공합니다. 후속 테스트와 비교하기 위해 차트 결과를 저장할 수 있습니다.
페이지 성능 테스트
5. 사용자 스냅
Usersnap을 사용하면 마크업 그림과 주석을 추가하여 웹사이트 스크린샷을 찍고 주석을 달 수 있습니다. 또한 픽셀 눈금자와 함께 제공되며 Slac, Trello 및 JIRA를 포함한 다양한 프로젝트 관리 도구와 직접 통합할 수 있습니다.
이 목록은 효과적인 피드백 프로세스를 가능하게 한다는 점에서 Usersnap 없이는 완전하지 않습니다. 하지만 14일 무료 평가판이 포함된 유료 서비스입니다.
Usersnap
6. 자바스크립트 비활성화
Disable JavaScript는 이름에서 알 수 있듯이 웹사이트 또는 특정 탭에서 JavaScript를 끌 수 있는 기능을 제공합니다. 기본 JS 상태를 켜기/끄기, 도메인/탭 등의 기본 비활성화 동작을 갖도록 사용자 정의할 수 있습니다.
JavaScript 비활성화
7. 웹 개발자 체크리스트
웹 개발자 체크리스트 확장 프로그램은 최상의 디자인 및 개발 사례에 따라 사이트의 사용 가능성에 대한 개요를 제공합니다.
아이콘을 클릭하면 사이트의 SEO, 친근한 URL, 파비콘 등에 대해 알려주고 그 옆에 확인 표시가 있어 합격을 나타냅니다.
웹 개발자 체크리스트
8. 리액트 개발자 도구
React의 인기가 끝없이 상승하면서 거의 매일 React 개발자가 태어나고 React 팀이 이를 처리합니다.
React Developer Tools는 상태, 소품, 계층 등과 함께 React 트리를 검사할 수 있는 기능을 제공합니다. 이를 활성화하려면 , Firefox devtools를 실행하고 React 탭으로 전환합니다.
Vue.js devtools의 형태로 Vue 개발자를 위한 버전도 있습니다.
리액트 개발자 도구
9. 컬러질라
ColorZilla는 개발자와 그래픽 디자이너가 다양한 웹 페이지에서 색상을 선택할 수 있는 훌륭한 도구입니다.
또한 스포이드, 그라디언트 생성기, 팔레트 브라우저 및 색상 기록이 포함되어 있습니다.
컬러질라
10. Evernote 웹 클리퍼
Evernote Web Clipper를 사용하면 웹 페이지의 스크린샷을 찍어 자동으로 Evernote에 저장할 수 있습니다.주석을 달고 팀원들과 공유할 수 있는 계정.
에버노트 웹 클리퍼
11. 쿠키 관리자
Cookie Manager는 쿠키를 보고, 추가하고, 편집하고, 삭제하고, 검색할 수 있는 보안 의식이 있는 확장 프로그램입니다. 도메인.
Cookie Manager의 더 멋진 점은 도메인 간에 쿠키를 내보내고 가져올 수 있다는 것입니다.
쿠키 매니저
12. CSS 및 LESS용 라이브 편집기
CSS 및 LESS용 라이브 편집기를 사용하면 CSS/LESS 코드를 브라우저에 직접 작성할 수 있습니다. 코드는 즉시 적용되며 브라우저의 로컬 저장소에 사이트 수준으로 저장됩니다.
페이지 내 편집기는 자동 완성, 미화, 린터 등의 기능이 있습니다. 확인해야 합니다.
CSS용 실시간 편집기
나열된 확장 프로그램 중 마음에 드는 것이 있거나 사용할 수 있는 목록이 있습니까? 댓글 섹션은 아래와 같습니다.