[Browser] 2020 개발자를 위한 최고의 브라우저 - 언제까지 Chrome이 최고라고 생각할 겁니까

 

 

웹 개발자들은 온라인에서 단순히 브라우징만 하는 것이 아닙니다. 이때문에 일반 개발자들은 다양한 기능이 가능한 브라우저를 필요로할텐데요. 각종 사이트의 코드를 보여주는 플러그인과 함께 제공되는 브라우저가 도움이 됩니다. 또 다른 화면에서 설계가 어떻게 표시되는지 확인할 수 있는 브라우저를 찾고 있을 수 있습니다. 

 

표면적으로는 웹브라우저는 모두 비슷해보입니다. 그러나 디자이너나 개발자로서 더 나은 환경을 찾다보면 고유한 검색환경이 필요하다는 것을 꺠닫는 순간이 온다고 합니다. 다행히도 웹 개발자들에게 가장 적합하다고 할 수 있는 브라우저에 대해 확인해볼 수 있었습니다. 

 

여러분께 최고의 옵션을 보여드리겠습니다. 

 

 

---

 

Firefox Developer Edition 

파이어폭스 개발자 에디션

 

개발자들 사이에서 파이어폭스는 아마도 세계에서 가장 인기 있는 브라우저일 것 같습니다. 그 자체만으로도 강력한 브라우저인 파이어폭스는 마이크로소프트의 엣지처럼 빫은 시간에 정보를 추적하고 웹사이트를 멋지게 만드는데 큰 도움이 됩니다. 

 

이때 차세대 파이어폭스 환경을 구축하기위해선 파이어폭스 개발자 에디션으로 업그레이드할 수 있다는 사실을 알고 계신가요? 개발자용 구글 크롬과 마찬가지로 파이어폭스의 개발자 에디션 역시 개방형 웹을 위해 제작되었습니다. 

 

또한 파이어폭스 개발자 에디션을 사용할 경우 페이지에 영향을 미치지 않는 CSS 선언을 회색으로 표시, 비활성 CSS 시스템인 차세대 CSS엔진(RUST) 들에 엑세스 할 수 있습니다. 엑세스를 돕기위해 "Firefox DevTools" 와 같은 도구를 사용할 수 도 있습니다. 

 

파이어폭스 브라우저는 동급 최고의 JavaScript 디버거, 마스터 CSS 그리드 밑 기타 다양한 기능을 사용할 수 있습니다. 실제로 파이어폭스 개발자 에디션은 개발자들이 자체 CSS 그리드를 구축 및 설게할 수 있도록 도와주는 도구들로 특별히 제작한 유일한 브라우저이기 때문에, 도구를 사용하여 정보를 시각화하고 영역 이름 표시를 통해 변환을 미리 보는 등 작업에 큰 도움이 될 수 있습니다. 

 

https://www.mozilla.org/en-GB/firefox/developer/

Firefox Developer Edition

• Inactive CSS
  • Firefox DevTools는 페이지에 영향을 미치지 않는 CSS 선언을 회색으로 표시합니다. 정보 아이콘 위로 마우스를 가져가면 문제 해결 방법에 대한 힌트를 포함하여 CSS가 적용되지 않는 이유에 대한 유용한 메시지가 표시됩니다.
• Firefox Devtools
  • Firefox DevTools는 강력하고 유연하며 무엇보다도 해킹이 가능합니다. 여기에는 여러 브라우저를 대상으로 할 수 있으며 리액트 및 Redux에 구축된 동급 최고의 JavaScript 디버거가 포함됩니다.
• Master CSS Grid
  • 파이어폭스는 CSS 그리드로 빌드하고 설계하기 위해 특별히 제작된 도구를 가진 유일한 브라우저입니다. 이러한 도구를 사용하여 그리드를 시각화하고, 관련 영역 이름을 표시하고, 그리드에서 변환을 미리 볼 수 있습니다.
• Fonts Panel
  • Firefox DevTools의 새로운 글꼴 패널을 통해 개발자는 요소에 사용되는 글꼴에 대해 필요한 모든 정보에 빠르게 액세스할 수 있습니다. 또한 글꼴 소스, 가중치, 스타일 등과 같은 중요한 정보를 포함합니다.
• Inspector
  • 코드를 검사하고 세분화하여 픽셀 단위까지 완벽한 레이아웃을 만듭니다.
• Console
  • CSS, JavaScript, 보안 및 네트워크 문제를 추적할 수 있습니다.
• Debugger
  • 프레임워크를 지원하는 강력한 Javascript 디버거.
• Network
  • 사이트를 느리게 만들거나 차단할 수 있는 네트워크 요청을 모니터링합니다.
• Storage Panel
  • 캐시, 쿠키, 데이터베이스 및 세션 데이터를 추가, 수정 및 제거합니다.
• Responsive Design Mode
  • 브라우저의 에뮬레이트된 장치에서 사이트를 테스트합니다.
• Visual Editing
  • 애니메이션, 정렬 및 패딩을 미세 조정합니다.
• Performance
  • 병목 현상을 차단하고, 프로세스를 합리화하고, 자산을 최적화합니다.
• Memory
  • 메모리 누수를 찾아 응용프로그램을 지퍼로 압축합니다.
• Style Editor
  • 브라우저의 모든 CSS 스타일시트를 편집하고 관리합니다.

 

 

---

 

 

 

Polypane

폴리판

 

폴리판은 개발자와 디자이너를 위해 처음부터 끝까지 설계된 특별하고도 독특한 종류의 브라우저입니다. 이 브라우저는 크로스 플랫폼 솔루션 및 DevTool로, 개발자나 전문가들이 최대한 신속하게 웹사이트를 개발하거나 테스트, 디버그하는데 사용되도록 설계되었습니다. 

 

개발자와 디자이너의 작업품질과 생산성을 향상시키기 위해 개발된 폴리판은 유용한 기능이 정말 많습니다. 모든 코드 편집기나, 테크놀로지 스택과의 호환이 됩니다. 또한 폴리판은 기업들이 Wordpress, Drupal, Angular를 통해 고품질 웹사이트를 구축할 수 있도록 모든 기능이 지원됩니다. 

 

개발 및 디버깅 도구가 이미 브라우저에 내장되어 있어, 추가 확장을 찾아서 설치해야 하는 번거로움이 적습니다. 무료 평가판을 제공하기는 하지만, 웹개발자를 위한 대부분 고급 기능을 사용하기 위해선 비용이 발생합니다. 

https://polypane.app/

Polypane, The Browser for Developers and Designers

• Viewport Size 
  • 모바일 화면에서 5K 모니터로 이동하면 모든 뷰포트가 하나의 개요로 표시됩니다.
• Accessibility
  • 80개가 넘는 접근성 테스트, 14개의 서로 다른 에뮬레이터 및 24개의 도구
• Side by side
  • 다크모드 라이트모드 Reduce Motion, 화면 및 인쇄할 때 수동 전환 필요 없음
• RESPONSIVE DESIGN
  • 브라우저 크기 조정 없이 하나의 개요로 모든 뷰포트를 가져옵니다. 수동으로 웹 사이트의 크기를 조정하고 화면별로 테스트하지 않아도 됩니다.
• SYNCED PANES
  • 스크롤, 클릭, 타이핑 및 호버도 모든 뷰포트에 동기화됩니다. 뷰포트나 장치를 하나씩이 아닌 한 번에 모두 확인합니다.
• DEBUG TOOLS
  • 각 뷰포트에 24개 이상의 디버그 도구를 적용하고 사이트를 테스트합니다.
• META PANEL
  • Twitter, Facebook, Slack, LinkedIn, Discord, Telegraph 및 Google용 소셜 미디어 공유의 픽셀 단위 미리 보기가 지원됩니다. 다크모드 라이트 모드 모두.
• EMULATION
  • 운영체제에서 설정을 변경하지 않아도, 라이트모드와 어두운 모드를 한 화면에 나란히 테스트할 수 있습니다. 또한 Reduced motion이나 데이터, 프린트 스타일을 확인하는 데에도 큰 도움을 줍니다.
• DEVTOOLS
  • React DevTools, Vue.js DevTools, Redux DevTools, Angular, Svelte 등을 지원하는 자주 사용하는 Chromium DevTools를 설치하고 사용할 수 있습니다.
• ZERO CONFIGURATION
  • HTML에서 Wordpress to React에 이르는 모든 항목에 대해 Polypane에 바로 내장된 제로 구성 실시간 재적재. 서버를 무중단 다시 로드할 필요가 없습니다.
    
    페이지 새로 고침 없이 이미지 및 CSS가 업데이트됩니다.

 

 

 

---

 

 

 

LAMBDATEST LT Browser

람다테스트 LT 브라우저

 

람다테스트 LT 브라우저 또한 유명하죠? 개발 작업 공간을 개발자에게 제공하여 다양한 장치 및 뷰포트에 대한 웹사이트의 응답성을 테스트 할 수 있습니다. 또한 25개 이상의 다양한 뷰포트를 제공하며, 디버깅, 로컬 웹사이트 테스트, 버그 추적등의 기능을 제공하는 것은 기본입니다.

 

람다테스트 LT 브라우저를 사용하는 웹 개발자는 가장 빠르게 응답성이 뛰어난 고성능 뤱 어플리케이션을 설계하고 개발한다고 합니다. 

 

https://www.lambdatest.com/lt-browser?utm_source=WDD&utm_medium=Organic&utm_campaign=&utm_term=Responsive-Testing-Tools#none

LT Browser for Live Mobile View Debugging | Perform Mobile Website Test

• Create Your Own Custom Device Resolution
  •  LT Browser(LT 브라우저)를 사용하여 자신만의 사용자 지정 장치 보기 포트를 만들고 나중에 사용할 수 있도록 저장할 수 있습니다. 다양한 장치에서 새로운 모바일, 태블릿 또는 데스크탑 장치를 만들고 웹 사이트를 테스트하고 화면 해상도를 높이며 화면 크기에 따라 웹 사이트에 대한 화면 해상도 테스트를 수행할 수 있습니다.
• Side by Side Mobile View Of Website
  • 모바일 웹 사이트 테스트를 수행하기 위해 두 장치 간에 전환할 필요가 없습니다. LT Browser와 함께 두 장치에서 동시에 테스트하고 다른 태블릿 및 데스크톱 크기에서 모바일 웹 사이트 테스트를 수행하고 다른 해상도의 웹 사이트를 동시에 검사합니다.
• Inbuilt DevTools For Mobile Website Test
  • LT 브라우저는 DevTools와 함께 제공되어 응답성 테스트를 동시에 수행하면서 여러 장치 크기를 디버깅할수 있습니다. 각 장치마다 별도의 DevTools를 사용하여 다양한 장치 해상도에서 웹 사이트를 테스트합니다.
• Do You Like Hot Reloading?
  • LT Browser는 실시간으로 변경 내용을 볼 수 있는 핫리로딩을 지원합니다. 코드 편집기 또는 IDE에서 리액트 코드를 저장할 때마다 로컬 URL이 자동으로 LT Browser에서 다시 로드됩니다.
• Improve Website Performance With Lighthouse Reports
  • 클릭 한 번으로 웹 사이트의 성능 보고서를 생성할 수 있습니다. 주요 성능 메트릭, 접근성 점수, SEO 및 전체 성능을 분석할 수 있습니다.
• One-Click Bug Logging
  • Jira, Tello, Asana, GitHub 등 프로젝트 관리/버그 추적 도구에 대해 버그를 표시하고 동료와 공유할 수 있습니다. 
• Test On Different Network Conditions
  • 웹 사이트를 테스트할 수 있는 네트워크 시뮬레이션 기능이 내장되어 있습니다. 오프라인 모드에서 웹 사이트를 테스트하고 웹 사이트가 실제 사용자에게 어떻게 반영되는지 확인할 수도 있습니다.
• Check Mobile View Of Your Website
  
  • 미리 설치된 여러 모바일 장치 보기 포트에서 웹 사이트를 테스트합니다. 

 

 

 

 

 

---

 

 

Google Chrome for Developers

구글 크롬 개발자 버전

 

구글 크롬은 모르는 사람이 없는 세상에서 가장 널리 사용되는 브라우저입니다. 최근 추정치에 따르면 시장 점유율이 58%를 넘겼다고 합니다. 일반 사용자들에게도 좋지만 개발자에게도 특별한 구글 크롬 개발자 버전은 구글이 자체 개발한 개방형 웹입니다.

 

개방형 웹 용으로 개발된 Google Chrome for Developers를 사용하면 웹 기반 플랫폼의 최신 API를 실시간으로 테스트 할 수있음은 물론이고, 브라우저에 구현할 수있는 정말 말 그대로 무한한 도구와 추가 기능이 포함되어 있습니다. Wordpress를 위한 PHP 콘솔, 암호 제어를 위한 LastPass 또한 매우 유용합니다. 

 

구글 크롬 개발자버전은 매주 정기적인 업데이트를 통해 언제나 최첨단에 있습니다. 

 

https://www.google.com/chrome/dev/

Chrome 개발자

말이 필요없는 크롬 개발자.

 

매주 하는 업데이트를 통해 언제나 최신입니다.

 

 

 

 

---

 

Opera

오페라

 

 

오페라는 크롬이나 파이어폭스만큼이나 인기가 있지는 않습니다만, 좋은 이점들이 분명히 많스비다. 너무 많은 고급 개발 기능이 필요한 경우가 아니라면 빠르고 효과적인 오페라를 생각해볼 수도 있습니다.

 

크롬이나 파이어폭스와는 달리 오페라는 내장형 기능에 더 많이 의존합니다. 기능을 추가하기에 어려움이 있을 수 있습니다만 속도테스트나 연결 문제에 있어서는 괜찮다는 평이 많았습니다. 

 

https://www.opera.com/computer/beta

브라우저 업그레이드 | 무료 베타 버전 | Opera

 

오페라의 경우에는 버전이 매우 많습니다. 오페라의 베타버젼과 개발자에 대한 최신 추가 정보나 기능은 아래 블로그를 통해 추가적으로 확인 할 수 있습니다.

https://blogs.opera.com/desktop/

Opera Desktop Team's Blog | Opera

 

 

 

 

---

 

 

 

Blisk

블리스크

 

블리스크는 온라인에서 거의 관심받지 못하는 브라우저입니다. 하지만 이 브라우저는 설계자가 가능한 한 신속하게 최신 어플리케이션을 개발하고 테스트할 수 있는 개발 우선 업무 공간을 제공하도록 특별히 설계되어 있어, 성장하는 개발자들에게는 유용하다고 할 수 있습니다. 

 

블리스크는 온라인 환경을 만드는데 필요한 모든 기능에 엑세스 할 수 있는 유일한 개발자 중심의 웹브라우저입니다. 모바일과 데스크탑 디자인을 나란히 표시하여 UI를 어디에 가져다 놓던 비교하기 수월한 블리스크의 기타 기능에 대해서도 소개해드리겠습니다. 

 

https://blisk.io/

Download Blisk - a browser for web developers

• Side-by-side view
• Page Auto-refresh
• Error notifications
• Screenshots and recorder

 

 

 

---

 

 

Safari for Developers 

사파리 개발자

 

 

많은 사람들은 그렇게 생각하지 않겠지만, 사파리 개발자는 구축하려코자 하는 웹사이트의 종류나 온라인 환경에 따라 매우 강력한 도구가 될 수 있습니다. 지금까지 언급한 브라우저들에 비해 사용할 수 있는 옵션들이 광범위하진 않지만 엄청난 이점이 있기 때문에 소개합니다.

 

Safari는 역시 iPhone, Mac, 및 iPad에서는 정말 놀라운 성능을 발휘할 수 있으며 안정적입니다. 가장 좋은 방법이라 할 수도 있겠습니다. 

 

또한 Safari for Developers를 사용하면 한국에선 사용이 어려운 Apple Pay와 옵션을 웹사이트에 추가할 수 있고 Apple Pay는 해외에서는 결제 수단으로 상당히 핫합니다.

 

사파리는 맥 용 앱스토어에 자체 탭이 있어 Xcode와 같은 기능을 탐색하여 사용할 수 있습니다. 

 

https://developer.apple.com/safari/

Safari - Apple Developer

 

• Apple Pay on the Web
• Picture in Picture
• Safari Extensions on the Mac App Store
• Content Blockers on macOS
• Autoplay and Inline Video on iOS
• HTML5 and Legacy Plug-ins on macOS
• Split View in Safari on iPad
• Web Inspector
• Responsive Design Mode

그 외 기능은 웹사이트에서 확인 해 볼 수 있습니다. 

 

 

---

 

 

 

일반적인 브라우저로는 개발자들에게 필요한 기능을 제공할 수 없습니다. 그래서 구글 크롬이나 블리스크와 같은 다양한 솔루션들을 사용해보고 실험해보는 것이 중요합니다.

 

상황에 걸맞는 브라우저를 잘 찾아 사용하길 바라며 건투를 빕니다. 

 

 

 

 

 

2021.06.01 - [개발자/무기] - [Text Editor] 2021 최고의 텍스트 편집기

[Text Editor] 2021 최고의 텍스트 편집기

2021.06.08 - [개발자/무기] - [Software] 웹 개발자를 위한 웹 개발 소프트웨어 TOP12

[Software] 웹 개발자를 위한 웹 개발 소프트웨어 TOP12

2021.06.05 - [개발자/무기] - [Browser] 2020 개발자를 위한 최고의 브라우저 - 언제까지 Chrome이 최고라고 생각할 겁니까

[Browser] 2020 개발자를 위한 최고의 브라우저 - 언제까지 Chrome이 최고라고 생각할 겁니까