모 바 일 웹 페이지 개발 디 버 깅 신기 Eruda 의 소개 및 사용 방법

머리말
우리 가 모 바 일 웹 개발 을 하고 있 는 가장 큰 통 증 은 실제 컴퓨터 가 실 행 될 때 console.log 로그 와 다른 정 보 를 볼 수 없다 는 것 이다.예 를 들 어 네트워크 요청,로 컬 저장 소 표시 등 이다.웹 페이지 가 모 바 일 브 라 우 저 에서 잘 작 동 하 는 편 이 라면 컴퓨터 에 웹 주 소 를 열 어 콘 솔 정 보 를 볼 수 있 지만 앱 을 만 드 는 내 장 된 H5 페이지 라면 개발 단계 로 브 라 우 저 시 뮬 레이 션 환경 에서 버그 가 없 도록 할 수 밖 에 없다.그러나 H5 가 출시 되면 오류 가 발생 하고 앱 환경 에 의존 해 달 릴 수 있 는 웹 페이지 이다.문 제 를 찾기 가 더욱 어렵다.모 바 일 에 도 크롬 개발 자 도구 와 유사 한 도 구 를 갖 게 한다 면 즐 겁 지 않 겠 습 니까?
vConsole 은 바로 이렇게 좋 은 모 바 일 개발 자 도구 로 큰 공장 펭귄 이 생산 한다.그러나 본 고 는 그 를 남자 2 번 으로 정 했다.오늘 의 주인공 남자 1 번 은 에 루 다!vConsole 의 동류.모 바 일 에서 웹 페이지 를 디 버 깅 하 는 방법 을 모른다 면 이 글 은 도움 이 될 것 입 니 다.만약 에 vConsole 의 사용자 라면 Eruda 를 시도 해 보 세 요.모 바 일 웹 페이지 에서 유골 급 유 저 를 개발 한다 면 조용히 본문 을 무시 할 수 있 습 니 다.
Eruda 가 누구 예요?
안녕하세요,소개 해 드 리 겠 습 니 다.제......................................................Eruda 는 모 바 일 웹 페이지 전단 을 위 한 디 버 깅 패 널 로 개발 자 도구 와 유사 한 미니 버 전 으로 콘 솔 로그 캡 처,요소 상태 검사,성능 지표 표시,XHR 요청 캡 처,로 컬 저장 및 쿠키 정보 표시,브 라 우 저 특성 검사 등 이 주요 기능 이다.
GitHub 주소:https://github.com/liriliri/eruda （ 로 컬 다운로드,비 주 얼 과 스 킬 이 모두 뛰어난 Erdua:

상세 한 소 개 는여기 찍 어.생산 할 수 있 으 니,나 는 군말 하지 않 겠 다.
사용 기교
이것 이 야 말로 본문의 중점 이다.Eruda 의 기본 적 인 사용 방법 은 CDN 과 설정 가능 한 매개 변 수 를 사용 하 는 것 을 추천 합 니 다.페이지 에 다음 과 같은 코드 를 도입 합 니 다.

;(function () {
 var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
 if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') !== 'true') return;
 document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
 document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

eruda.init();어떤 판 넬 을 초기 화 할 지,기본적으로 모든 판 넬 을 불 러 올 수 있 습 니 다.
이렇게 사용 하 는 방식 은 틀 리 지 않 았 습 니 다.하지만 Eruda 가 온라인 에 따라 발표 하려 면 이 코드 를 삭제 해 야 합 니까?Eruda 를 디 버 깅 할 필요 가 있 든 없 든 바로 불 러 오고 페이지 에 Eruda 아이콘 이 나타 나 기 때 문 입 니 다.제 목 표 는 Eruda 는 페이지 에 보관 할 수 있 습 니 다.어떤 환경 이 든 우리 가 그것 을 부 르 고 싶 을 때 만 나타 나 는 것 입 니 다.필요 하지 않 을 때 는 효력 이 발생 하지 않 는 일반 코드 일 뿐 입 니 다.
제 가 생각 한 방법 은 먼저 상기 도입 코드 의 src 를 if 에 넣 고 localStorage 를 sessionStorage 로 바 꾸 는 것 입 니 다.active-eruda 매개 변수 도 더 짧 은 이름 으로 바 꿀 수 있 습 니 다.변 경 된 코드 는 다음 과 같 습 니 다.

;(function () {
 if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda') !== 'true') return;
 var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
 document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
 document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

이 코드 는 URL 에 인자eruda=true가 있 거나 session Storage 에 있 는 eruda 의 값 이 true 여야 Eruda 를 불 러 온 다 는 뜻 입 니 다.이러한 장점 은 우리 가 디 버 깅 을 해 야 할 때 웹 URL 뒤에 인 자 를 추가 하면 되 고 디 버 깅 이 필요 없 는 것 은 불 러 오지 않 는 다 는 것 이다.
그러나 이 는 개발 단계 에서 이렇게 하 는 것 이 좋 지만 온라인 환경 에 URL 파 라 메 터 를 추가 하 는 것 이 번 거 로 울 수 있 습 니 다.그래서 저 는 페이지 에서 어떤 요 소 를 10 번 클릭 하고 Eruda 를 불 러 오고 10 번 이나 더 클릭 한 다음 에 session Storage 에 기록eruda=true한 다음 에 현재 페이지 를 새로 고 치 는 것 을 생각 했 습 니 다.반면 에 루 다 를 10 번 더 클릭 해 닫는다.이렇게 숨겨 진 방식 으로 Eruda 를 켜 거나 닫 으 면 온라인 환경 도 자 유 롭 게 Eruda 를 켜 거나 닫 을 수 있 습 니 다.
예:만약 에 이런 페이지 가 있다 면 제목 문자 가 있 습 니 다.

<h2>――    ――</h2>
<div>
.....
</div>

그러면 h2 탭 에 click 이 벤트 를 연결 할 수 있 습 니 다.가입 방법 은 showEruda 입 니 다.

<h2 onclick="showEruda">――    ――</h2>
<div>
.....
</div>

<script>
var count = 0;
function showEruda () {
 if (count >= 10) { 
 var erdua = sessionStorage.getItem('erdua');
 if (!erdua || erdua === 'false'){
  sessionStorage.setItem('eruda', 'true')
 } else {
  sessionStorage.setItem('eruda', 'false')
 }
 location.reload()
 }
 count++
}
</script>

이렇게 규칙 을 10 번 클릭 하면 Eruda 를 불 러 일 으 킬 수 있 습 니 다.10 번 만 더 클릭 하면 Eruda 를 닫 습 니 다.어쨌든 좋 은 것 같 습 니 다.
다 들 어떻게 쓰 는 지 모 르 겠 는데?
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.