최근 몇 개월 동안 Firefox Quantum이 Google Chrome과 동등하게 성능을 향상시킨 후 Firefox Quantum이 출시되면서 점점 더 많은 웹 개발자들이 Firefox로 전환했습니다.
Firefox는 기본적으로 CSS Grid inspector와 같은 혁신적인 기능으로 개발자를 위한 적절한 도구를 제공하지만 애드온 에코시스템을 통해 브라우저에 더 흥미로운 기능을 추가할 수 있습니다.
이를 염두에 두고 웹 개발에 Firefox를 사용하는 경우 시도해야 할 몇 가지 확장 기능이 있습니다.
1. 호환성 보고서
Compat Report는 웹 사이트 또는 웹 응용 프로그램을 개발할 때 잠재적인 브라우저 호환성 문제를 식별하는 데 도움이 됩니다. 이것은 현재 CSS에서만 작동합니다.
확장 프로그램을 설치하면 새로운 "호환성" 패널이 개발자 도구에 추가됩니다. 여기에서 특정 사이트가 각 주요 브라우저에서 어떻게 수행될 것으로 예상되는지 확인할 수 있습니다.
호환성 문제가 없는 브라우저 버전은 녹색, 몇 가지 문제가 있는 버전은 노란색, 여러 문제가 있는 버전은 빨간색으로 표시됩니다. 특정 브라우저 버전을 살펴보고 문제를 일으키는 정확한 CSS 규칙을 확인할 수 있습니다.
2. JSON 라이트
JSON API를 자주 사용하는 경우 브라우저에서 JSON 데이터를 보는 것이 지루할 수 있습니다. 브라우저가 기본적으로 포맷을 제대로 하지 않아 가독성이 떨어지기 때문입니다.
JSON Lite는 적절한 구문 강조 표시와 방대한 JSON 데이터를 검사할 때 편리한 노드 축소 기능을 사용하여 JSON 및 JSONP 응답의 형식을 지정하여 이 문제를 해결합니다.
JSON Lite가 제공하는 모든 기능이 필요하지 않은 경우 주소 표시줄에 "about:config"를 입력한 다음 devtools.jsonview.enabled . 옵션을 두 번 클릭하여 "true"로 설정한 다음 JSON 파일을 브라우저에 로드하여 결과를 확인합니다.
3. 반응 개발 도구
React는 오늘날 웹 개발 생태계에서 가장 인기 있는 라이브러리 중 하나입니다. React로 웹 애플리케이션을 개발하는 경우 브라우저 확장을 사용하여 코드를 디버그하는 데 많은 가치가 있음을 알 수 있습니다.
일단 설치되면 그것을 사용하는 모든 웹사이트에서 React 코드를 검사할 수 있습니다. 추가 기능 아이콘이 브라우저 도구 모음에 표시되고 다른 DevTools 패널과 함께 React 탭도 표시됩니다. React 패널을 사용하면 구성 요소 계층, 소품, 상태 등을 포함한 React 트리를 검사할 수 있습니다.
두 라이브러리 중 하나를 사용하여 개발하는 경우 Vue.js devtools 및 Redux DevTools를 설치할 수도 있습니다.
4. 폰타넬로
Fontanello는 모든 웹사이트에서 글꼴을 식별하는 정말 빠른 방법을 제공합니다. 이 추가 기능을 사용하면 더 이상 웹 사이트에서 사용하는 글꼴을 찾기 위해 devtools를 열 필요가 없습니다. Fontanello는 Firefox의 오른쪽 클릭 컨텍스트 메뉴에 텍스트의 기본 타이포그래피 스타일을 표시합니다.
5. 와팔라이저
좋아하는 웹 사이트를 구축하는 데 어떤 기술이 사용되는지 궁금하신가요? Wappalyzer는 한 번의 클릭으로 이 정보를 제공할 수 있습니다. 다양한 콘텐츠 관리 시스템, 전자 상거래 플랫폼, 웹 서버, JavaScript 프레임워크, 데이터베이스 소프트웨어, 분석 도구 등을 감지할 수 있습니다.
마무리
개발 워크플로를 강화하려는 경우 위에서 언급한 확장 기능 중 어느 것도 잘못 사용할 수 없습니다. 아래 댓글 섹션에서 즐겨찾기를 공유하는 것을 잊지 마세요.
이 기사는 2010년 10월에 처음 게시되었으며 2018년 3월에 업데이트되었습니다.