다섯 가지 전단 개발에 필요한 디버깅 기술

전단 개발에서 디버깅 기술은 없어서는 안 될 기능이다. 본고는 5가지 전단 개발에 필요한 디버깅 기술을 소개한다.
  • Weinre 모바일 디버깅
  • DOM 브레이크
  • debugger 단점
  • native 방법hook
  • 원격 매핑 로컬 디버깅
  • Weinre
    이동에서 디버깅을 개발하는 것은 매우 복잡하기 때문에weinre가 생겼다.weinre를 설치하면 pc로 핸드폰 페이지를 디버깅할 수 있기 때문에 모바일 개발 디버깅에 매우 중요합니다.
    weinre 설치
    weinre는 npm를 통해 설치할 수 있습니다:
    npm install -g weinre

    설치가 완료되면 다음 명령을 실행하여 를 시작할 수 있습니다.
    weinre --httpPort 8080 --boundHost -all-

    이렇게 자신의 127.0.0.1:8080에 방문하여 디버깅이 필요한 페이지에 js를 삽입하면 디버깅을 할 수 있습니다.조작 인터페이스는 크롬의 DevTools와 유사하며, 구체적인 조작은 [강좌](if (waldo) { debugger; }
    이때 콘솔 패널을 열면 디버깅이 가능합니다
    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을 사용합니다.
    이것은 더 이상 말하지 않고 국내의 몇 편의 문장에 직접 올라간다.
  • http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html
  • http://www.cnblogs.com/TankXiao/p/3063871.html

  • 전재자: 5가지 전단 개발에 필요한 디버깅 기술

    좋은 웹페이지 즐겨찾기