> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 디버깅을 위한 콘솔 사용을 위한 10가지 고급 팁

JavaScript 디버깅을 위한 콘솔 사용을 위한 10가지 고급 팁

青灯夜游
풀어 주다: 2020-09-28 17:39:46
앞으로
2815명이 탐색했습니다.

JavaScript 디버깅을 위한 콘솔 사용을 위한 10가지 고급 팁

지난 10년 동안 저의 가장 큰 열정 중 하나는 프런트 엔드 개발(특히 JavaScript)이었습니다. 나는 "장인"으로서 다양한 도구를 전문으로 다루는 것을 좋아합니다. 이 기사에서는 구식 콘솔을 사용하는 몇 가지 디버깅 기술을 소개합니다.

네, 우리 모두는 아래의 기본 기술을 알고 있습니다.

console.log(‘Hello World!’);
console.info(‘Something happened…’); 
console.warn(‘Something strange happened…’); 
console.error(‘Something horrible happened…’);
로그인 후 복사

이제부터 여러분이 모르는 기술을 가르쳐서 숙련된 운전자로 만들어 드리겠습니다!

1.console.trace()

메시지가 어디에 인쇄되는지 알고 싶다면 console.trace()를 사용하여 인쇄할 데이터의 스택 추적을 가져옵니다. console.trace()来获取要打印的数据的stacktrace。


2. console.time() && console.timeEnd()

如果你想分析函数的性能,可以使用console.time()来计时,console.timeEnd()来结束计时,控制台会打印出两次之间的时间差。

3. console.memory

如果你发现性能问题很难分析,可能还要考虑是否有内存泄露,你可以使用console.memory(注意memory是console的属性,不是函数),来查看当前的堆的使用情况。

Fundebug助你更好地debug,欢迎试用!

4. console.profile(‘profileName’) & console.profileEnd(‘profileName’)

虽然不是一个标准的做法,不过被广泛接受使用。你可以使用这两个命令来启动和停止profiling。这样有助你你在代码中做精准的profiling。而不依赖于手动的鼠标点击。你可以在浏览器控制台Javacript Profiler中找到刚刚的profile。

5. console.count(“STUFF I COUNT”)

有时候为了记录一个函数或则一段代码重复执行了多少次,可以使用console.count('?')来记录。每一次执行到该代码,就会自动加1。

6. console.assert(false, “Log me!”)

你可以使用console.assert来在某些为假的条件下输出消息,而不是用if-else。
注意:在Node.js下会报错(Assertion Error)。

7. console.group(‘group’) & console.groupEnd(‘group’)

如果你想对打印的log做一个格式化的整理,可以使用console.group()console.groupEnd()。使用console.group可以将log聚合成组,并且形成嵌套的层级。请看示例:

8. String substitutions

你可以使用console.log打印变量(%s = string, %i = integer, %o = object, %f = float)。

9. console.clear()

我们已经在控制台输出了很多记录,来使用console.clear()清空一下。

10. console.table()

最后一个压轴的!你可以使用console.table()


2. console.time() && console.timeEnd()함수 성능을 분석하려면 console.time( ) 시간으로, console.timeEnd()로 시간을 종료하면 콘솔은 두 시간 사이의 시간 차이를 인쇄합니다.

3. console.memory🎜성능 문제를 분석하기 어렵고 메모리 누수가 있는지도 고려하고 싶다면 console.memory를 사용할 수 있습니다(참고 메모리는 함수가 아닌 콘솔의 속성입니다). 현재 힙 사용량을 볼 수 있습니다. 🎜🎜🎜🎜Fundebug는 더 나은 디버깅을 도와줍니다. 사용해 보세요. 환영합니다. ! 🎜

4. console.profile('profileName') & console.profileEnd('profileName')🎜🎜그렇지는 않지만 표준 관행이지만 널리 받아들여지고 있습니다. 이 두 명령을 사용하여 프로파일링을 시작하고 중지할 수 있습니다. 이는 코드에서 정확한 프로파일링을 수행하는 데 도움이 됩니다. 수동 마우스 클릭에 의존하는 대신. 지금 브라우저 콘솔 Javascript Profiler에서 프로필을 찾을 수 있습니다. 🎜🎜🎜

5. console.count("STUFF I COUNT")🎜🎜때때로 함수나 코드가 반복적으로 실행된 횟수를 기록하기 위해 를 사용할 수 있습니다. console.count(' ?')를 기록합니다. 이 코드가 실행될 때마다 자동으로 1씩 증가합니다. 🎜🎜🎜

6. console.assert(false, “Log me!”)🎜🎜사용하는 대신 console.assert를 사용하여 특정 잘못된 조건에서 메시지를 출력할 수 있습니다. 만약-그렇다면.
참고: Node.js에서 어설션 오류가 보고됩니다. 🎜🎜🎜

7. console.group('group') & console.groupEnd('group')🎜🎜인쇄된 로그의 형식을 지정하려면 console.group() 및 console.groupEnd(). console.group을 사용하여 로그를 그룹으로 집계하고 중첩 계층을 형성합니다. 예를 참조하세요: 🎜🎜🎜

8. 문자열 대체🎜🎜console.log를 사용하여 변수를 인쇄할 수 있습니다(%s = 문자열, %i = 정수, %o = 개체, %f = 부동 소수점). . 🎜🎜🎜

9. console.clear()🎜🎜콘솔에 많은 레코드가 출력되었습니다. console.clear()를 사용하여 이를 삭제해 보겠습니다. 🎜🎜🎜

10. console.table()🎜🎜마지막! console.table()을 사용하여 객체를 테이블 형식으로 인쇄할 수 있습니다. 🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 JavaScript 디버깅을 위한 콘솔 사용을 위한 10가지 고급 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:medium.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿