콘솔을 사용하여 디버깅하는 10가지 고급 기술 요약

일반적으로 새로운 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的属性，不是函数），来查看当前的堆的使用情况。

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()

2.console.time() && console.timeEnd()
함수의 성능을 분석하고 싶다면 console.time()을 사용하여 시간과 console.timeEnd()를 분석할 수 있습니다. code>를 눌러 Timing을 종료하면 콘솔은 두 시간 사이의 시간 차이를 인쇄합니다.

🎜🎜🎜🎜🎜3.console.memory🎜🎜 🎜🎜🎜성능 문제를 분석하기 어렵다면 console.memory를 사용할 수도 있습니다. (메모리는 함수가 아닌 콘솔) 현재 힙 사용량을 확인합니다. 🎜🎜🎜🎜🎜🎜4.console.profile(' profileName') & console.profileEnd('profileName')🎜🎜🎜🎜🎜표준 접근 방식은 아니지만 널리 수용되고 사용됩니다. 이 두 명령을 사용하여 프로파일링을 시작하고 중지할 수 있습니다. 이는 코드에서 정확한 프로파일링을 수행하는 데 도움이 됩니다. 수동 마우스 클릭에 의존하는 대신. 지금 브라우저 콘솔 JavaScript Profiler에서 프로필을 찾을 수 있습니다. 🎜🎜🎜 🎜🎜🎜5.console.count(“STUFF I COUNT”)🎜🎜🎜🎜🎜 때로는 함수나 코드가 반복적으로 실행된 횟수를 기록하기 위해 console.count( '?')를 녹음합니다. 이 코드가 실행될 때마다 자동으로 1씩 증가합니다. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/118/027/6149f30c33bcbc9b7affbd09735227e8-4.png" class="lazy" alt="">🎜🎜🎜🎜6.console.assert(false , "Log me!")🎜🎜🎜🎜🎜if-else를 사용하는 대신 <code>console.assert를 사용하여 특정 false 조건에서 메시지를 출력할 수 있습니다. 🎜🎜🎜🎜참고: 🎜🎜는 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()를 사용하여 개체를 테이블 형식으로 인쇄할 수 있습니다.

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

숫자 배열의 중복 제거 및 최적화를 위해 js로 이진 트리를 구성하는 방법에 대한 자세한 설명

Vue의 bass.scss 처리 솔루션 글로벌 도입에 대한 자세한 설명

노드를 사용하여 생성 나만의 명령줄 도구 방법 튜토리얼

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