Post

(Chrome) 개발자 도구 ( Developer Tools ) / 포터블

  • Elements
  • 페이지 내의 문서 객체와 관련된 속성 을 실시간으로 확인할 수 있다.
  • Console
  • 콘솔 로그 를 확인할 수 있다.Esc를 누르면 팝업으로 창이 뜬다. console.log
  • Sources
  • 브라우저가 HTML을 해석하기 이전의 웹서버로부터 전송된 원본 source를 확인할 수 있다.
  • 예를 들면 Elements 탭에서는 <로 보이는게 Sources 탭에서는 &lt;로 보인다.
  • 페이지에서 불러오는 .js파일이나 이미지 파일 등 리소스 파일 을 살펴볼 수 있으며js파일의 경우 디버깅 할 수 있다.
  • Network
  • Ajax를 포함한 모든 HTTP 요청의 내용과 리소스를 불러오는 시간이 얼마나 걸리는지 확인 할 수 있다.
  • 리소스를 클릭하면 request / response cookie 와 HTTP request / response Header 를 확인할 수 있다.
  • Profiles
  • 자바스크립트 function이 얼마만큼의 시간을 소모하는지 보여준다는 관점에서는 Timeline과 비슷한데, 녹화기능이 있다.
  • 녹화 버튼을 누르고 작업을 수행한 다음 정지하면 그 수행한 작업을 처리하기 위해 내부적으로 어떻게 동작하는지를 보여준다.
  • Audits
  • 페이지를 최적화 하기 위한 정보를 제공한다.
  • Application
  • cookie를 확인/추가/수정할 수 있다. cookie 이외에도 Local Storage 등등을 수정할 수 있음.
  • 모바일 리모트 디버깅
디버깅 팁
  • console에서 $0 입력하면 현재 선택한 DOM을 콘솔에서 바로 불러올 수 있다!
  • 리액트 컴포넌트의 경우, $r
  • 어떤 js 변수 값을 확인하고 싶다면? break point를 활용!
  • react 컴포넌트여도, 그게 js로 변환된 파일을 안내해주니까 그리로 이동한 다음 {} 눌러서 beautify 하고 bp 걸면 된다.
특정 페이지 접근 시 수신하게 되는 파일 중 차단하고 싶은게 있는 경우.

어떤 페이지에 접근하면 자동으로 alert가 뜬다거나, 할 때 alert를 띄워주는 파일(.js든, .do파일 같은 별도의 트리거 파일이든.)을 차단하고 싶은 경우. 그 파일만 수신하지 않으면 된다.

네트워크 탭에서 오른쪽 버튼 클릭한 다음Block request URL


포터블로 사용하기

크롬 폴더를 통째로 복사, 이를 크롬이 설치되지 않은 os로 옮기고, chrome.exe를 빌드숫자 폴더 안에 넣은다음 실행.

크롬이 설치되어 있는 경우 바로가기만 만들어서 아래만 진행해도 된다.

북마크, 확장프로그램 등 user data 복사
1
2
3
%userprofile%\AppData\Local\Google\Chrome\User Data

이를 백업해두고, chrome.exe의 바로가기를 만든 다음

1
2
3
4
--user-data-dir="path"    // path에 백업 폴더의 경로를 적어두면 확장프로그램 사용 가능
--incognito    // 시크릿 모드로 실행 가능

관리자 권한으로 실행해야 하는 경우가 있다.

프록시 설정

원래 프록시는 OS의 네트워크 설정에서 한꺼번에 설정되지만, 시크릿 모드 지정하듯 바로가기의 대상 탭에 Command-line option을 주면 따로 설정 가능하다.

1
2
3
--proxy-server="socks5://address:port"

socks5:// 꼭 적어줘야 한다. 상세 내용은 아래 링크를 참조.

https://www.chromium.org/developers/design-documents/network-settings

Cross Domain 문제 해결하기

1
2
3
4
5
--disable-web-security --user-data-dir ( with/without value )
OR
--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

extension offline install

http://chrome-extension-downloader.com/

위 사이트에서 extension 주소를 입력하면 .CRX 파일로 extension을 다운로드 받을 수 있다.

또는 현재 로컬에 설치되어 있는 상태라면 User Data\Default\Extensions 폴더를 압축해도 된다.

standalone 다운로드 받기

?standalone=1 붙이고 다운로드

This post is licensed under CC BY 4.0 by the author.