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

'debugger;'

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

if (thisThing) {
    debugger;
}

테이블 형식으로 개체 표시

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

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', 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’);

在console.log()中你可以使用%s来代表一个字符串 , %i 来代表数字， 以及 %c 来代表自定义的样式。

监测指定函数的调用与参数

在Chrome中可以监测指定函数的调用情况以及参数：

var func1 = function(x, y, z) {
};

这种方式能够让你实时监控到底啥参数被传入到了指定函数中。

Console中使用$进行元素查询

在Console中也可以使用来进行类似于querySelector那样基于CSS选择器的查询，(‘css-selector’) 会返回满足匹配的第一个元素，而$$(‘css-selector’) 会返回全部匹配元素。注意，如果你会多次使用到元素，那么别忘了将它们存入变量中。

Postman

很多人习惯用Postman进行API调试或者发起Ajax请求，不过别忘了你浏览器自带的也能做这个，并且你也不需要担心啥认证啊这些，因为Cookie都是自带帮你传送的，这些只要在network这个tab里就能进行，大概这样子：

DOM变化检测

DOM有时候还是很操蛋的，有时候压根不知道啥时候就变了，不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你，你可以监测属性变化等等：

 以上就是关于十几个 实用的 JavaScript 调试小技巧图文代码详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！