DevTools 대결 가장자리의 F12 대 파이어 폭스 대 Chrome
Windows Edge의 새로운 기본 브라우저 인 Microsoft Edge의 개발자 도구는 이전 버전 인 Internet Explorer 11의 F12 개발 도구와 비교하여 현대적인 디자인과 몇 가지 새로운 기능을 제공합니다.
모질라 파이어 폭스 (Microsoft Mozilla Firefox) 나 구글 크롬 (Google Chrome)과 같은 다른 최신 브라우저의 개발 도구 인 마이크로 소프트 엣지 (Microsoft Edge)의 개발 도구가 인기있는 경쟁자들과 맞는지 여부에 대한 질문은 자연스럽게 많은 개발자들의 마음 속에 나타난다..
이 포스트에서 우리는이 질문에 답하기 위해 Edge의 F12 Dev Tools를 실제로 사용할 가치가 있는지 알아 봅니다. Google의 기능을 Firefox의 개발자 도구 및 Chrome의 DevTools와 비교할 것입니다..
개발 도구 열기
F12 키를 누르면 Firefox의 개발자 도구, Chrome의 DevTools, Microsoft Edge의 F12 개발자 도구 등 3 가지 경우 모두에서 개발자 도구가 열립니다. 바로 가기 키입니다. Edge F12 Dev Tools의 정식 명칭 에서 오는.
Edge의 Dev Tools를 열면 가장 잘 알려진 단점 중 하나를 즉시 경험할 수 있습니다. 현재 도구를 기존 창에 고정하는 것은 불가능합니다.. dev 도구 창을 화면 하단에 고정 시키면 Firefox Developer Tools 및 Chrome DevTools의 화면에서 어떤 일이 벌어 지는지 알 수 있지만 (현재) Edge와 동일한 작업을 수행 할 수는 없습니다.
Microsoft 개발자는 향후 업데이트에서이 문제점을 해결할 것이라고 주장합니다..
DOM 검사
그만큼 DOM Explorer 도구 (바로 가기 : CTRL + 1)는 Microsoft Edge의 F12 개발 도구 중 첫 번째 탭입니다. 레이아웃과 전반적인 디자인은 요소 Chrome 탭과 검사관 Firefox의 탭, 그러나 기능은 현저하게 다릅니다..
Edge에서는 렌더링 된 HTML 문서, 관련 CSS 스타일 및 각 요소에 등록 된 이벤트 핸들러를 살펴볼 수 있습니다. 또한 두 경쟁 브라우저에서 이미 잘 알려진 계산 된 값을 사용하여 CSS 상자 모델에 대한 작은 그래픽을 찾을 수 있습니다.
너는 할 수있다. CSS 규칙을 이용한 실험 현재 항목을 삭제하고 새 항목을 추가하면 요약 된 변경 사항 다음과 같은 별도의 하부 탭에서 “변경 사항” (왼쪽에 위치). 후자는 Firefox 개발자 또는 Chrome DevTools에서 빌드되지 않은 기능입니다. 사용자에게 간단하게 요약 할 수 있으므로 정말 유용한 옵션입니다..
Firefox 개발자 도구에는 Edge 또는 Google 크롬이 현재 제공하지 않는 기능이 있지만 디자이너의 생활에 큰 도움이 될 수 있습니다. 글꼴 및 애니메이션 분석 도구.
가장자리에는 시원한 색상 선택 도구 그것은 다소 사용자에게 보상 할 수 있습니다.
JavaScript와 상호 작용
그만큼 콘솔 탭 (바로 가기 : CTRL + 2)을 사용하면 Firefox 및 Chrome Dev Tools에서와 마찬가지로 사이트의 JavaScript와 상호 작용할 수 있습니다. 세 가지 모두 자바 스크립트 오류를 실시간으로 추적 할 수 있으며 사용자가 입력 한 내용을 입력하여 분석 할 수도 있습니다.
Edge의 F12 Dev Tools 콘솔 도구에는 멋진 기능이 있습니다. 자동 완성 기능 명령에 도움이되는 것 같지만 덜 지식이있는 Firefox 및 Chrome 개발 도구에있는 것과 비교.
가장자리 오류, 경고 및 메시지를 구분합니다. 다른 두 툴킷에는없는 큰 도움이됩니다..
파이어 폭스의 콘솔은 3 가지 개발 도구 중에서 가장 전문적인 것으로 보인다. 네트워크, CSS, 보안 오류 및 로깅 메시지와 같은 다른 종류의 문제를 별도로 표시합니다., 이를 통해 귀하가 콘솔 인터페이스, JavaScript 오류뿐 아니라.
귀하의 행동 강령 이해하기
그만큼 디버거 도구 (바로 가기 : Ctrl + 3)는 잠재적 인 버그를 찾는 동안 코드에 어떤 일이 일어나고 있는지 이해할 수 있도록 도와줍니다. 시계 및 중단 점을 설정하고 호출 스택을 볼 수 있습니다..
시계 창에는 변수 값이 표시되고 콜 스택 모드에는 현재 상태로 연결된 함수 호출 체인이 표시되며 중단 점 모드에는 설정 한 중단 점 목록이 표시됩니다.
Edge의 F12 개발 도구를 사용하면 코드 일시 중지 실행 중간에 한 줄씩 단계별로 실행하십시오. 또한 다음과 같은 옵션을 사용할 수 있습니다. 컴파일 또는 축소 된 JavaScript 파일의 가독성 향상, 너는 할 수있다. 다른 리소스를 디버그한다. (자바 스크립트, 확장 프로그램 등) 하나씩.
Firefox 및 Chrome DevTools는 이러한 모든 기능을 제공하므로 Edge는 뛰어난 디버깅 환경을 제공하지 않지만 경쟁 업체와 동등한 견고하고 신뢰할 수있는 도구를 사용자에게 제공합니다.
브라우저 - 서버 통신 살펴보기
그만큼 회로망 도구 (바로 가기 : Ctrl + 4)는 Internet Explorer 11부터 Microsoft Edge 용으로 완전히 다시 디자인되었습니다.이 편리한 도구 덕분에 서버와 브라우저 간의 통신을 따르십시오., 개별 요청을 조사.
너는 할 수있다. 콘텐츠 유형별 결과 필터링 스타일 시트, 이미지, 미디어, 글꼴, XHR 및 기타 여러 항목이 있습니다. 당신은 또한 수 AJAX 디버그 네트워크 도구의 도움으로.
Edge와 Firefox의 네트워크 탭은 아주 비슷한 기능과 사용자 인터페이스를 제공합니다. 둘 다 선택한 리소스의 HTTP 헤더, HTTP 본문, 매개 변수, 관련 쿠키 및 타이밍을 항목별로 볼 수있는 사용자 친화적 인 사이드 바 창을 가지고 있습니다.
Chrome DevTools의 네트워크 탭에는 이와 같은 창이 없지만 요청을 하나씩 클릭하면 동일한 정보를 볼 수 있습니다. 덜 직관적 인 솔루션이지만.
느린 페이지 추적
그만큼 공연 탭 (바로 가기 : Ctrl + 5)을 사용하면 느린 웹 페이지의 이유를 이해하는 데 도움이됩니다. 성능 도구를 사용하여 Microsoft는 이전 버전과 UI 반응성 및 프로파일 러 도구를 사용하여 모든 스크립팅의 종단 간보기를 만들고 성능을 시각화합니다..
이 편리한 도구는 다양한 유형의 CPU 사용, 사이트 프레임 페인트에 대한 통찰력을 제공하며 타임 라인에 레이블을 설정하여 다른 사용자 시나리오를 격리합니다..
테스트 과정에서 Edge의 성능 도구가 속도 문제에 대한 추가 정보 Firefox 개발자 또는 Chrome DevTools보다 Edge의 성능 탭 사용자 인터페이스는 잘 디자인되어있어 시각적 단서가 많으며 사용하기가 비교적 쉽습니다. 사용 방법에 대해 자세히 알고 싶으면 자세한 문서를 읽어보십시오..
메모리 문제 진단
그만큼 기억 도구 (바로 가기 : Ctrl + 6)를 사용하면 메모리 누출 찾기 또한 웹 페이지 속도를 늦출 수 있습니다. 안정성에 영향을 미침 귀하의 사이트.
좋은 그래프를 통해 메모리 사용량이 증가하는 곳을 쉽게 이해할 수 있으며 메모리 사용을 분석 할 수 있도록 특정 지점에서 스냅 샷을 만들 수 있습니다. 당신은 또한 수 서로 다른 지점에서 만들어진 두 개의 스냅 샷 비교 페이지 라이프 사이클의 차이점을 이해하기위한 페이지 수명주기.
Chrome DevTools는 프로필 탭에서 멋진 메모리 프로파일 러를 제공하지만 Firefox Developer는 기본적으로이 기능을 제공하지 않지만 원하는 경우 애드온을 다운로드하여 설치할 수 있습니다. Chrome DevTools의 메모리 프로파일 러는 매우 진보되어 있으며 Edge의 것보다 더 많은 기능을 제공합니다. 예를 들어, 시간이 지남에 따라 자바 스크립트 객체 할당 기록하기 메모리 누수를 격리하는 데 도움이되는.
다른 화면 크기에서 사이트 테스트
그만큼 에뮬레이션 도구 (바로 가기 : CTRL + 7)를 사용하면 여러 상황에서 사이트를 테스트 할 수 있습니다. 데스크톱 및 Windows 10 Mobile과 Internet Explorer의 모든 데스크톱 및 모바일 버전을 비롯하여 다양한 Edge (Edge) 경쟁 업체, Chrome, Firefox, Safari 등 여러 브라우저에서 두 가지 브라우저 프로필을 선택할 수 있습니다..
흥미로운 점은 Bing Bot으로 페이지를 살펴보십시오.. 당신은 또한 수 GPS를 에뮬레이트하다, 설정하다 다른 해상도와 방향.
Firefox 개발자 도구에는 장치 에뮬레이션 도구가 없지만 Chrome DevTools에는 Edge와 경쟁하기 어려운 정교한 에뮬레이터가 있습니다..
예를 들어 Chrome의 에뮬레이션 화면에는 에뮬레이트 된 뷰가 삽입되는 정확한 그리드, 브라우저 프로필과 사용자 에이전트 중에서 선택할 수있을뿐 아니라 다른 버전들 iPhone 또는 Samsung Galaxy 및 기타 여러 제품 Chrome DevTools의 에뮬레이터에도 편리한 기능이 있습니다. 확대 / 축소 옵션 3G, 4G, DSL, WiFi 등 다양한 네트워크에서 사이트를 테스트 할 수 있습니다..
개요
전반적으로 Microsoft Edge의 F12 Dev Tools는 놀랍도록 좋습니다. 다른 최신 브라우저의 인기있는 웹 개발 툴킷과 매우 유사한 기능을 제공합니다. Edge의 F12 Dev Tools는 매우 강력합니다. 사용자 인터페이스 그건 정말 직관적이고 사용자 친화적이며 잘 설계된, 그리고 성능 진단 도구.
이 두 가지 기능을 사용하려면 Edge로 전환하거나 적어도 Edge를 테스트하는 것이 좋습니다. 가장 큰 단점은 개발 도구를 화면 하단에 고정시킬 가능성이 없지만 Microsoft가 신속하게이 문제를 해결할 수 있기를 바랍니다..
