Chrome 개발자도구 (Command Line API & Console API )
Console API 참조 : https://developers.google.com/web/tools/chrome-devtools/console/console-reference?hl=ko
크롬 브라우저의 console 사용법 : https://thinkingcookie.wordpress.com/2012/08/31/%ED%81%AC%EB%A1%AC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-console-%EC%82%AC%EC%9A%A9%EB%B2%95/
MDN Console : https://developer.mozilla.org/en-US/docs/Web/API/Console
Daylogs/Javascript 크롬 개발자 도구 활용 팁(Tips for chrome developer tools) : http://ohgyun.com/334
# Command Line API 및 Console API
1. Command Line API 및 Console API 란?
2. 개발자도구 실행방법
3. Command Line API
4. Console API
5. 예제
# 크롬 브라우저에서 제공하는 개발자 디버깅 도구중
- Command Line API : $_ , $0~$4, $(selector) , $$(selector) , $x(path) …..
- Console API : console.info(), console.assert(),
# 개발자도구 실행방법
- F12 Or Ctrl+Shif+I
- Ctrl + Shift + C
- 파일메뉴- 도구 더보기- 개발자 도구
- Chrome Developer Tools Command Palette : CTRL + SHIFT + P
# 단축키
- 개발자 도구 내 탭 전환 : Ctrl + [ or ]
- 개발자 도구에서 콘솔 열고 닫기 : esc
# Dom탐색
- Ctrl + Shift + C
- 개발자도구 좌측최상단 마우스 포인터 클릭(Select an element in the page to inspect it ).
# Command Line API
1. $_ : 가장 최근에 평가된 식의 값을 반환합니다.
ex)
> 2+2
< 4
> $_
< 4
ex)
> ["john", "paul", "george", "ringo"]
> $_.length
< 4
2. $0~$4 : Elements 패널에서 검사한 마지막 다섯 DOM 요소
또는 Profiles 패널에서 선택한 마지막 다섯 자바스크립트 힙 객체에 대한 기록 참조로 작동합니다.
$0이 가장 최근에 선택한 Element
ex)
- Elements탭에서 body선택.
> $0
> ...
3. $(selector) : document.querySelector() : return element
$를 사용하는 jQuery와 같은 라이브러리를 사용하는 경우 이 기능을 덮어씁니다.
ex)
> $("img").src
4. $$(selector) : document.querySelectorAll() : return elements []
ex)
var images = $$('img');
for (each in images) {
console.log(images[each].src);
}
5. $x(path) : XPath 식과 일치하는 DOM 요소의 배열을 반환.
※ 참고 : https://www.w3schools.com/xml/xpath_intro.asp
ex)
$x("//p");
$x("//p[a]");
6. clear() : 콘솔의 기록 지웁니다.
7. copy(object) : 지정된 객체의 문자열 표현을 클립보드에 복사합니다.
ex)
copy($0);
8. debug(function) : 지정된 함수가 호출되면 디버거가 호출되고 Sources 패널의 함수 내부에서 중단하여 코드를 단계별로 실행하고 디버그합니다.
undebug(fn)를 사용하여 함수 중단을 중지하거나 UI를 사용하여 모든 중단점을 비활성화합니다.
중단점에 대한 자세한 내용은 중단점으로 디버그를 참조하세요.
ex)
function hello() {
console.info("hello world");
}
debug(hello);
undebug(hello);
9. dir(object) : 객체 속성의 객체 스타일 목록
Console API의 console.dir()메서드의 별칭.
ex)
document.body;
dir(document.body);
10. dirxml(object) : 객체 속성의 객체 XML 목록
Console API의 console.dirxml()메서드의 별칭.
ex)
document.body;
dirxml(document.body);
11. inspect(object/function) : 지정된 요소 또는 객체를 열고 선택합니다.
ex)
inspect(document.body);
12. getEventListeners(object) : 지정된 객체에 등록된 이벤트 리스너를 반환합니다.
ex)
getEventListeners(document);
getEventListeners(window);
13. keys(object) : 지정된 객체에 속하는 속성의 이름을 포함하는 배열을 반환합니다.
ex)
var player1 = { "name": "Ted", "level": 42 }
keys(player1);
< ["name", "level"]
14. monitor(function) : 지정된 함수가 호출될 때 함수에 전달된 인수와 함께 함수 이름을 나타내는 메시지가 콘솔에 기록됩니다.
unmonitor(function)을 사용하여 모니터링을 중단합니다.
ex)
> function sum(x, y) {
return x + y;
}
> monitor(sum);
< undefined
> sum(1,2);
VM66:2 function sum called with arguments: 1, 2
< 3
> unmonitor(sum);
> sum(1,2);
< 3
15. monitorEvents(object[, events]) : 지정된 이벤트 중 하나가 지정된 객체에서 발생하면 Event 객체가 콘솔에 기록됩니다.
이벤트 유형 & 해당 매핑된 이벤트
mouse "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key "keydown", "keyup", "keypress", "textInput"
touch "touchstart", "touchmove", "touchend", "touchcancel"
control "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"
> monitorEvents(window, "resize");
> monitorEvents(window, ["resize", "scroll"])
> monitorEvents($0, "key");
> monitorEvents($0, "mouse");
> unmonitorEvents($0, "mousemove");
16. profile([name]) 및 profileEnd([name]) : 선택 항목인 이름을 사용하여 자바스크립트 CPU 프로파일링 세션을 시작합니다.
profileEnd()는 프로필을 완료하고 그 결과를 Profile 패널에 표시합니다.
ex)
> profile('A');
> profile('B');
> profileEnd('A');
> profileEnd('B');
17. table(data[, columns]) : 항목인 열 제목과 데이터 객체를 전달하여 객체 데이터를 테이블 형식으로 기록합니다.
예를 들어, 콘솔에서 테이블을 사용하여 이름 목록을 표시하려면 다음 코드를 사용할 수 있습니다.
ex)
> var names = {
> 0: { firstName: "John", lastName: "Smith" },
> 1: { firstName: "Jane", lastName: "Doe" }
> };
> table(names);
18. values(object) : 모든 속성의 값을 포함하는 배열을 반환합니다.
ex)
> values(player1);
# Console Line API
console.log()를 사용하여 기본적인 로깅을 수행합니다.
console.error() 및 console.warn()을 사용하여 시선을 끄는 정보를 제공합니다.
console.group() 및 console.groupEnd()를 사용하여 관련 메시지를 그룹화하고 정리합니다.
console.assert()를 사용하여 조건부 오류 메시지를 표시합니다.
1. console.assert(expression, object) : 평가된 식이 false이면 콘솔에 오류를 기록합니다.
ex)
function greaterThan(a,b) {
console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(5,6);
2. printf 스타일 로깅
로깅 메서드의 첫 번째 파라미터가 String 일 경우, printf 스타일로 로그를 남길 수 있습니다.
※ 참고 : http://jsfiddle.net/ohgyun/j9aec/7/
%s String
%d, %i Integer
%f Float
%o Object HyperLink, Object를 로그로 남기고 싶을 경우
ex)
> console.log("%s, %d원", "멜론", 8000); //--> 멜론, 8000원
3. 타입별로 로깅
console.info(object[, object, ...])
console.warn(object[, object, ...])
console.error(object[, object, ...])
4. 메시지 그룹화 - groupCollapsed 그룹이 접힌 상태로 표시됨.
group | groupCollapsed , groupEnd
- console.group(object[, object, ...]) : 메시지 그룹화를 시작한다.
- console.groupEnd() : 메시지 그룹화를 종료한다.
ex)
var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
console.log("User '%s' not authenticated.", user)
}
console.groupEnd();
5. 타이머 : 타이머를 시작시간과 종료시간을 기록한다.
- console.time(name)
- console.timeEnd(name)
ex)
console.time("Array initialize");
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
}
console.timeEnd("Array initialize");
6. 트레이스 : 메서드를 호출한 지점에서 스택 추적을 출력합니다.
- console.trace(object)
ex)
function traceTest() {
console.trace();
}
traceTest();
7. 메시지 호출 횟수 : 동일한레이블에대해 호출된 횟수를 표시한다.
ex)
> function login(name) {
console.count(name + ' logged in');
}
> login("test");
test logged in: 1
8. 타임라인 : 기록 세션 동안 이벤트를 타임라인에 추가합니다.
- console.timeStamp([label]);
댓글