실용적인 프런트엔드 코드 디버깅 기술

프런트 엔드 개발 프로세스에서 디버깅은 매우 중요한 링크입니다. 디버깅은 코드에서 버그를 찾고, 기능이 올바르게 작동하는지 확인하고, 애플리케이션의 성능을 최적화하는 데 도움이 됩니다. 그러나 프런트엔드 코드는 일반적으로 브라우저에서 실행되기 때문에 디버깅은 백엔드에서처럼 직관적이고 쉽지 않습니다. 따라서 디버깅 효율성과 정확성을 향상시키기 위해 몇 가지 실용적인 프런트 엔드 코드 디버깅 기술을 습득해야 합니다. 이 블로그는 프런트 엔드 코드 디버깅 기술 및 도구에 대한 심층적인 이해를 제공하고 실제 코드 예제를 통해 각 기술의 사용을 보여줍니다.

1. 브라우저의 개발자 도구 사용

브라우저 개발자 도구는 프런트 엔드 디버깅에 가장 일반적으로 사용되는 도구 중 하나입니다. 최신 브라우저에는 웹 페이지의 HTML 구조, CSS 스타일 및 JavaScript 코드를 확인하고 풍부한 디버깅 기능을 제공하는 개발자 도구가 내장되어 있습니다.

1.1 개발자 도구 열기

F12대부분의 최신 브라우저에서는 키를 누르거나 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하여 개발자 도구를 열 수 있습니다 . 또한 메뉴 모음의 "개발자 도구" 옵션을 통해서도 열 수 있습니다.

1.2 요소 패널

요소 패널은 웹 페이지의 HTML 구조 및 CSS 스타일을 보고 편집하는 데 사용됩니다. 요소 패널에서 요소를 선택하여 해당 HTML 코드 및 스타일을 보고 실시간으로 효과를 편집하고 미리 볼 수 있습니다.

예: 스타일 편집

간단한 예를 보여드리겠습니다. 다음과 같은 HTML 페이지가 있다고 가정합니다.

<!DOCTYPE html>
<html>
<head>
  <title>样式调试示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

그중 styles.css파일에는 스타일 정의가 포함되어 있습니다.

h1 {
  color: red;
}

브라우저에서 페이지를 열고 개발자 도구의 요소 창을 엽니다. 요소를 찾아 <h1>Hello, World!</h1>스타일 오른쪽에 있는 체크박스를 선택 취소하거나 스타일 값을 로 직접 수정합니다 color: blue. 수정된 스타일이 적용되는지 확인하기 위해 제목의 색상이 실시간으로 파란색으로 변경되는 것을 확인할 수 있습니다.

1.3 콘솔 패널

콘솔 패널은 브라우저에서 JavaScript 코드를 실행하고 출력 결과를 보는 데 사용됩니다. 개발자 도구의 콘솔 패널에서 합법적인 JavaScript 코드를 입력하고 Enter키를 눌러 코드를 실행할 수 있습니다. 또한 console.log()메서드를 통해 디버깅 정보를 코드에 출력할 수도 있습니다.

예: JavaScript 코드 디버깅

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

function add(a, b) {
  return a + b;
}

const result = add(1, 2);
console.log('Result:', result);

위 코드를 개발자 도구의 콘솔 패널에 복사하고 Enter키를 누릅니다. 콘솔 패널에 출력이 표시되어 Result: 3코드가 올바르게 실행되고 있는지 확인할 수 있습니다.

1.4 소스 패널

소스 패널은 JavaScript 코드를 보고 디버그하는 데 사용됩니다. 소스 패널에서는 웹 페이지에서 로드한 모든 JavaScript 파일을 볼 수 있으며 중단점 설정, 단일 단계 디버깅 및 모니터링 변수와 같은 작업을 수행할 수 있습니다.

예: 중단점 설정 및 디버깅 단계별 실행

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

<!DOCTYPE html>
<html>
<head>
  <title>调试示例</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    function add(a, b) {
      return a + b;
    }

    const result = add(1, 2);
    console.log('Result:', result);
  </script>
</body>
</html>

브라우저에서 이 페이지를 열고 개발자 도구의 소스 창을 엽니다. 레이블에서 코드를 찾아 <script>클릭하여 왼쪽의 코드 줄 번호에 중단점을 설정합니다. 그런 다음 웹 페이지를 새로고침하면 설정된 중단점에서 페이지가 멈추는 것을 확인할 수 있으므로 코드를 단계별로 살펴보고 변수 값을 볼 수 있습니다.

2. console.log를 사용하여 디버그

프론트 엔드 개발에서 console.log가장 일반적으로 사용되는 디버깅 방법 중 하나입니다. 코드에 문을 삽입하여 console.log변수 값, 함수 실행 결과 등과 같은 정보를 출력하여 코드의 실행 프로세스를 더 잘 이해할 수 있습니다.

예: console.log를 사용하여 디버그

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

function add(a, b) {
  return a + b;
}

const result = add(1, 2);
console.log('Result:', result);

브라우저에서 이 페이지를 열고 개발자 도구의 콘솔 패널을 엽니다. 콘솔 패널에 출력이 표시되어 Result: 3코드가 올바르게 실행되고 있는지 확인할 수 있습니다.

사용 하면 console.log객체 및 배열과 같은 더 복잡한 정보도 출력할 수 있습니다. 또한 템플릿 문자열을 사용하여 출력 정보를 구성할 수 있습니다.

예: 출력 개체 및 배열

const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const fruits = ['apple', 'banana', 'orange'];

console.log('Person:', person);
console.log(`Fruits: ${fruits.join(', ')}`);

3. 디버거 문을 사용하여 디버그

JavaScript에서 debugger문은 debugger코드가 문에 대해 실행될 때 브라우저가 자동으로 일시 중지하고 디버깅 모드로 들어갈 수 있도록 하는 특수 문입니다. 디버그 모드를 사용하면 개발자 도구에서 코드를 단계별로 실행하고 변수 값을 보고 단일 단계 작업을 수행할 수 있습니다.

예: debugger 문을 사용하여 디버그

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

function add(a, b) {
  debugger;
  return a + b;
}

const result = add(1, 2);
console.log('Result:', result);

브라우저에서 이 페이지를 열고 개발자 도구의 소스 창을 엽니다. debugger;페이지를 새로 고치면 명령문에 대한 코드가 실행될 때 페이지가 행에서 자동으로 중지되어 디버깅 모드로 들어가는 것을 볼 수 있습니다 . 디버그 모드에서는 코드를 단계별로 실행하고 변수 값을 볼 수 있습니다.

4. 소스 맵으로 디버깅

프런트 엔드 개발에서는 일반적으로 JavaScript 코드를 압축하고 병합하여 파일 크기와 네트워크 요청을 줄입니다. 그러나 최소화된 코드는 변수 이름과 줄 번호가 수정되어 디버깅 시 직관적이지 않습니다. 이 문제를 해결하기 위해 소스 맵을 사용하여 더 쉽게 디버깅할 수 있도록 압축된 코드를 복원할 수 있습니다.

예: 소스 맵으로 디버깅

먼저 소스 맵 파일을 생성해야 합니다. 대부분의 빌드 도구에서 소스 맵 파일을 생성하도록 구성할 수 있습니다.

{
  "name": "MyApp",
  "version": "1.0.0",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "webpack --mode production --devtool source-map"
  },
  "devDependencies": {
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0"
  }
}

위 구성에서 devtool: 'source-map'Webpack 구성에 옵션을 추가하여 소스 맵 파일을 생성했습니다.

그런 다음 HTML 페이지에 소스 맵 파일을 도입해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>调试示例</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script src="dist/bundle.js"></script>
</body>
</html>

이제 개발자 도구의 소스 창에서 복원된 코드를 볼 수 있으므로 디버깅이 더 쉬워집니다.

5. 중단점을 사용한 디버깅

중단점은 코드 실행을 일시 중지하기 위해 코드에 설정된 마커입니다. 개발자 도구의 소스 패널에서 코드의 줄 번호를 클릭하거나 코드에 debugger명령문을 삽입하여 중단점을 설정할 수 있습니다.

예: 중단점을 사용한 디버깅

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

function add(a, b) {
  return a + b;
}

const result = add(1, 2);
console.log('Result:', result);

브라우저에서 이 페이지를 열고 개발자 도구의 소스 창을 엽니다. function add(a, b) {현재 있는 줄 번호를 찾고 코드 줄 번호를 클릭하여 중단점을 설정합니다. 페이지를 새로고침하면 코드 실행이 중단점에 도달하면 페이지가 해당 줄에서 자동으로 중지되어 디버깅 모드로 들어가는 것을 볼 수 있습니다. 디버그 모드에서는 코드를 단계별로 실행하고 변수 값을 볼 수 있습니다.

6. Chrome DevTools로 디버깅

Chrome DevTools는 Google Chrome 브라우저에 내장된 개발자 도구로 Elements 패널, Console 패널, Sources 패널 등 풍부한 디버깅 기능을 제공합니다. 위에서 언급한 일반적인 디버깅 기술 외에도 Chrome DevTools는 성능 패널, 메모리 패널, 네트워크 패널 등과 같은 몇 가지 고급 디버깅 기능을 제공합니다.

예: Chrome DevTools로 디버깅

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

<!DOCTYPE html>
<html>
<head>
  <title>调试示例</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    function add(a, b) {
      return a + b;
    }

    const result = add(1, 2);
    console.log('Result:', result);
  </script>
</body>
</html>

Chrome 브라우저에서 페이지를 열고 개발자 도구를 엽니다. Ctrl + Shift + I웹 페이지를 누르거나 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하여 개발자 도구를 열 수 있습니다 . 그런 다음 페이지를 새로고침하면 페이지가 코드 줄에서 자동으로 중지되어 const result = add(1, 2);디버깅 모드로 들어가는 것을 확인할 수 있습니다. 디버그 모드에서는 코드를 단계별로 실행하고 변수 값을 볼 수 있습니다.

7. VS Code로 디버깅하기

브라우저 개발자 도구 외에도 VS Code는 강력한 디버깅 기능을 제공하는 또 다른 인기 있는 프런트 엔드 개발 도구입니다. VS Code에서 중단점을 설정하면 브라우저에서 코드를 디버그하고 변수 값을 볼 수 있습니다.

예: VS Code로 디버깅

먼저 VS Code용 Chrome 디버깅 플러그인을 설치해야 합니다. VS Code에서 확장 패널을 열고 "Chrome용 디버거" 플러그인을 검색한 다음 "설치" 버튼을 클릭하여 설치합니다.

다음으로 VS Code에서 디버깅 작업을 구성해야 합니다. 프로젝트의 루트 아래에 .vscode이름이 지정된 폴더를 만들고 launch.json그 안에 이름이 지정된 파일을 만들고 구성합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

위 구성에서 디버깅 작업 유형을 "chrome"으로 지정하고 디버깅 URL 및 웹 루트를 설정했습니다.

그런 다음 Chrome 브라우저에 "Debugger for Chrome" 플러그인을 설치해야 합니다. Chrome 브라우저에서 확장 프로그램 패널을 열고 "Chrome용 디버거" 플러그인을 검색한 다음 "Chrome에 추가" 버튼을 클릭하여 설치합니다.

이제 VS Code에서 중단점을 설정하고 디버그 패널에서 "실행 및 디버그" 버튼을 클릭하여 디버깅을 시작할 수 있습니다. 이 시점에서 Chrome 브라우저가 자동으로 열리고 디버깅 모드로 들어갑니다. 디버그 모드에서는 코드를 단계별로 실행하고 변수 값을 볼 수 있습니다.

8. 로깅을 통한 디버깅

복잡한 프런트 엔드 애플리케이션을 디버깅할 때 개발자 도구와 중단점 디버깅만으로는 충분하지 않은 경우가 있습니다. 이때 로깅을 사용하여 디버깅을 지원할 수 있습니다. 코드에 로깅 문을 삽입하면 더 자세한 정보를 출력할 수 있으므로 코드 실행을 더 잘 이해할 수 있습니다.

예: 로깅으로 디버깅

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

function add(a, b) {
  console.log('Adding', a, 'and', b);
  return a + b;
}

const result = add(1, 2);
console.log('Result:', result);

브라우저에서 이 페이지를 열고 개발자 도구의 콘솔 패널을 엽니다. 콘솔 패널에 출력이 표시됩니다.

Adding 1 and 2
Result: 3

로깅을 통해 코드의 실행 과정을 명확하게 알 수 있고 변수의 값을 볼 수 있습니다.

9. 어설션을 사용한 디버깅

어설션은 코드 실행 결과를 확인하는 기술입니다. 코드에 주장문을 삽입하면 코드에서 특정 조건이 참일 것으로 예상하고 조건이 참이 아니면 예외를 발생시켜 문제를 빠르게 찾을 수 있습니다.

예: 어설션을 사용한 디버깅

간단한 예를 보여드리겠습니다. 다음과 같은 JavaScript 코드가 있다고 가정합니다.

function add(a, b) {
  console.assert(typeof a === 'number', 'a must be a number');
  console.assert(typeof b === 'number', 'b must be a number');
  return a + b;
}

const result = add(1, 2);
console.log('Result:', result);

브라우저에서 이 페이지를 열고 개발자 도구의 콘솔 패널을 엽니다. 콘솔 패널에 출력이 표시됩니다.

Result: 3

어설션을 통해 함수의 매개변수가 유효한지 확인하고 매개변수가 유효하지 않은 경우 예외를 발생시켜 신속하게 문제를 찾을 수 있습니다.

10. 디버깅 도구로 디버깅하기

브라우저의 개발자 도구와 VS Code의 디버깅 플러그인 외에도 프런트 엔드 디버깅 전용 도구가 있습니다. 이러한 도구는 일반적으로 원격 디버깅, 성능 분석 등과 같은 보다 강력한 디버깅 기능을 제공합니다.

10.1 반응 개발 도구

React DevTools는 React 구성 요소의 상태 및 동작을 디버깅하는 데 사용되는 React 프레임워크용 디버깅 도구입니다. React DevTools는 구성 요소 계층 구조, 소품 및 상태 값을 보고 구성 요소 상태가 변경될 때 실시간으로 업데이트하는 데 도움이 될 수 있습니다.

10.2 리덕스 개발자 도구

Redux DevTools는 Redux의 상태와 동작을 디버깅하는 데 사용되는 Redux 라이브러리용 디버깅 도구입니다. Redux DevTools는 Redux의 상태 트리, 작업 및 감속기의 실행 프로세스를 보고 상태가 변경될 때 실시간으로 업데이트하는 데 도움이 될 수 있습니다.

10.3 등대

Lighthouse는 웹 애플리케이션의 성능과 품질을 평가하기 위해 Google에서 개발한 성능 분석 도구입니다. Lighthouse는 애플리케이션의 성능, 접근성, 모범 사례 및 SEO를 확인하고 개선을 위한 제안을 제공하는 데 도움을 줄 수 있습니다.

11. 요약

이 블로그에서는 브라우저 개발자 도구, console.log, 디버거 문, 소스 맵, 중단점, Chrome DevTools, VS Code, 로깅, 어설션 및 디버깅 도구 사용을 포함하여 몇 가지 실용적인 프런트 엔드 코드 디버깅 기술을 소개합니다. 이러한 디버깅 기술을 마스터함으로써 프런트 엔드 코드를 보다 효율적으로 디버깅하고 개발 효율성과 품질을 향상시킬 수 있습니다.