크롬 디 버 깅 기술(소결)
본 고 는 웹 모 바 일 디 버 깅 을 포함 하지 않 고 브 라 우 저 디 버 깅 을 포함 합 니 다.
이 디 버 깅 은 모두 chrome 브 라 우 저 에서 진행 된다.
alert
이것 은 더 말 할 필요 도 없 이 자명 하 다
console 기본 출력
모두 가 console.log 로 콘 솔 에서 물건 을 출력 하고 있 을 것 입 니 다.사실 console 에는 다른 방법 이 있 습 니 다.
console.log(" ");//
console.error(" ");//
console.info(" ");//
console.warn(" ");//
console.debug(" ");//
cosole.clear();// （ ）
위 에서 출력 한 error 는 throw 에서 나 온 error 와 다 릅 니 다.전 자 는 잘못된 정 보 를 출력 할 뿐 캡 처 할 수 없고 거품 이 생기 지 않 으 며 프로그램 실행 을 중단 하지 않 습 니 다.
포맷 출력
이 밖 에 콘 솔 은 사용자 정의 스타일 과 c 언어 와 유사 한 printf 형식 도 지원 합 니 다.
console.log("%s ",2016);//%s
console.log("%d %d ",2016,11);//%d
console.log("%f",3.1415926);//%f
console.log("%o",console);//%o
console.log("%c ","font-size:30px;color:#00f");
console.log("%c %c ","font-size:20px;color:green","font-size:10px;color:red");
DOM 출력
다음 몇 가지 비교적 간단 한 것 은 예 를 들 지 않 고 간단하게 말 하 겠 습 니 다.
var ul = document.getElementsByTagName("ul");
console.dirxml(ul); // table ， <table> innerHTML， document.getElementsByTagName ， 
대상 출력
var o = {
name:"Lily",
age: 18
};
console.dir(obj);// 
여러 대상 의 집합 에 대해 서 는 이렇게 출력 이 더욱 뚜렷 할 수 있 습 니 다.
var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);
그룹 출력
//
console.group("start"); // ，
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd("end");
함수 계수 와 추적
function fib(n){ // n
if(n == 0) return;
console.count(" ");// ，
console.trace();// ( ）
var a = arguments[1] || 1;
var b = arguments[2] || 1;
console.log("fib=" + a);
[a, b] = [b, a + b];
fib(--n, a, b);
}
fib(6);
주:Chrome 개발 자 도구 의 Sources 탭 도 Watch 표현 식 아래 호출 스 택 을 표시 합 니 다.
시간 을 재다
console.time() //
fib(100); // 100
console.timeEnd() // 
단언 문,이 c+디 버 깅 에 도 자주 사용 된다.js 에서 첫 번 째 표현 식 이나 인자 가 true 일 때 아무 일 도 일어나 지 않 습 니 다.false 일 때 프로그램 을 종료 하고 오 류 를 보고 합 니 다.
console.assert(true, " ");
console.assert(false, " ");
성능 분석
function F(){
var i = 0;
function f(){
while(i++ == 1000);
}
function g(){
while(i++ == 100000);
}
f();
g();
}
console.profile();
F();
console.profileEnd();
주:Chrome 개발 자 도구 의 Audits 탭 에서 도 성능 분석 이 가능 합 니 다.
debugger
이 중량급 은 블 로 거들 이 가장 많이 사용 하 는 것 으로 c++출신 일 수 있 으 며 한 단계 디 버 깅 에 대한 사랑 이 있 습 니 다.한 단계 디 버 깅 은 점 을 찍 고 프로그램 을 실행 하 며 현재 역할 영역 에서 볼 수 있 는 모든 변수 와 값 을 볼 수 있 습 니 다.debugger 는 프로그램 이 거기서 멈 춰 서 단일 디 버 깅 을 하 는 것 을 알려 주 는 것 으로 정지점 이 라 고 한다.
오른쪽 단 추 는 다음 과 같 습 니 다:
노드 속성 이 변 할 때 정지점(Break on attributes modifications)
노드 내부 하위 노드 가 변 할 때 정지점(Break on subtree modifications)
노드 가 제거 되 었 을 때 정지점(Break on node remove)
Global Listeners:전역 이벤트 감청
이벤트 Listener Breakpoints:이벤트 모니터 정지점 은 마우스,키보드,애니메이션,타이머,XHR 등 모든 페이지 와 스 크 립 트 이 벤트 를 보 여 줍 니 다.
chrome 의 디 버 깅 기술
1.DOM 요소 의 콘 솔 책 갈피
Chrome 개발 자 도구 와 Firebug 는 요소 탭(Chrome)이나 HTML 탭(Firebug)에서 마지막 으로 클릭 한 DOM 요 소 를 표시 하 는 책 갈피 기능 을 제공 합 니 다.만약 당신 이 순서대로 A 원소,B 원소 와 C 원 소 를 선택 했다 면$0 은 C 원소,&dollar 를 나타 낸다.1 은 B 원소,&dollar 를 나타 낸다.2 는 A 원 소 를 나타 낸다.(이것 과 정규 표현 식 의$기호 가 유사 하지만 순서 가 다르다)
대상 이나 배열 을 기록 할 때 당신 이 무엇 을 기록 하고 있 는 지 영원히 기억 합 니 다.원본 형식 을 기록 할 때 정지점 이 있 는 watch 표현 식 을 사용 합 니 다.비동기 코드 라면 인용 형식 을 기록 하지 마 십시오.
var arr = [{ num: 0 }];
setInterval(function(){
console.log(arr);
arr[0].num += 1;
}, 1000);
여기 서 첫 번 째 속성 에서 대상 이 인용 한 값 은 믿 을 수 없습니다.개발 자 도구 에 이 속성 을 처음 표시 할 때 num 의 값 이 확정 되 었 습 니 다.이후 같은 인용 을 몇 번 이나 다시 열 어도 변 하지 않 는 다.
2.가능 한 소스 맵 을 사용 합 니 다.때때로 생산 코드 는 sourcemap 를 사용 할 수 없 지만,어쨌든 생산 코드 를 직접 디 버 깅 해 서 는 안 된다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
해상 자위대의 HP가 아베 히로시의 라이벌로서 자칭을 줬다※기술적인 기사가 아닙니다. 다소 기술적인 이야기는 나옵니다. 우선, 그 페이지는 ・https 대응 ・2019.6.4 홈페이지 재개설(이전 사이트는 어디인가) ・로고와 타이틀이 입고 있다 · Failed to loa...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
