브라우저 개발자 도구의 25 가지 비법 (2011)
Source
Evernote/Technote scraps/25 Secrets of the Browser Developer Tools – AndiSmith.com.md
Summary
이 문서는 2011 년 기준 웹 브라우저 개발자 도구 (Chrome, Firefox/Firebug, IE, Opera, Safari) 의 숨겨진 기능과 팁을 소개합니다. 특히 콘솔 탭의 활용법에 초점을 맞추고 있으며, 현재 선택된 요소 참조 ($0), 다중 인자 console.log, 명령어 히스토리 재사용, 로그 유지 (Persist), 객체 소스 보기 (toSource), iframe 컨텍스트 변경 등 구체적인 사용법을 설명합니다.
Key Points
- 브라우저별 개발자 도구 비교: Chrome(통합), Firefox(Firebug 플러그인), IE(통합), Opera(Dragonfly), Safari(통합, 기본 비활성화) 의 현황을 2011 년 시점으로 정리.
- 현재 선택 요소 참조: Elements 탭에서 선택된 요소를 콘솔에서 1, $2 로 이전 선택 요소도 참조 가능.
- console.log 다중 인자: 문자열과 객체를 연결하지 않고 쉼표로 구분하여 여러 인자를 동시에 출력 가능 (예: console.log(‘msg:’, obj)).
- 콘솔 명령어 재사용: 위쪽 화살표 키를 눌러 이전에 입력한 JavaScript 명령어 히스토리를 호출하여 재실행 가능.
- 로그 유지 (Persist): 페이지 이동 시 콘솔 로그가 초기화되지 않도록 설정 가능. Chrome 은 우클릭 메뉴에서 ‘Preserve Log upon Navigation’ 선택.
- 객체 소스 출력: Firefox(Firebug) 는 toSource() 메서드를 통해 객체 내용을 문자열로 출력 가능.
- iframe 컨텍스트 변경: Firefox 에서 특정 iframe 의 JavaScript 컨텍스트로 초점을 이동시켜 명령 실행 가능.