PC 쪽에서 웹사이트에 접속하려면 F12를 누르면 브라우저를 통해 디버깅 도구를 열어 출력 로그, 네트워크 요청, 웹페이지 요소, 쿠키 및 기타 정보를 확인할 수 있습니다.
하지만 모바일이나 미니 프로그램, 앱을 개발할 때는 비정상적인 문제가 발생하여 비정상적인 정보를 직접 볼 수 없습니다. 이 글에서는 두 개의 프론트엔드 개발자용 디버깅 패널을 추천합니다.
먼저 소스 코드를 업로드하세요:
v콘솔
모바일 웹페이지를 위한 가볍고 확장 가능한 프론트엔드 개발자 디버깅 패널입니다.
- 콘솔 로그를 확인해 보세요
- 네트워크 요청 보기
- 페이지 요소 구조를 살펴보세요
- 쿠키, localStorage, 세션 스토리지를 확인해 보세요
- JS 명령줄을 수동으로 실행하세요
- 커스텀 플러그인
주소:하이퍼링크 로그인이 보입니다.
에루다
Eruda는 모바일 웹 페이지 프론트엔드용으로 설계된 디버깅 패널로, DevTools의 미니 버전과 유사합니다. 콘솔 로그 캡처, 요소 상태 확인, XHR 요청 캡처, 로컬 저장소 및 쿠키 정보 표시 등 주요 기능을 갖추고 있습니다.
버튼 드래그 앤 드롭, 패널 투명도 크기 설정.
- 콘솔 패널: 콘솔 로그, 지원 로그, 오류, 정보, 경고, 명령, 시간/시간 종료, 정리, 카운트, 어서트, 테이블 기록; %c 사용자 지정 스타일 출력 등 자리 표시자 지원; 로그 타입과 정규 표현식에 따른 필터링 지원; JavaScript 스크립트 실행도 지원합니다.
- 요소 패널: 태그 콘텐츠 및 속성 보기; DOM에서 앱이 어떻게 스타일링되는지 확인해보세요; 페이지 요소 강조 지원; 화면에서 직접 클릭 선택 지원; DOM에 묶인 이벤트 유형을 확인하세요.
- 네트워크 패널: 요청을 캡처하고 전송된 데이터, 반환 헤더, 반환된 콘텐츠 등의 정보를 확인할 수 있습니다.
- 리소스 패널: localStorage, sessionStorage, 쿠키를 보고 삭제합니다. 페이지 로드 스크립트와 스타일 파일 보기; 페이지 로드 이미지 보기.
- 출처 패널: 페이지의 소스 코드를 보기; HTML, CSS, JS 코드와 JSON 데이터를 포맷하세요.
- 정보 패널: 출력 URL 및 사용자 에이전트; 맞춤 출력 콘텐츠 지원.
- 스니펫 패널: 페이지 요소에 테두리 추가; 타임스탬프를 추가해 페이지를 새로고침하세요; 커스텀 코드 스니펫도 지원합니다.
주소:하이퍼링크 로그인이 보입니다. |
게시됨 2020. 6. 29. 오후 3:36:20
|
|
|
|
집주인