Firefox Quantum의 출시 이후 성능이 Google Chrome에 필적할 만큼 크게 향상되면서, 최근 몇 달 사이 웹 개발자들이 Firefox로 갈아타는 사례가 꾸준히 늘고 있습니다.
Firefox는 CSS Grid 인스펙터와 같은 혁신적인 기능을 통해 기본적으로도 훌륭한 개발자 도구를 제공하지만, 방대한 애드온 생태계를 활용하면 브라우저에 더욱 강력한 기능을 추가할 수 있습니다.
그래서 준비했습니다. Firefox로 웹 개발을 하신다면 꼭 사용해 볼 만한 확장 프로그램 다섯 가지를 소개합니다.
1. Compat Report
Compat Report는 웹사이트나 웹 애플리케이션을 개발할 때 발생할 수 있는 브라우저 호환성 문제를 미리 파악하도록 도와주는 도구입니다. 현재는 CSS에만 적용됩니다.
확장 프로그램을 설치하면 개발자 도구에 새로운 '호환성(Compatibility)' 패널이 추가됩니다. 이 패널에서는 특정 사이트가 주요 브라우저별로 어떻게 동작할지 한눈에 확인할 수 있습니다.
호환성 문제가 없는 브라우저 버전은 초록색, 일부 문제가 있는 경우 노란색, 여러 문제가 있는 경우 빨간색으로 표시됩니다. 특정 브라우저 버전을 클릭해 자세히 살펴보면 어떤 CSS 규칙이 문제를 일으키는지 정확히 확인할 수도 있습니다.
2. JSON Lite
JSON API를 자주 다루는 개발자라면 브라우저에서 JSON 데이터를 확인하는 것이 번거롭게 느껴질 수 있습니다. 기본 상태의 브라우저는 JSON을 제대로 포맷팅하지 않기 때문에 가독성이 매우 떨어집니다.
JSON Lite는 바로 이 문제를 해결해 줍니다. JSON과 JSONP 응답에 구문 강조(syntax highlighting)를 적용하고, 노드 접기(node collapsing) 기능까지 제공하기 때문에 방대한 JSON 데이터를 검토할 때 특히 유용합니다.
만약 JSON Lite의 모든 기능이 필요 없다면, Firefox에 내장된 JSON 뷰어를 활성화하는 방법도 있습니다. 주소창에 'about:config'를 입력한 후 devtools.jsonview.enabled를 검색하세요. 해당 옵션을 더블클릭하여 'true'로 설정한 뒤, 아무 JSON 파일이나 브라우저로 열어보면 결과를 확인할 수 있습니다.
3. React Devtools
React는 오늘날 웹 개발 생태계에서 가장 인기 있는 라이브러리 중 하나입니다. React로 웹 애플리케이션을 개발한다면, 공식 브라우저 확장 프로그램을 활용해 코드를 디버깅하는 것만으로도 큰 생산성 향상을 체감할 수 있습니다.
설치하고 나면 React를 사용하는 모든 웹사이트에서 해당 코드를 분석할 수 있습니다. 브라우저 툴바에 애드온 아이콘이 나타나고, 개발자 도구 패널 목록에도 React 탭이 추가됩니다. React 패널에서는 컴포넌트 계층 구조, props, state 등을 포함한 React 컴포넌트 트리를 자세히 들여다볼 수 있습니다.
Vue.js나 Redux로 개발하는 개발자라면 Vue.js devtools와 Redux DevTools도 함께 설치해 보시기 바랍니다.
4. Fontanello
Fontanello는 어떤 웹사이트든 폰트 정보를 아주 빠르게 확인할 수 있게 해주는 도구입니다. 이 애드온을 사용하면 웹사이트에서 사용 중인 폰트를 알아보기 위해 굳이 개발자 도구를 열 필요가 없습니다. Fontanello는 Firefox의 마우스 우클릭 컨텍스트 메뉴에서 텍스트의 기본 타이포그래피 스타일을 바로 보여줍니다.
5. Wappalyzer
즐겨 찾는 웹사이트가 어떤 기술 스택으로 만들어졌는지 궁금해 본 적이 있으신가요? Wappalyzer는 단 한 번의 클릭으로 이런 정보를 알려줍니다. 다양한 콘텐츠 관리 시스템(CMS), 전자상거래 플랫폼, 웹 서버, JavaScript 프레임워크, 데이터베이스 소프트웨어, 분석 도구 등을 감지할 수 있습니다.
마치며
개발 워크플로우에 날개를 달고 싶다면 위에서 소개한 확장 프로그램 중 어떤 것을 선택해도 실패하지 않을 것입니다. 여러분의 추천 애드온이 있다면 댓글로 함께 공유해 주세요.
이 글은 2017년 10월에 처음 게시되었으며 2018년 3월에 업데이트되었습니다.