비망록 대신.

했던 일

Google Chrome의 Developertool에서 네트워크 로그 모니터링

로그 내보내기

Ruby로 hash로 퍼스하고 이해하기 쉽도록. (선택하고 싶은 항목 만 grep)

Google Chrome의 Developer tool에서 볼 수 있는 네트워크 로그는?

스크린샷은 이런 느낌.Command + Option + I 이런 바로 가기로 엽니다.

[Console]이나, [Elements]의 곳은 사용한 적이 있지만, 그 외는 없다, 라고 하는 분도 안외하는 것은.

[네트워크] 화면은 이런 느낌입니다.


단순히 Qiita의 페이지를 읽고있는 것만으로 이렇게 통신이 달리고 있습니다.
각각의 리퀘스트, 리스폰스등은 물론, 통신에 걸린 시간도 좋은 느낌에 비주얼라이즈 되어 좋네요.

로딩이 늦을 때, 무엇이 병목이 되어 있는지 일목요연, 이라는 느낌입니다.

DevTool에서 볼 수 있는 로그 문제

Grep 힘이 약하다
자사 서비스라면, 웹 서버나 어플리케이션 서버의 로그를 직접 보면 됩니다만,
타사의 사이트를 「어떻게 하고 있을까」라는 호기심으로 로그를 보고 싶은 경우는 조금 보기 어렵습니다.

나 자신의 문제점

로그 분석이나 도구에 익숙하지는 않습니다.
슬프다. 도 아마추어입니다.
그렇게 풍부한 도구를 사용할 수 없습니다 ...

도와주세요! Ruby! (이것부터 본제)

거대한 분석을 하고 싶은 것도 아니기 때문에, 사랑의 Ruby에 의지하기로 했습니다.

다음의 순서로 진행해 갑니다.

로그 내보내기

로그 파일로드

JSON으로 퍼스

hash에 퍼스

Grep

바로 시작합시다.

1. 로그 내보내기

Network 로그 화면에서 마우스 오른쪽 버튼을 클릭합니다. ➝ [Save as HAR with content]를 클릭합니다.
이제 다운로드됩니다.

2. 로그 파일 로드

htps : // 기주 b. 코 m/쟈리 b/는 r
여기 gem을 사용했습니다.

$ gem install har
$ pry
2.4.2 (main)> log=HAR::Archive.from_file('/path/to/har/file')
=> #<HAR::Archive:0x3a7781d00dea492a>

3. JSON으로 퍼스

2.4.2 (main)> log_json=log.to_json
=> jsonがわらわらでてくる

4. hash로 퍼스

2.4.2 (main)> log_hash=JSON.parse log_json

5. Grep

예를 들어,

2.4.2 (main)>  grepped_log=log_hash['key1'].select { |ele| ele.include?('keyword') }

끝에

이것으로 여러가지 로그를 볼 수 있을 것 같다~!