당신이 모를 수도 있는 JavaScript 디버깅 팁

어떤 종류의 코드를 사용한다면 먼저 도구를 이해해야 합니다. 일단 익숙해지면 작업을 완료하는 데 큰 도움이 됩니다. 이 글에서는 여러분이 알지 못할 수도 있는 몇 가지 JavaScript 디버깅 기술에 대해 설명합니다. JavaScript 디버깅은 매우 번거롭지만, 요령을 익히면 이러한 오류와 문제(버그)를 최대한 빨리 해결할 수 있습니다. 어쩌면 당신이 알지 못했던 자바스크립트 디버깅 기술을 마스터할 수 있기를 바랍니다. 코드 축적의 여정에서 한 걸음 더 나아가세요.

여러분이 모를 수도 있는 14가지 디버깅 팁을 나열하겠습니다. 하지만 일단 알고 나면 다음에 JavaScript 코드를 디버그해야 할 때 꼭 사용하고 싶어질 것입니다!

지금 시작하세요.

많은 기술을 다른 검사 도구와 함께 사용할 수 있지만 대부분은 Chrome Inspector 및 Firefox와 함께 사용됩니다.

1. 'debugger;'

'debugger'는 console.log 다음으로 제가 가장 좋아하는 간단하고 폭력적인 디버깅 도구입니다. 코드에 작성하기만 하면 Chrome이 실행될 때 자동으로 중지됩니다. 필요할 때만 실행되도록 조건문으로 래핑할 수도 있습니다.

if (thisThing) {
    debugger;
}

2. 개체를 테이블로 출력

때로는 확인해야 할 개체가 너무 많을 수 있습니다. 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);

출력 결과:

3. 온갖 크기의 휴대폰을 올려두어도 멋있을 것 같지만 이건 매우 비현실적입니다. 인터페이스 크기를 조정하면 어떨까요? Chrome은 필요한 모든 것을 제공합니다. Inspector로 이동하여 '장치 모드 전환' 버튼을 클릭하면 창 크기를 조정할 수 있습니다!

4. DOM 요소를 빠르게 찾는 방법

요소 패널에서 DOM 요소를 표시하고 콘솔에서 사용합니다. Chrome Inspector의 기록은 마지막 5개 요소를 저장합니다. 마지막으로 표시된 요소는 $0으로 표시되고 마지막에서 두 번째로 표시된 요소는 $1로 표시되는 식입니다.

요소를 'item-4', 'item-3', 'item-2', 'item-1', 'item-0' 순서대로 표시하면 DOM 노드를 가져올 수 있습니다. console:

5. 루프 시간을 테스트하려면 console.time() 및 console.timeEnd()를 사용하세요.

특정 코드의 동작을 알고 싶을 때 이 도구를 사용하세요. 실행 시간과 관련하여, 특히 시간이 많이 걸리는 루프를 찾을 때 매우 유용할 수 있습니다. 태그를 통해 여러 타이머를 설정할 수도 있습니다. 데모는 다음과 같습니다:

console.time('Timer1');
 
var items = [];
 
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
 
console.timeEnd(&#39;Timer1&#39;);

실행 결과:

6. 함수의 스택 추적 정보를 가져옵니다.

JavaScript가 프레임워크 많은 코드를 빠르게 생성합니다.

이벤트를 발생시키는 뷰를 생성하고 결국 함수 호출이 어떻게 발생했는지 궁금해하게 됩니다.

JavaScript는 매우 구조화된 언어가 아니기 때문에 때로는 무슨 일이 언제 일어나고 있는지 완전히 이해하기 어렵습니다. 이때 JavaScript를 디버깅하려면 console.trace(터미널에서만 추적)를 사용하면 됩니다.

이제 33행에서 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();
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();

33행에서는 다음이 출력됩니다.

你可以看到func1调用了func2, func2又调用了func4。Func4 创建了Car的实例，然后调用了方法car.funcX，等等。

尽管你感觉你对自己的脚本代码非常了解，这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的，你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。

7. 格式化代码使调试 JavaScript 变得容易

有时候你发现产品有一个问题，而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。

8. 快速找到调试函数

来看看怎么在函数中设置断点。

通常情况下有两种方法：

1. 在查看器中找到某行代码并在此添加断点
2. 在脚本中添加 debugger

这两种方法都必须在文件中找到需要调试的那一行。

使用控制台是不太常见的方法。在控制台中使用 debug(funcName)，代码会在停止在进入这里指定的函数时。

这个操作很快，但它不能用于局部函数或匿名函数。不过如果不是这两种情况下，这可能是调试函数最快的方法。（注意：这里并不是在调用 console.debug 函数）。

var func1 = function() {
func2();
};
 
var Car = function() {
this.funcX = function() {
this.funcY();
}
 
this.funcY = function() {
this.funcZ();
}
}
 
var car = new Car();

在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候停止运行：

9. 屏蔽不相关代码

如今，经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此阅读更多关于调试不相关代码（http://raygun.com/blog/javascript-debugging-with-black-box/）。

10. 在复杂的调试过程中寻找重点

在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制台中快速浏览。但有时候，某些JavaScrip调试信息并不是你需要的。

现在，可以自己美化调试信息了。在调试JavaScript时，可以使用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设置自定义样式等等，还有很多更好的console.log()使用方法。 如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥你的想象力！

11. 查看具体的函数调用和它的参数

在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。

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

//....

};

然后输出：

이것은 어떤 매개변수가 함수에 전달되는지 확인하는 좋은 방법입니다. 하지만 콘솔이 우리에게 필요한 매개변수 수를 알려줄 수 있다면 좋을 것입니다. 위의 예에서 함수 1에는 3개의 매개변수가 필요하지만 2개의 매개변수만 전달됩니다. 코드가 코드에서 처리되지 않으면 버그가 발생할 수 있습니다.

12. 콘솔에서 요소에 빠르게 액세스

콘솔에서 querySelector 실행 더 빠른 방법은 달러 기호를 사용하는 것입니다. $('css-selector')는 첫 번째로 일치하는 CSS 선택기를 반환합니다. $$('css-selector')는 모두를 반환합니다. 요소를 두 번 이상 사용하는 경우 변수로 처리할 가치가 있습니다.

13. Postman은 훌륭하지만 Firefox가 더 빠릅니다.

많은 개발자가 Postman을 사용하여 Ajax 요청을 처리합니다. Postman은 정말 훌륭하지만 새 브라우저 창을 열고 테스트할 새 요청 개체를 작성해야 할 때마다. 사실 이게 좀 짜증스럽네요.

때로는 사용하고 있는 브라우저를 사용하는 것이 더 쉬울 때도 있습니다.

이렇게 하면 비밀번호로 보호된 페이지를 요청하려는 경우 더 이상 쿠키 확인에 대해 걱정할 필요가 없습니다. 이것이 Firefox에서 요청을 편집하고 다시 보내는 방법입니다.

프로파일러를 열고 네트워크 페이지로 이동하여 처리하려는 요청을 마우스 오른쪽 버튼으로 클릭하고 편집 및 재전송을 선택하세요. 이제 원하는 대로 변경할 수 있습니다. 헤더 정보를 수정하거나 매개변수를 편집한 후 재전송을 클릭할 수 있습니다.

이제 동일한 요청을 두 번 보내지만 매개변수는 다릅니다.

14DOM은 흥미로운 일입니다. 때로는 변경되는데 이유를 알 수 없습니다. 그러나 JavaScript를 디버그해야 하는 경우 Chrome은 DOM 요소가 변경될 때 처리를 일시중지할 수 있습니다. 속성을 모니터링할 수도 있습니다. Chrome 프로파일러에서 요소를 마우스 오른쪽 버튼으로 클릭하고 Break on 옵션을 선택하여

위의 내용은 JS 사용에 대한 몇 가지 팁입니다. 공통 연구를 가진 친구들이 함께 토론할 수 있습니다.

관련 읽기:

JavaScript와 ECMAScript의 차이점

드롭다운 메뉴의 JavaScript 구현 예

24개의 JavaScript 면접 질문

위 내용은 당신이 모를 수도 있는 JavaScript 디버깅 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!