모바일 디바이스에서 PC 브라우저처럼 css를 확인하고 조작할 수 있는 방법 > 유용한정보

본문 바로가기

팝업레이어 알림

팝업레이어 알림이 없습니다.
사이트 내 전체검색


회원로그인

카카오톡친구추가 제임스 SNS마케팅 사용자모임 네이버밴드초대

접속IP:18.208.187.169



유용한정보

모바일 디바이스에서 PC 브라우저처럼 css를 확인하고 조작할 수 있는 방법

페이지 정보

작성자 운영자 작성일15-02-13 21:44 조회511회 댓글1건

본문

안녕하세요~ 

모바일 디바이스에서 PC 브라우저처럼 css를 확인하고 조작할 수 있는 방법이 있는지 분께서 물어보셔서 알려드렸는데

너무나 좋아하셔서 혹~~시나 모르시는 분이 계실것 같아 공유해 드릴려구요~

웹 브라우저의 경우 각 브라우저 별 개발자 도구가 잘 갖춰져 있어 서버로부터 넘어온

자바스크립트 및 css, html파일 등을 확인해 바로바로 수정/조작 해 볼 수 있지만

스마트폰에서 css도 조작하거나 깨진 마크업이 왜 그런지 확인해보고 싶지만 엄한 폰에다 대고 우클릭하고 요소검사를 해볼 수 없으니

정말 막막하죠.. 그래도 해결책은 있는 법! 

웹이든 모바일이든 네트워크를 통하는 모든 세션들을 검사해볼 수 있는 Fiddler아시나요? 

Fiddler가 가진 기능은 정말 엄청나네요 (심지어 https 통신도 잡아낼 수 있습니다!!!)

*Fiddler는 윈도우에서만 사용가능합니다. 
*맥이나 기타 OS에서는 프록시(윈도우를 통해 우회)를 통해서 가능하긴 합니다. (아래 프록시 연결에 설명드리겠습니다.)

어찌됬건 이제 모바일 디바이스로 전송되는 세션(html, css, javascript 파일들을 포함한 네트워크를 통하는 모든 데이터)을 Fiddler를 통해 잡아보겠습니다! 


1. fiddler 다운로드 http://fiddler2.com/

위 링크 누르면 바로 다운로드 될거에요.


2435414C529460AC326AAB

 

 


2. 다운로드한 파일 설치합시다.! 그냥 next 연타 하시면 되겠습니다.

3.  Fiddler 실행! 실행하면 아래와 같은 창이 뜹니다. 

265A984C529460AC1F90A3

 

 

여기서 왼쪽 부분이 세션 목록으로 네트워크로 전송하거나 받은 모든 세션이고, 
오른쪽은 기능 탭으로 특정 세션을 선택하면 그 세션에 대한 상세 내역이 나옵니다.

피들러를 실행한 뒤 인터넷 창을 켜보면 순식간에 어마어마한 세션들이 전송됨을 확인할 수 있습니다.
(트래픽을 멈추고 싶을 때 F12 또는 File> Capture traffic으로 멈출 수 있습니다.)

4. 모바일 디바이스를 위한 프록시 설정

*프록시: 여기서 말하는 프록시는 간단히 말해 검문소로 생각하시면 됩니다. (비유가 적절하지 않을 순 있지만 이해를 위해;;) 
스페이스 닷원 건물에 나가거나 들어오려면 입구(검문소)를 지나야 하듯 
네트워크를 통하는 모든 녀석이 Fiddler를 통해 나가고 들어온다고 생각 할 수 있습니다


Fiddler Menu창에서 Tools > Fiddler Options 선택

261F104C529460AD02BAE8

 


세번째 Connections 탭 선택 후 'Allow remote computers to connect' 체크 활성화시켜주시고, 
fiddler listens on port: 부분에 8888 (기본)으로 해주시면 됩니다.

2633B84C529460AD35F438

 


여기까지 윈도우에서 설정하는 것이 끝입니다. 

Fiddler를 한번 껏다가 다시 켜 줍니다.(중요)

그 다음은 모바일이나 맥(아이폰 또는 안드로이드)에서 설정해주는 일만 남았습니다.


모바일 디바이스 프록시 설정

iPhone/iPad

1. 설정
2. 네트워크
3. wifi
4. 연결된 네트워크에서 우측 화살표 선택
5. 밑으로 내리면 "http 프록시" 부분이 있는데 기본 '끔' 에서 "수동"으로 변경
6. 서버 부분에 Fiddler를 설치한 PC ip 입력
7. 포트 부분에 8888 입력

안드로이드

1.환경설정
2.Wi-Fi
3.연결된 무선네트워크를 길게 누르고 있으면 뭔가 뜨는데 '네트워크 설정 변경'을 선택
4.최하단 고급옵션표시 체크
5.'프록시 설정'을 '수동' 으로 변경

6. '프록시 호스트 이름'에 Fiddler를 설치한 PC의 IP 입력,
7. '프록시 포트'에 8888 입력
8. 나머지는 건들것 없지만 사내 네트웍이므로 계정/비밀번호를 입력해줘야 합니다.


1. 시스템 환경설정
2. 네트워크
3. (연결된 네트워크에서) 고급
4. '프록시탭' 선택
5. 웹프록시(HTTP) 체크
6. 프록시 서버의 주소와 포트번호를 입력
7. 아이디와 계정을 입력


이렇게 설정을 하고 모바일에서 Daum앱으로 접속 하면 Fiddler에 m.daum.net에서 온 세션들이 막 보입니다!!


2617CD4C529460AE06D900

 

 


어때요. 참 쉽죠?

먼저 m.daum.net에서 넘겨 받은 html을 선택하고 오른쪽 기능 탭에서 'Inspectors'를 선택하면 

221DEA49529460AF24D24A

 

우측 윗부분이 제가 요청한 내용이고 아래 부분이 다음 서버가 응답한 내용입니다.


21132449529460B02A8ACA


보라색이 css 녹색이 javascript 파랑색이 html이고 회색이 image입니다. 
 

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오스토리로 보내기

댓글목록

유용한정보 목록

게시물 검색


홈쇼핑 인기상품을 국내 최저가로 구매하실 분들만 들어 오세요.^0^

*패쇄몰*이라 국내 최저가가 가능합니다.

새로운 상품을 매일 공동구매로 진행.

*패쇄몰*이라 싸게 판매가 되어 금방 매진이 됩니다.(꼭 참고 하세요)

오셔서 득템 하세요. ^0^

후회하지 않습니다.^0^

교환,반품,A/S도 철저히 이루어 집니다.

아래 주소로 들어오시면 됩니다.^0^

▶밴드 바로가기 클릭◀
https://bit.ly/2q69oFl

접속자집계

오늘
5
어제
332
최대
5,398
전체
2,021,467
Copyright © http://jamesoft.kr All rights reserved.
상단으로
모바일 버전으로 보기