로컬에서 디버깅(Flywheel 사용): 초보자 가이드

웹 사이트 또는 웹 사이트의 로컬 설치 내에서 문제가 발생하면 신경이 쓰일 수 있습니다. 결국 사이트 성능 문제나 버그로 인해 사이트 다운타임이 발생할 수 있습니다. 그리고 사이트 다운타임은 트래픽 손실, 기회 손실, 심지어 수익 손실을 의미할 수 있습니다.

고맙게도 사이트 문제를 식별하고 복구하기 위한 수많은 디버깅 솔루션이 있습니다. 그러나 상황에 가장 적합한 것이 무엇인지 어떻게 알 수 있습니까?

로컬에는 디버깅에 사용할 수 있는 다각적인 접근 방식이 있습니다. 여기에서는 로컬에 포함된 기본 디버그 옵션과 오류를 식별하는 방법, 문제를 보다 빠르고 효율적으로 발견하고 수정하는 데 사용할 수 있는 추가 추가 기능에 대해 설명합니다.

로컬에서 Xdebug는 무엇입니까?

Local에서 디버깅하는 방법을 논의하기 전에 먼저 Local에 있는 디버깅 도구인 Xdebug와 가장 주목할만한 기능에 대해 이야기해야 합니다.

Xdebug는 실제로 디버깅 프로세스를 단순화하는 PHP 확장입니다. 주로 var_dump () 함수의 형식을 더 깔끔하게 만들고 특정 오류에 대한 더 많은 경고 및 알림을 추가합니다. 그런 식으로 보다 직관적인 사용자 경험을 제공합니다.

모르는 경우를 대비하여 var_dump() 는 코드의 문제점을 신속하게 알려주는 유용한 PHP입니다. 그러나 여기서의 차이점은 Xdebug가 없으면 var_dump() 를 호출할 때 생성되는 코드입니다. 읽기가 훨씬 더 어려울 것입니다. 게다가 var_dump() 를 호출할 때도 매우 특별한 방식으로 PHP를 포맷해야 합니다. 처음에는.

Xdebug는 오류가 발생할 때 오류에 대한 더 깊은 정보를 제공하기 때문에 로컬에서 사용할 수 있습니다. 또한 특히 더 큰 문제의 경우 디버깅 프로세스를 간소화하는 단계 디버거와 함께 제공됩니다. 단계 디버거는 특정 중단점에서 코드를 단계별로 평가할 수 있도록 하여 작동합니다. 이를 통해 더 작은 섹션의 코드를 평가하고 문제를 보다 쉽게 ​​찾을 수 있습니다.

그리고 가장 좋은 점은 Xdebug가 기본적으로 로컬에서 활성화되어 시작하기 위해 설정을 엉망으로 만들 필요가 없다는 것입니다. 로컬을 열고 이동하십시오.

로컬에서 웹사이트를 디버깅하는 방법

몇 가지 주요 방법으로 로컬에서 웹사이트를 디버깅할 수 있습니다. 논의할 기본 단계는 다음과 같습니다.

1. 브라우저 콘솔 오류 식별
2. 쿼리 모니터 사용
3. Xdebug 및 VS 코드를 통해
4. Xdebug 및 PhpStorm 사용
5. 단계 디버깅을 위해 Xdebug 사용

뛰어들어봅시다.

1. 브라우저 콘솔 오류 식별

디버깅의 첫 번째 단계는 모든 브라우저 개발자 도구의 일부인 브라우저 콘솔을 사용하는 것입니다. 이를 통해 특별한 도구 없이 웹 페이지의 오류를 찾아낼 수 있습니다. 로컬을 시작하고 선택한 브라우저로 해당 페이지에 액세스한 다음 콘솔을 사용하여 오류를 찾아내기만 하면 됩니다. 다음은 여러 브라우저에서 브라우저 콘솔에 액세스하는 방법에 대한 분석입니다.

Chrome을 사용하는 경우…

1. Chrome 브라우저 메뉴에서 추가 도구 > 개발자 도구 로 이동하여 DevTools를 엽니다. 또는 Ctrl/Cmd+Shift+I 를 누르십시오.
2. 콘솔 탭을 클릭합니다.
3. 오류가 있는 경우 지금 표시되어야 합니다. 그렇지 않은 경우 웹 페이지를 다시 로드하여 생성합니다.
4. 브라우저 콘솔 내에서 오류 유형, 오류가 있는 위치 및 해당 행 번호를 기록해 둡니다.

Firefox를 사용하는 경우…

1. Firefox 메뉴에서 추가 도구 > 웹 개발자 도구 로 이동하여 브라우저 개발자 도구를 엽니다. Ctrl/Cmd+Shift+I 여기에서도 작동합니다.
2. 콘솔 을 클릭하십시오 탭. 또는 추가 도구 > 브라우저 콘솔 을 통해 콘솔에 직접 액세스할 수도 있습니다.
3. 이제 모든 오류가 표시됩니다. 그렇지 않은 경우 페이지를 새로고침합니다.

Safari를 사용하는 경우…

1. Safari 메뉴에서 환경 설정 > 고급 으로 이동하여 개발자 도구를 켭니다. Option+Cmd+I 는 여기 당신의 친구입니다.
2. 메뉴 모음에 현상 메뉴 표시 옆의 확인란을 선택합니다. 그런 다음 대화 상자를 닫습니다.
3. 개발 > 오류 콘솔 표시 를 클릭합니다. 위와 같은 거래입니다.

이 정보로 무장하면 로컬에서 설정한 파일 시스템으로 돌아가 문제를 일으키는 특정 코드를 찾은 다음 수정 사항을 구현할 수 있습니다. 사이트 폴더로 이동 버튼을 사용하여 로컬 웹사이트의 위치에 액세스합니다.

2. 쿼리 모니터를 사용하여 사이트 성능 문제 수정

WordPress에서 직접 웹 사이트 문제를 식별하고 복구할 수도 있습니다. 실제로 Query Monitor 플러그인은 디버깅과 특히 성능 문제를 식별하는 데 탁월한 선택입니다. 이것은 내장된 로컬 디버깅 도구와 유용한 쌍을 만들고 특히 타사 플러그인 및 테마 문제를 발견하는 데 유용합니다.

다른 플러그인과 마찬가지로 플러그인을 설치할 수 있습니다. 플러그인 > 새로 추가 로 이동하여 이름으로 검색하십시오. 목록에서 찾아 지금 설치 를 클릭한 다음 다운로드가 완료되면 활성화 를 클릭합니다.

쿼리 모니터가 알려줄 수 있는 것

플러그인을 설치한 후 WordPress 대시보드 상단에 새 메뉴 옵션이 표시되어야 합니다.

마우스를 가져가면 쿼리 모니터 도구 및 옵션의 드롭다운 목록이 표시됩니다. 그 중 하나를 선택하면 하단에 현재 페이지에 대한 자세한 내용을 알 수 있는 메뉴가 열립니다.

무엇보다도 쿼리 모니터는 다음을 포함하여 페이지 성능에 대한 개요를 제공합니다.

• 최대 메모리 사용량. 이 도구는 주어진 시간에 페이지를 생성하는 데 사용되는 메모리 양을 보여줍니다.
• 페이지 생성 시간. 페이지가 생성되는 데 걸리는 시간을 보여줍니다.
• 데이터베이스 쿼리 시간. 마지막으로 이 도구는 데이터베이스가 테마 또는 플러그인 요청에 응답하는 데 걸린 시간을 보여줍니다.

성능 문제 외에도 이 플러그인은 Xdebug와 마찬가지로 PHP 오류 및 알림도 식별할 수 있습니다. 그러나 노력은 타사 테마 및 플러그인에 중점을 둡니다. 여기서 편리한 점은 오류가 있는 경우 보안 위협과 함께 각 오류를 나열하는 PHP 오류 라는 적절한 이름의 새 탭이 도구 내에 표시된다는 것입니다. 또한 오류가 나타나는 코드 행과 특정 오류 코드 또는 알림도 알려줍니다.

이제 이것은 이미 라이브 또는 후기 테스트 단계에 있는 웹사이트에 정말 유용합니다. 그러나 아직 로컬 개발 단계에 있다면 로컬에서 Xdebug를 사용하는 것이 가장 좋습니다.

3. 디버깅을 위한 Xdebug 및 VS Code 설정

로컬로 돌아가서 다양한 방법으로 Xdebug를 사용하여 로컬 사이트 디버깅을 수행할 수 있습니다. 더 많은 돈을 벌기 위해 말하자면, VS Code의 힘을 방정식에 추가할 수 있습니다.

VS Code는 확장된 도구와 보다 직관적인 사용자 인터페이스를 갖춘 오픈 소스 코드 편집기입니다. 라인별 디버깅 프로세스를 훨씬 더 직관적이고 보기 쉽게 만듭니다.

실제로 VS Code를 Xdebug 단계 디버거에 연결하면 큰 효과를 얻을 수 있습니다. Local 내에서 사용하도록 설정하는 방법은 다음과 같습니다.

1. VS Code를 다운로드하고 개발자의 지침에 따라 설치합니다.
2. PHP 디버거 확장을 다운로드하여 설치합니다. Local의 문서에서는 이 작업을 위한 PHP Debug 확장을 권장합니다.
3. 로컬에서 추가 기능 > Xdebug + VS Code 를 클릭합니다.
4. 추가 기능 설치 를 클릭합니다.
5. 완료되면 활성화 및 다시 시작 을 누르십시오.
6. 로컬에서 사이트를 연 다음 유틸리티 탭을 클릭합니다.
7. VS Code에 실행 구성 추가를 클릭합니다.
8. VS Code가 실행되고 디버깅 프로세스를 시작할 수 있습니다.

VS Code를 선호하지 않는 경우 작업에 다른 편집 도구를 사용할 수 있습니다.

4. 디버깅을 위한 Xdebug 및 PhpStorm 설정

또 다른 옵션은 Xdebug와 함께 PhpStorm을 사용하는 것입니다. 추가 기능을 통해 로컬에 추가할 수 있으며 Xdebug 단계 디버거와 함께 작동합니다. 설치 및 설정은 위의 VS Code에 대해 설명한 프로세스와 매우 유사합니다. 사용하려면 다음 단계를 수행하십시오.

1. PhpStorm을 다운로드하여 설치합니다.
2. 로컬에서 추가 기능 > Xdebug + PhpStorm 을 클릭합니다.
3. 추가 기능 설치 를 클릭합니다.
4. 다시, 완료 후 활성화 및 다시 시작하십시오.
5. 로컬에서 아무 사이트나 열고 유틸리티 를 클릭합니다. 탭.
6. PhpStorm에 실행 구성 추가를 클릭합니다.
7. PhpStorm이 활성화된 상태에서 중단점이 발생하려는 특정 코드 줄에서 여백을 클릭하여 중단점을 설정합니다.
8. 재생 을 클릭하여 디버깅 프로세스를 시작합니다.

디버깅 프로세스를 통해 더 많은 지침을 원하는 경우 단계 디버깅은 항상 옵션입니다.

5. 단계 디버깅을 위한 Xdebug 사용

단계 디버깅은 매우 유용한 도구이자 Xdebug의 일부로 본질적으로 디버깅 프로세스를 통해 손을 잡고 있습니다. VS Code 및 PhpStorm(및 기타 많은 IDE 및 텍스트 편집기)과 함께 작동하여 상세하면서도 따라하기 쉬운 디버깅 도구, 단계 및 프로토콜을 제공합니다.

로컬에서는 Xdebug를 설정하기 위해 아무 것도 할 필요가 없습니다. 기본적으로 자동으로 활성화됩니다. 복잡한 테스트 환경(여러 시스템이 한 번에 기여하는 경우)이 있는 경우 더 복잡한 설정 지침이 있지만 현재로서는 한 시스템에서 하나의 Local 설치로 디버깅을 수행해야 한다고 가정합니다.

단계 디버깅을 사용하려면 이전 두 섹션에서 설명한 단계를 따르기만 하면 됩니다. 이 기능은 VS Code 또는 PhpStorm에서 모두 작동합니다. 모든 것이 설정되면 자동으로 중단점을 설정하고 코드를 하나씩 재생합니다. 이는 코드를 실행하고, 오류를 확인하고, 발생하는 즉시 수정할 수 있는 직관적인 방법을 제공합니다.

로컬에서 쉽게 디버깅

보시다시피 로컬에서 디버깅하는 것은 실제로 시작하기 위해 최소한의 설정이 필요한 매우 쉬운 프로세스입니다. 기본 디버깅 도구는 기본적으로 이미 있습니다. 원하는 텍스트 편집기 또는 IDE를 설정하고 추가 기능을 한두 개 구성하기만 하면 모든 설정이 완료됩니다. 물론 웹사이트를 최상의 상태로 만들려면 실제 버그 수정을 수행해야 합니다. 그러나 최소한 디버깅 프로세스 자체는 쉽고 최소한의 소란으로 실행할 수 있습니다.

로컬에서 디버그하기 위해 선호하는 도구는 무엇입니까? 아래 의견에서 귀하의 의견을 듣고 싶습니다.