본문 바로가기
반응형

개발자의 삶/개발자도구2

chrome inspect 안드로이드 웹 개발자도구 사용, 웹 디버깅 하기 준비물크롬 브라우저usb 케이블당연히 스마트폰 방법1. 스마트폰 개발자모드 설정 1.1. 설정 > "휴대전화 정보"에 들어간다. 1.2. 설정 > 휴대전화 정보 > "소프트웨어 정보"에 들어간다. 1.3. "빌드버전"을 개발자 모드단계까지 가도록 터치 for문을 돌린다. 4 > 3 > 2 > 1 > 개발자모드로 지금 만나러 갑니다...? ... . . .1.4. 설정 > "개발자 옵션"에 들어가서 { "사용 중", "USB 디버깅" } 선택 2. 스마트폰을 pc와 연결한다. 3. PC에서 디바이스 "신뢰" 4. 폰에서 디바이스 디버깅 "허용" 5. 브라우저 url 입력창에 chrome://inspect 를 입력한다.chrome://inspect 6. 폰에 크롬 브라우저 앱을 실행한다. 그러면 아래와 같이.. 2023. 1. 28.
크롬 개발자도구 팁 - 돔 이벤트 보기 들어가기 전에...사이트 분석을 하면서 돔에 걸려 있는 이벤트를 쉽게 찾기 위한 방법이 뭐가 있을까? 예전에는 웹사이트 하면 php, jsp, ...를 많이 생각했었는데, 요즘에는 react, vue, angular, ... 등등 여러 언어로 개발을 하고 있다. jsp, jquery로 되어 있는 웹에서 이벤트 찾을 때는$._data(element, 'events');위와 같이 찾았는데, 요즘에는 확장프로그램도 충분히 좋아진 건지 이제 본 건지... 개발자 도구를 좀 눌러보니 아니 이벤트 리스너(event listeners)가 있네?? 사용해보자예를 들어, 11번가에서 상품상세 화면에 "쿠폰보기"가 있다. 한번 개발자도구로 까보자.2개의 이벤트가 걸려 있는 걸 확인할 수 있다. 아! 여기서 디폴트로 상위가.. 2023. 1. 1.
반응형