cs09g 블로그

1. 기기의 개발자 옵션에서 USB debugging 활성화

2. 기기에서 크롬 켜기

3. PC 크롬에서 주소창에 chrome://inspect/#devices 입력후 접속

4. Devices 탭에서 'Discover USB devices' 체크

5. 디버깅할 도메인을 'Open tab with url'에 입력 후 'Open' 클릭

여기까지는 기본 적인 내용이고, 로컬에서 개발중인 사이트를 디버깅 하기 위해서는 몇 가지 작업이 더 필요하다.

1. 포트 포워딩

  'Port forwarding...' 버튼을 누르면 아래와 같은 창이 나타난다.

  abc.com:1234 로 접속했을 때 abc.com:5678 로 연결을 원한다면, Port: 1234, IP address and port: abc.com:5678 를 입력하고

  창 하단의 'Enable port forwading' 에 체크한 후 'Done'을 누르면 된다.

2. hosts 수정

  사이트 특성상 localhost 대신 다른 도메인으로 개발중이라면 기기에서도 마찬가지로 hosts 수정이 필요하다.

  hosts 수정은 hosts go와 같은 서비스의 도움을 받자.

크롬 개발자 도구로 디버깅을 하던 도중, 작성한 파일명이 아닌 VM으로 시작하는 파일이 열리며 하이라이팅이 잘못 표시되는 현상이 발생했다.

VM으로 시작하는 파일은 블랙박스로 간주되는 것으로 eval, iframe 등을 사용하면 나타난다고 하는데, 내 코드에는 그런 부분이 없었다.

같은 이름의 파일이 여러번 로드되면 그런 경우가 발생할 수도 있다고 하는데, 코드에서 여러번 같은 파일을 로드하지도 않았다.

중단점과 관련한 이슈가 많았는데 그런 경우에는 debugger라는 키워드를 코드에 삽입하여 코드를 중단시키면 된다는 것이었는데

나의 경우에는 중단점이 걸리긴 하나 중단점과 무관한 위치에서 코드가 멈추어 있었다.

개발자도구를 껐다가 다시 켜고, 캐시도 제거해보았으나 현상은 계속 발생하였다.

그러던 중 URL에 붙어있던 해시를 제거하고 페이지에 접속하면 정상적인 동작을 하는 것을 발견했다.

이 해시는 페이지 로드 이후에 동적으로 삽입된 것인데 그게 개발자 도구에 어떤 영향을 준 것 같다.

요약:

URL에 해시가 붙은 채로 접속하면 현상이 발생하고, 해시를 제거하고 접속하면 정상 동작하였다.

추가:

html 페이지에 script 태그 내에서 스크립트 코드를 작성한 경우 현상이 발생한다.

html 페이지와 script를 분리해서 관리하고 html 페이지에서는 script를 로드만 하도록 하자.