여러분, 안녕하세요.
엑사이트로 창가 엔지니어를 하고 있는 사카다입니다.
(그리고 저녁의 서일이 눈부시다!)

평소 아무렇지도 않게 사용하고 있는 디버거를 사용한 디버그입니다만, 모르는 사람도 있다고 하는 것이므로, 써 보았습니다.

Mobile Safari 디버깅

준비하는 것

iPhone 등 iOS 기기

Mac

Safari (Mac 버전)

이전 준비

iOS 기기에서 디버깅 권한 부여

設定>Safari>詳細 로 가서 Webインスペクタ 를 On 로 한다.

iOS 기기를 Mac에 연결하기

※접속 허가를 듣는다고 생각하므로, 허가해 주세요.詳細設定>詳細 를 꺼내 メニューバーに"開発"メニューを表示 에 체크
Cmd + , 하지만 갈 수 있다.

맨 아래의 체크 박스를 체크.

메뉴에 개발 탭이 나올 것.

디버깅

iOS 기기에서 Mobile Safari를 시작하고 디버깅하려는 페이지 열기

이번은 샘플로서 「 Excite 전화 운세 」의 톱을 예로서 사용합니다.

Mac에서 Safari 시작하기 개발 메뉴에서 연결된 iOS 기기의 제어할 창을 선택합니다.

Inspector를 열고 적절한 DOM을 선택하십시오.

그러면 실제 기계에서 파란색 마스크가 걸려 어떤 요소인지 확인할 수 있다.

시도에 지우기

DOM의 스타일에 display: none; 등을 써서 지운다.

이대로 곧 사라진다.

콘솔에서 JS를 만지다

아래의 콘솔 혹은 콘솔 탭에서 적당한 JS를 작성해 본다.
예에서는 alert('hoge'); 를 쓰고 있다.
※ Enter 로 실행할 수 없는 경우는 Shift + Enter
그러면 실제 기계로 Alert가 나온다.

브레이크 포인트를 놓고 JS를 멈추십시오.

인스펙터의 デバッガ 에서 scrollTop.js 를 선택해, 25행째 근처에서 멈추어 본다.

어느 정도 스크롤시켜 페이지 톱으로 이동하는 버튼을 누른다.

그러면 방금 지정한 브레이크 포인트에서 멈춘다.

현재의 스크롤량을 확인.

여기에서 관리자의 하단 콘솔에서 $(window).scrollTop(100)
그러면 실제 기계에서 스크롤 위치가 바뀝니다.

결과.

디버거 메뉴

- 처리 계속 (다음 브레이크 포인트가있을 때까지 실행. 그렇지 않으면 그대로 처리 종료까지 실행)
- 스텝 오버 (다음 행으로 이동)
- 스텝 인투 (그 행에서 호출하는 함수로 이동)
- 스텝 아웃 (그 행의 처리의 호출원에 돌아올 때까지 처리 실행)

결론

어쨌든, Safari의 디버거에 의한 JS의 디버깅 방법에 대해 간단히 썼습니다.
다소 보충해 두면, 자주 있는 IDE에서의 디버그와 같이, 브레이크 포인트중은 그 스코프도 유지되기 때문에, 그 안에서 밖에 존재하지 않는 변수의 확인이나 대입등도 가능합니다.
일부러 예기치 않은 상태를 만들어 동작을 검증해 보는 것도 좋을 것입니다.
덧붙여 Mac에서 하면 격중입니다만, Android의 Chrome에서도 같은 리모트 디버그를 할 수 있습니다.
Windows 사용자는 보는 것도 좋을지도 모릅니다.

사실은 PHPStorm과 Xdebug에 의한 로컬 디버그 등도 쓰고 싶었습니다만, 조금 쓸 수 있을 것 같지 않기 때문에 이번은 이번까지, 라고 하는 것으로.
마음이 가면 씁니다.

아디오스.