집 > 기사 > 웹 프론트엔드 > 그래픽 코드를 사용한 12개 이상의 실용적인 JavaScript 디버깅 팁에 대한 자세한 설명

그래픽 코드를 사용한 12개 이상의 실용적인 JavaScript 디버깅 팁에 대한 자세한 설명

黄舟원래의: 2017-03-07 14:46:041090검색

'debugger;'

console.log 외에도 debugger는 빠른 디버깅을 위해 제가 좋아하는 또 다른 도구입니다. 코드에 디버거를 추가하면 Chrome에서 자동으로 이를 삽입합니다. C나 Java의 중단점과 마찬가지로 어딘가에서 중지됩니다. 일부 조건부 컨트롤에 이 디버깅 문을 삽입할 수도 있습니다. 예:

if (thisThing) {
    debugger;
}

테이블 형식으로 개체 표시

때로는 일부 복잡한 개체의 자세한 정보를 확인해야 하는 경우가 있습니다. 가장 간단한 방법입니다. console.log을 사용하여 목록으로 표시하고 위아래로 스크롤하여 찾아보는 것입니다. 하지만 console.table을 사용하여 목록으로 표시하는 것이 더 좋을 것 같습니다.

var animals = [
    { animal: &#39;Horse&#39;, name: &#39;Henry&#39;, age: 43 },
    { animal: &#39;Dog&#39;, name: &#39;Fred&#39;, age: 13 },
    { animal: &#39;Cat&#39;, name: &#39;Frodo&#39;, age: 18 }
];

console.table(animals);

다중 화면 크기 테스트

Chrome에는 다양한 기기의 크기를 시뮬레이션할 수 있는 기능이 있습니다. Chrome의 Inspector에서 toggle device mode 버튼을 클릭하면 다양한 기기 화면 크기에서 디버깅할 수 있습니다.

콘솔에서 DOM 요소를 빠르게 선택

요소 선택 패널에서 DOM 요소를 선택한 다음 콘솔에서 해당 요소를 사용하는 것도 Chrome Inspector에서 매우 일반적인 작업입니다. 마지막 5개의 DOM 요소 기록 기록에서 Shell의

과 유사한 메서드를 사용하여 요소와 빠르게 연결할 수 있습니다. 예를 들어 아래 목록에는 'item-4', 'item-3', 'item-2', 'item-1', 'item-0' 요소가 있습니다.

특정 기능의 통화 추적 기록 가져오기

console.traceJavaScript 프레임워크는 개발을 크게 촉진할 뿐만 아니라 생성과 같은 사전 정의된 기능도 많이 제공합니다. View, 바인딩 이벤트 등을 수행하므로 사용자 정의 함수의 호출 프로세스를 추적하기가 쉽지 않습니다. JavaScript는 매우 엄격한 언어는 아니지만, 특히 다른 사람의 코드를 검토해야 할 때 무슨 일이 일어나고 있는지 파악하기 어려울 수 있습니다.

가 작동할 때 함수 호출을 추적하는 데 도움이 될 수 있습니다. 예를 들어, 다음 코드에서는 car 객체에서 funcZ의 호출 프로세스를 추적해야 합니다.

var car;

var func1 = function() {
func2();
}

var func2 = function() {
func4();
}

var func3 = function() {

}

var func4 = function() {
car = new Car();
car.funcX();
}

var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;

this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}

this.funcZ = function() {
console.trace(‘trace car’)
}
}

func1();

여기에서 func1이 func2를 호출한 다음 func4를 호출하고 func4가 다음의 인스턴스를 생성하는 것을 명확하게 볼 수 있습니다. Car 다음에 car.funcX가 호출됩니다.

디버깅 기능을 빠르게 찾으세요.

함수에 중단점을 추가하려면 일반적으로 다음을 선택합니다.

Inspector에서 지정된 줄을 찾은 다음 중단점을 추가합니다

스크립트에 디버거 호출 추가
그러나 두 방법 모두 작은 문제가 있습니다. 즉, 해당 스크립트 파일로 이동해야 한다는 것입니다. 그런 다음 해당 라인을 찾으면 더 번거로울 것입니다. 비교적 빠른 방법은 콘솔에서

var func1 = function() {
func2();
};

var Car = function() {
this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}
}

var car = new Car();

debug(funcName)

실행 중

우리는 최신 웹 페이지를 개발할 때 일부 타사 프레임워크나 라이브러리를 사용합니다. 거의 모두 테스트를 거쳤으며 버그가 상대적으로 적습니다. 그러나 자체 스크립트를 디버깅할 때 실수로 이러한 파일로 이동하여 추가 디버깅 작업이 발생할 수 있습니다. 해결 방법은 디버깅이 필요하지 않은 스크립트의 실행을 금지하는 것입니다. 자세한 내용은 javascript-debugging-with-black-box 문서를 참조하세요.

在较复杂的调试情况下发现关键元素

在一些复杂的调试环境下我们可能要输出很多行的内容，这时候我们习惯性的会用console.log, console.debug, console.warn, console.info, console.error这些来进行区分，然后就可以在Inspector中进行过滤。不过有时候我们还是希望能够自定义显示样式，你可以用CSS来定义个性化的信息样式：

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}

console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);