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

• Elements
• 페이지 내의 문서 객체와 관련된 속성 을 실시간으로 확인할 수 있다.
• Console
• 콘솔 로그 를 확인할 수 있다. Esc를 누르면 팝업으로 창이 뜬다. console.log
• Sources
• 브라우저가 HTML을 해석하기 이전의 웹서버로부터 전송된 원본 source를 확인할 수 있다.
• 예를 들면 Elements 탭에서는 <로 보이는게 Sources 탭에서는 <로 보인다.
• 페이지에서 불러오는 .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 복사

%userprofile%\AppData\Local\Google\Chrome\User Data

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

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

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

프록시 설정

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

--proxy-server="socks5://address:port"

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

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

Cross Domain 문제 해결하기

--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 붙이고 다운로드