본 포스트는 크롬 브라우저의 개발자 도구를 사용하여 네트워크 기록을 분석할 수 있는 HAR 파일 사용법에 대한 설명입니다.
개발을 하다가 특정 환경이나 사용자에게 오류가 발생하는 경우, 특히나 Back-end가 아닌 Front-end에서 오류가 발생하는 경우 분석을 위해 해당 시점의 네트워크 요청과 결과를 알고 싶을 때가 있습니다.
물론 서버에 전체 Request와 Response에 대한 로그를 남긴다면 서버에서 로그를 조회할 수도 있겠지만 너무 대용량이라 전체 로그는 남기기가 쉽지 않습니다. 만약 이럴 경우에 개발자나 테스터에게 동일한 오류가 발생했을 경우 HAR 파일로 저장한 후 네트워크 데이터 분석에 사용할 수 있습니다.
(B2E 같은 내부 사용자를 위한 시스템이면 사용자에게도 로그를 부탁할 수 있겠지만, 대고객 시스템은 이런 경우는 어림 없습니다.)
네트워크 기록을 HAR 파일로 저장하기 위해서는 아래와 같이 진행합니다.
1. [F12]를 눌러 개발자 도구를 열고 [Network] 탭으로 이동합니다.
2. 도구 중 아래 버튼을 선택합니다.
또는 바로가기 메뉴에서 [Save all as HAR with content] 를 선택해도 됩니다.
3. 원하는 위치와 파일명을 지정하여 저장합니다.
저장한 파일을 에디터에서 열어보면 네트워크 기록이 JSON 형태로 저장되어 있습니다. 해당 내용을 보고 파악하기는 힘들고, 전달받은 HAR 파일을 Google Chrome의 [Network] 탭으로 드래그합니다.
본 포스트는 크롬의 개발자 도구를 사용하여 useragent 값을 변경해 가면서 테스트 할 수 있는 방법에 대한 설명입니다.
대고객 서비스를 운영하다 보면 타 업체의 앱과 제휴하여 서비스를 제공하는 경우가 종종 있습니다.
이럴 경우 제휴하는 업체에 따라 서비스를 분기해야 할 경우가 종종 생기는데, 이럴 경우 보통 각 업체의 WebView에서 제공하는 User-Agent 값에 따라 분기 처리합니다.
물론 최종 확인은 각 업체에서 테스트 앱을 받아 진행하지만, 기본적인 디자인이나 동작 확인은 각 업체에서 테스트 앱을 받아가면서 확인하기에는 시간이 부족한 경우가 많이 있습니다. 이때 Chrome 개발자 도구에서 제공하는 [Network conditions] 탭을 사용하여 간단하게 미리 확인해 볼 수 있습니다.
사용법은 아래와 같습니다.
먼저 Console 왼쪽에 있는 메뉴 버튼을 누른 후 [Network Conditions] 를 선택하여 탭을 활성화 합니다.
처음 활성화하면 아래와 같이 화면 중간 정도에 있는 User agent 부분이 [Use Browser default] 체크가 활성화되어 있습니다. 체크가 되어 있으면 별도로 User-agent를 조작하지 않고 현재 브라우저의 User-agent를 사용한다는 의미입니다. 우리는 User-agent를 변경할 것이니 체크를 해제하겠습니다.
체크를 해제하면 아래와 같이 Custom User-agent를 입력할 수 있도록 입력상자가 활성화 됩니다.
이때 아래와 같이 확인하고자 하는 WebView에서 제공하기로 약속한 User-agent 문자열을 입력 후 확인할 수 있습니다.
JavaScript 에는 Same-origin Policy 라는 규칙이 있다. 한국어로 하자면 동일 출처 정책인데, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호작용하지 못하도록 규정하는 내용이다. JavaScript 에서 AJAX 로 개발한 후 Google Chrome 에서 테스트를 해보면 인터페이스가 정상적으로 되지 않는 것을 자주 볼 수 있는데, 그때는 개발자 도구를 켜서 메시지를 확인해야 한다.
특정 도메인에 있는 페이지에서 다른 도메인의 자원을 AJAX로 호출하는 경우 해당 도메인에서는 접근을 거부하게 된다. 이럴 경우에는 서버에서 다른 도메인에서의 접근을 막는 것이므로 Chrome의 보안 옵션과는 무관하며 서버에 CORS(Cross Origin Resource Sharing) 설정을 적용해야 타 도메인에서 현재 도메인의 자원을 Access 하는 부분을 허용할 수 있다.
하지만 서버에서 CORS 옵션을 적용하여 설정하였거나, Local의 HTML 페이지(Null 도메인)에서 서버의 자원에 접근하였는데 접근이 되지 않는 경우 Chrome의 보안 옵션을 확인해보면 된다.
1. Windows PC
- Chrome의 바로가기 옵션에 아래 옵션 적용
---disable-web-security
2. MAC
- Chrome 실행 시 아래처럼 옵션 적용
- open "/Applications/Google Chrome.app" --disable-web-security
PC Web을 개발하던, Mobile Web을 개발하던 반드시 Network로 서버와 인터페이스 하여 데이터를 주고 받는 업무가 발생한다. 이때 편리한 Debugging을 할 수 있는 Chrome 개발자 도구의 [Network] 탭을 살펴보도록 하자.
Chrome 개발자 도구는 이전 포스트에서 언급한 바와 같이 [F12] Key나 마우스 바로가기 메뉴의 [요소검사]를 선택하면 불러올 수 있다. 그럼 [Network] 탭의 구성을 살펴보자.
위 화면은 Naver에서 뉴스 한 건을 조회했을 때의 [Network] 탭을 Capture한 모습이다. 해당 페이지를 Loading 하면서 발생한 Network 요소들을 모두 Recording 하여 보여준다. 개발자 도구의 [Network] 탭에 접근한 경우가 아니라면 Chrome은 Network 요소를 Recording 하지 않는다. 반드시 개발자 도구의 [Network] 탭을 열고 있는 상태에서만 Recording 하게 된다. 따라서 해당 탭을 열더라도 페이지를 한 번 더 새로고침해야만 Recording 된 내용을 볼 수 있다.
도구상자의 가장 앞에 위치하는
버튼은 Recording을 할지 말지 선택하는 버튼이다. 해당 버튼이 빨간색이라면 Recording 상태이며, 회색이라면 현재를 Recording 하고 있지 않은 상태이다.
그 옆에 있는
버튼은 누가 봐도, 현재 Recording 된 내용을 삭제하는 버튼이다. 해당 버튼을 클릭하면 현재 창에 있는 내용들이 모두 지워진다.
그 다음
버튼은 각종 Filter 버튼들을 보여줄지 말지 선택하는 버튼이다. [Network] 탭에서는 각종 Filter들을 제공하여 편리하게 원하는 부분만 볼 수 있도록 해주지만... 결국 자주 보게 되는 부분은 XHR 밖에 없는 것 같다. 여튼 Filter 버튼을 Enable 한 모습은 아래와 같다.
기본적으로 All 이 선택되어 있고, 보고 싶은 Content Type을 선택할 수 있게 되어 있으며, 맨 앞 텍스트 박스에 값을 입력하여서도 Filtering 할 수 있다. 예를 들어 HTTP Method 가 POST 인 인터페이스만 Filtering 해보고 싶다면 method:POST 라고 입력하면 Filtering 된다. Filter 텍스트 박스에 입력할 수 있는 Keyword 들은 아래를 참고한다.
-. domain
-. has-response-header
-. is
-. larger-than
-. method
-. mime-type
-. scheme
-. set-cookie-name
-. set-cookie-value
-. set-cookie-domain
-. status-code
대강 의미가 명확한 용어들이라 구체적인 설명은 생략하며 위의 예제와 같이 keyword:value 형식으로 Filtering 할 수 있다.
Filtering 버튼 중 자주 사용하게 되는 XHR 버튼을 한 번 클릭해보면 Filtering 되어 아래와 같은 데이터가 표시된다.
XHR 인터페이스만 Filtering 한 것이며, 해당 인터페이스의 Method나 HTTP Response code, Content-Type, 또 Capture에는 잘렸지만 Elapse time 등도 표시되어 Debugging에 편리하게 사용할 수 있다. 그럼 위 3개의 데이터 중 list.json 을 한 번 클릭해보면 아래 탭의 내용이 변경된다.
5개 탭이 있으며, 위 그림은 Headers 탭의 내용이다. Headers 탭에서는 URL, Method, Status Code 등의 정보와 Response, Request Header 및 서버로 송신한 내용을 볼 수 있다. Client 화면 개발 시 서버와 데이터가 잘 맞지 않는다면 서버로 보낸 최종 데이터를 확인할 수 있는 부분이기에 개발 시 상당히 많이 활용하게 되는 내용이다.
그 옆에 있는 Preview 탭은 서버에서 수신한 데이터를 예쁘게 Parsing 하여 보여주고, 그 옆의 Response 탭은 Parsing 하지 않고 날 것으로 보여준다. 두 탭 모두 각자 쓸모가 있으며 예제는 아래와 같다.
[Preview] 탭
[Response] 탭
당연히 보기에는 Parsing 한 형태인 Preview 탭이 보기 좋지만, 쭉 긁어서 데이터를 재활용한다거나 넘어온 날 것 그대로의 데이터를 봐야할 때 (뭐 간단한 예로 서버 오류로 올바른 XML, JSON 데이터가 넘어오지 않았을 경우) 유용하게 사용할 수 있다.
[Cookie] 탭에서는 페이지에서 사용한 Request / Response Cookie 정보를 조회할 수 있으며 Timing 은 현재 Application의 Performance 를 점검해 볼 수 있다. Timing 에 대한 내용은 이야기가 제법 길어질 수 있으므로 별도로 포스팅할 생각이다.
이야기가 어쩌다가... 이렇게 두서 없이 빠졌지만 다시 [Network] 탭의 도구상자를 살펴보면 아직 두 개의 버튼이 남았다.
옆의 두 개의 버튼이 남았지만, 해당 버튼들도 결국은 Timing 과 관련된 내용이므로 나중에 다루기로 한다.
[Network] 탭 데이터를 표시하는 Header 정보는 기본적으로 아래와 같이 구성되며, Header를 클릭하면 Header 기준으로 정방향/역방향 Sort하여 데이터를 볼 수 있다.
기본적으로는 위와 같은 데이터만 표시되지만, Header 부분을 마우스 우클릭하게 되면 표시하고 싶은 데이터를 선택할 수 있으며, 데이터 종류는 아래 그림과 같다.
개발을 하다보면 Google Chrome 에 멋진 기능들이 많이 있습니다. 오늘은 그 중에 Device Mode & Mobile Emulation 이라는 기능을 잠시 살펴보겠습니다.
Chrome의 개발자 도구는 [F12] Key로 표시할 수 있습니다. 마우스 우클릭 후 나오는 바로가기 메뉴에서 [요소검사]를 선택하셔도 동일한 개발자 도구가 표시됩니다. 개발자 도구의 도구상자 가장 좌측을 보면 휴대폰처럼 생긴 아이콘이 하나 있습니다.
Toggle device mode 라는 이름을 가진 아이콘인데요, 클릭하면 Device mode를 활성화할 수 있습니다. Device mode를 활성화하게 되면 화면이 좀 다르게 보입니다. Device / 해상도 등을 선택할 수 있게 되고 좌측과 위쪽에 Ruler도 표시되어 편리하게 볼 수 있습니다. Device mode를 활성화하는 단축키는 Windows PC의 경우 [Ctrl]+[Shift]+[M] 이고, MAC은 [Command]+[Shift]+[M]으로 활성화 할 수 있습니다. 단축키를 누르기 전에 개발자 도구는 열어놓은 채로 단축키를 눌러야 합니다.
Device Mode에 입력해 볼 수 있는 내용은 아래 그림과 같습니다.
먼저 아래 Selectbox를 눌러 Device를 선택할 수 있습니다.
Selectbox를 눌러보면 현재 유통되는 Device들을 선택할 수 있고, 선택하면 해상도가 선택한 단말기의 해상도로 변경되고 화면도 그에 맞춰 변경됩니다. 보통 화면을 Publishing 할 때 단말기마다, 해상도마다 해보기가 쉽지 않지만 Chrome의 이 기능을 사용하면 생각보다 편리하게 해상도 별로 개발한 화면이 어떻게 적용될지 테스트해 볼 수 있습니다.
(물론 실제로 Device에 올려보면 또 다른 점이 발생합니다. Mobile Browser인지, WebView 인지에 따라서도 달라지는 부분들이 있으니 반드시 최종적으로는 Device에 올려보시는 편이 좋습니다.)
요 놈은 Emulate screen resolution 이라는 체크박스이며 Device를 선택하거나 직접 입력한 해상도로 Emulate 할건지 말건지를 선택할 수 있습니다.
이 부분은 해상도를 입력하는 부분입니다. 물론 Device를 선택하면 해당 Device가 가진 해상도가 자동으로 입력되지만, 특정 해상도에서 테스트를 하고 싶다면 직접 입력할 수도 있습니다.
Portrait / Landscape를 변경할 수 있는 아이콘입니다.
Device pixel ratio를 입력할 수 있습니다. Device를 선택하면 기본적으로 자동으로 입력됩니다. 요즘 생산되는 Device의 QHD, Retina Display 등 고해상도 Display의 Device를 테스트하고자 할 경우 값을 변경해서 해볼 수 있습니다.
Broswer에 꽉차게 보여줄지, Pixel에 맞게 보여줄 지 선택하는 옵션입니다. 체크를 해제하면 시원시원하게 Browser에 꽉차게 볼 수 있습니다.
다음으로 Network Condition을 선택할 수 있습니다. 페이지에서 무거운 이미지 등을 많이 사용하지만 주 사용 대상이 느린 사내 Wi-Fi 사용자라고 할 때 미리 Network 상황을 고려하여 테스트 해 볼 수 있습니다. 허나.... 요즘은 모조리 빠른 LTE를 사용하므로 실제로는 늘 No throttling에 놓고 테스트 합니다;;.
마지막으로 User-Agent 값을 입력해 볼 수 있습니다. 페이지에서 혹은 Hybrid Application 이라면 User-Agent에 따라 분기하는 경우가 간혹 있습니다. WebView를 만들어서 개발할 경우 강제로 User-Agent에 값을 넣어서 보내기도 하고, Android/iOS를 구분할 때 사용하기도 합니다. 그럴 경우 편리하게 테스트해 볼 수 있습니다.
여기까지 Device mode에서 사용하는 도구상자의 내용을 알아보았습니다. 사실 큰 내용은 없지만 알아 두시면 생각보다 편리하게 테스트 할 수 있는 유용한 기능입니다. 이 도구상자 외에 개발자 도구의 Console 쪽으로 시선을 이동해보면, [Emulation] 이라는 탭이 있습니다. 해당 탭에는 도구상자에 입력하는 내용 외에도 다른 부분들이 있습니다만 간단하게 Sensors 메뉴만 보도록 하겠습니다.
Sensors 메뉴에는 크게 세 가지가 있습니다.
-. Emulate touch screen
: Touch screen 기능을 활성화 합니다. 마우스 커서가 동글동글하게 변하고 손가락 대신 마우스로 터치 스크린을 사용한다고 보시면 됩니다. [Shift] 키를 누른 채로 사용하시면 pinch zoom 기능도 테스트 해 볼 수 있습니다.
-. Emulate geolocation coordinates
: 테스트하려는 페이지에서 HTML5 의 geolocation API를 사용한다면 Latitude와 Longitude를 입력해서 테스트 해 볼 수 있습니다.
-. Accelerometer
: geolocation과 마찬가지로 HTML5의 orientation API를 사용한다면 값을 입력하여 테스트 해 볼 수 있습니다.
위 내용은 Google Developer 사이트를 방문하시면 더욱 더 자세하게 나와 있습니다. 단, 당연히 영어로 나와 있습니다만, 그림이 많아 쉽게 볼 수 있습니다.
