새 Microsoft Edge(Chromium)의 DevTools 목록

새로운 Microsoft Edge는 Chromium 오픈 소스 프로젝트를 사용하여 구축되었으며 개발자인 경우 다음은 Microsoft Edge(Chromium)의 개발 도구 목록입니다. . 몇 가지 새로운 도구가 DevTools 목록에 포함되었습니다. 개발자가 Microsoft Edge에서 웹 사이트를 쉽고 빠르게 구축하고 테스트할 수 있습니다.

새 Edge(Chromium)의 DevTools 목록

Microsoft Edge(Chromium) DevTools는 크게 두 가지 범주로 분류할 수 있습니다.

1. 핵심 도구
2. 확장.

1] 핵심 도구

요소 패널 – 웹 개발자를 위한 DevTools의 가장 유용한 기능 중 하나는 페이지에서 HTML 및 CSS를 "라이브 편집"하는 기능입니다. 요소 패널을 사용하여 HTML 및 CSS를 편집하고, 접근성 속성을 검사하고, 이벤트 리스너를 보고, DOM 변형 중단점을 설정할 수 있습니다.

콘솔 – 콘솔 도구는 일반적으로 JavaScript, 네트워크 요청 및 보안 오류와 같은 웹 페이지와 관련된 정보를 기록합니다. 따라서 문제 해결의 첫 번째 단계는 브라우저 콘솔을 확인하는 것입니다.

이러한 이유 때문입니다. Edge 브라우저에서 전용 콘솔 패널을 찾을 수 있습니다. 개발자는 대화형 디버깅, 임시 테스트에 동일한 패널을 사용하고 실행 중인 웹 페이지 안팎으로 통신할 수 있습니다.

소스 패널 – 모든 JavaScript 개발자에게 가장 유용한 단일 도구인 JavaScript 디버거입니다. 이를 사용하여 개발자는 런타임에 코드를 열고 편집하고, 중단점을 설정하고, 코드를 단계별로 실행하고, 한 번에 JavaScript 한 줄씩 웹 사이트의 상태를 볼 수 있습니다.

네트워크 패널 – 네트워크 및 브라우저 캐시의 요청과 응답을 모니터링하고 검사할 수 있습니다.

실적 패널 – 런타임 성능 데이터 기록을 담당합니다. 런타임 성능은 페이지가 로드되는 것과는 대조적으로 실행 중일 때의 성능입니다.

메모리 패널 – 메모리 문제는 성능 문제의 주요 원인이 될 수 있습니다. 시간이 지남에 따라 페이지가 점점 더 응답하지 않고 느려질 수 있습니다. 메모리 패널은 시스템 리소스 사용을 측정하고 코드 실행의 다양한 상태에서 힙 스냅샷을 비교할 수 있습니다.

응용 프로그램 패널 – 몇 가지 흥미로운 웹 페이지 속성을 표시합니다. 패널에서 스토리지, 데이터베이스 및 캐시를 검사하고 관리할 수 있습니다.

보안 패널 – 현재 보고 있는 페이지가 안전한지 확인할 수 있습니다. 원산지도 확인할 수 있습니다. 개발자는 이를 사용하여 보안 문제를 디버그하고 HTTPS가 적절하게 구현되었는지 확인할 수 있습니다.

감사 패널 – 자체 설명이므로 배타적인 설명이 필요하지 않습니다. 이 기능을 사용하면 웹 사이트를 감사할 수 있습니다. 얻은 결과는 웹사이트 품질을 개선하는 데 도움이 될 수 있습니다.

읽기 :Edge DevTools에서 프로파일링 세션을 시작하는 동안 오류가 발생했습니다.

2] 확장 프로그램

Edge는 확장을 지원하지만 현재로서는 DevTool에 사용할 수 있는 확장이 없습니다. 대신 타사 확장 저장소에서 확장을 설치해야 합니다. 크롬 웹 스토어.

• Edge 왼쪽 상단의 점 3개 또는 메뉴 아이콘을 클릭합니다. 확장 프로그램을 클릭합니다. .
• 확장 프로그램 페이지의 왼쪽 하단에서 다른 상점의 확장 프로그램 허용 토글을 켭니다.
• 다음으로 Chrome 웹 스토어로 이동하여 DevTools와 작동하는 확장 프로그램(예:Facebook의 ReAct 개발자 도구)을 엽니다.
• Chrome에 추가하려면 클릭하세요. 그러면 DevTools 확장 프로그램이 Microsoft Edge에 추가됩니다!

간단히 말해서 Edge에 Chrome 확장 프로그램을 설치하는 방법입니다. 그러나 순수한 Chrome 확장 프로그램인 경우 Microsoft에서 일부 Chromium 서비스 및 기능을 제거했기 때문에 작동하거나 작동하지 않을 수 있다는 경고를 받습니다.

새로운 Edge 브라우저는 Windows 10의 다음 기능 업데이트와 함께 제공될 예정입니다. Edge에 의존하는 웹사이트나 비즈니스가 있다면 미리 준비하는 것이 좋습니다.

자세한 내용을 보려면 Microsoft.com을 방문하십시오.