다섯 가지 전단 개발에 필요한 디버깅 기술
이동에서 디버깅을 개발하는 것은 매우 복잡하기 때문에weinre가 생겼다.weinre를 설치하면 pc로 핸드폰 페이지를 디버깅할 수 있기 때문에 모바일 개발 디버깅에 매우 중요합니다.
weinre 설치
weinre는 npm를 통해 설치할 수 있습니다:
npm install -g weinre설치가 완료되면 다음 명령을 실행하여 를 시작할 수 있습니다.
weinre --httpPort 8080 --boundHost -all-이렇게 자신의 127.0.0.1:8080에 방문하여 디버깅이 필요한 페이지에 js를 삽입하면 디버깅을 할 수 있습니다.조작 인터페이스는 크롬의 DevTools와 유사하며, 구체적인 조작은 [강좌](
이때 콘솔 패널을 열면 디버깅이 가능합니다
Tips
디버깅을 어떻게 하는지 모르면, 빨리 보기: 크롬 DevTools 인터럽트 부분의 튜토리얼
원본 코드의 훅 디버깅
브라우저 자체가 윈도우 대상과 같은 원생 js 방법을 내장할 수 있기 때문에, 원생 코드에 문제가 있다는 것을 알지만, 디버깅을 추적할 수 없을 때 이 방법을 사용할 수 있다.
예를 들다
예를 들어 우리는 DOM의 속성 값에 변화가 생겼음을 알았지만 어느 코드가 변화를 일으켰는지 알 수 없기 때문에 DOM 요소의 setattribute에 단점을 줄 수 있다. 코드는 다음과 같다.
var oldFn = Element.prototype.setAttribute;
Element.prototype.setAttribute = function (attr, value) {
if (value === "the_droids_you_are_looking_for") {
debugger;
}
oldFn.call(this, attr, value);
}이렇게 하면 원소의 속성이 변할 때 단점까지 실행되고 단점의 창고에서 호출된 곳을 찾을 수 있습니다~
Tips
이런 방법은 모든 브라우저에서 효과가 있을 수 없다. 예를 들어ios의safari 프라이버시 모드에서 우리는local Storage 방법을 수정할 수 없다.
원격 매핑 로컬 디버깅
온라인의 어떤 js/css에 문제가 발생하면, 우리는 원격 파일 에이전트를 로컬로 해서 원격 맵 디버깅을 실현할 수 있습니다.사실 이 기능 외에도 클러치 도구로 사용할 수 있는데 이것은 이동단에서 매우 중요하다.Mac용 [charles Proxy](http://www.charlesproxy.com/), 윈도우즈 사용자는fiddle을 사용합니다.
이것은 더 이상 말하지 않고 국내의 몇 편의 문장에 직접 올라간다.
전재자: 5가지 전단 개발에 필요한 디버깅 기술
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
onbeforeunload 이벤트 검사 창 새로 고침 또는 닫기 사용onunload, onbeforeunload는 페이지를 새로 고치거나 닫을 때 호출됩니다. onbeforeunload는 페이지를 새로 고치거나 닫기 전에 터치합니다. 브라우저는 서버에 새 페이지를 읽으라고 요청하지 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
