버그를 빠르게 찾는 7가지 프런트엔드 디버깅 도구(디버깅에 필수)

프런트엔드 디버거의 대머리 원인인 애플리케이션 취약점. 프런트 엔드에서 작업해 본 적이 있다면 애플리케이션 취약점을 수정하는 것이 얼마나 어려운지 알 것입니다.

특히 JavaScript를 사용하는 경우 작은 오류로 인해 디버깅하는 데 몇 시간이 걸릴 수 있습니다. 그러나 브라우저, 운영 체제 및 장치 전반에 걸쳐 취약점은 불가피합니다.

버그를 위한 도구는 많지만 모든 도구를 "버그 악몽"이라고 부를 수는 없습니다. 이 기사에서는 취약점을 발견, 진단 및 복구하는 데 도움이 되는 작은 도우미를 소개합니다.

웹 브라우저용 개발자 도구

모든 최신 웹 브라우저에는 애플리케이션 디버깅에 도움이 되는 강력한 도구가 함께 제공됩니다. 이는 console.log()를 사용하는 콘솔 문, Alert()를 사용하는 팝업 창, 코드 실행을 일시 중지하는 디버거 문만큼 간단할 수 있습니다. 이러한 도구는 디버깅 작업, 특히 디버거 문에 매우 유용합니다.

네트워크 검사기나 CSS 스타일 검사기를 사용하여 디버깅을 더 쉽고 원활하게 만들 수도 있습니다. Google에서 검색하면 브라우저의 개발자 도구에 대해 자세히 알아볼 수 있습니다.

CSS Lint

CSS Lint 도구는 코드를 확인하는 것뿐만 아니라 감지할 오류와 경고를 선택하는 데도 사용할 수 있습니다. 기본 구문 검사를 수행하고 코드에 일련의 규칙을 적용하여 코드에서 문제가 있는 패턴이나 비효율성 징후를 찾습니다.

프로그래머의 삶: 프런트엔드 10K 인터뷰 준비, 가장 완벽한 실제 인터뷰 질문(답변 포함) 공유! zhuanlan.zhihu.com

JSON 형식화 및 유효성 검사 도구

형식이 지정되지 않은 JSON에서는 읽기 어렵기 때문에 구문 오류나 잘못된 키 값을 찾기가 어렵습니다. JSON 파일에 줄바꿈과 공백이 없으면 압축된 JSON 파일에서 오류를 읽고 찾는 것이 더 어렵습니다.

객체를 빠르게 스캔하고 서식이나 내용에 오류가 있는지 확인할 수 있어야 합니다. 이 문제를 해결하려면 각 개체를 확장하고 수동으로 포맷하면 됩니다. 이 과정은 귀하의 귀중한 시간을 많이 차지하게 됩니다.

JSON 형식 지정 및 유효성 검사 도구를 사용하면 압축된 JSON을 간단히 삽입하고 올바른 형식의 버전을 출력으로 얻을 수 있습니다. 이 도구는 RFC 표준에 따라 JSON의 유효성을 검사할 수도 있습니다.

Postman

거의 모든 프런트 엔드 애플리케이션은 JSON 응답 및 요청을 보내고 받습니다. 앱은 인증, 사용자 데이터 전송은 물론 현재 위치의 날씨 정보 가져오기와 같은 간단한 작업까지 다양한 작업을 수행할 수 있는 API에 연결됩니다.

Postman은 요청 및 응답 디버깅을 위한 최고의 JS 도구 중 하나입니다. 또한 macOS 시스템, Windows 시스템 및 Linux 시스템용 소프트웨어도 제공합니다. REST, SOAP 및 GraphQL 요청을 직접 빠르고 쉽게 보낼 수 있습니다.

Postman을 사용하면 요청을 조정하고, 응답을 분석하고, 취약성 문제를 해결할 수 있습니다. 문제가 프런트 엔드에 있는지, 백엔드에 있는지 확실하지 않을 때 유용합니다.

sentry

앱이 게시되면 다양한 기기에서 실행됩니다. 모든 소프트웨어 개발 수명주기에서 테스트 단계는 표준 프로세스로 구현됩니다. 이 단계에는 단위 테스트, 시스템 테스트, 통합 테스트 등이 포함됩니다.

그러나 버그를 간과하여 계속해서 생산할 수 있는 가능성은 항상 있습니다. 릴리스 후에도 다른 사람에게 알리지 않으면 남아 있는 취약점을 알 수 없습니다. 최종 사용자가 제공된 이메일을 통해 취약점을 보고하는 경우는 거의 없습니다. 이것이 Sentry가 작동하는 곳입니다.

Sentry와 같은 클라우드 기반 오류 로깅 시스템을 사용하면 게시 후에도 오류 인스턴스를 기록할 수 있습니다. Sentry는 사용 가능한 대부분의 프레임워크를 포괄하는 포괄적인 솔루션을 제공합니다.

Sentry 적용 가능한 언어 및 프레임워크

BrowserStack

BrowserStack은 사용자에게 오류가 발생할 때 정확한 환경을 시뮬레이션하는 데 도움을 줄 수 있습니다. 장치 + 운영 체제 + 브라우저의 강력한 조합은 반드시 갖춰야 할 필수 요소입니다. Sentry와 같은 오류 로깅 도구를 사용하면 이를 최대한 활용할 수 있습니다.

버그를 로그할 때 환경을 참조하고 BrowserStack에서 다시 생성하면 정확한 시나리오를 재현할 수 있습니다.

프리랜서에게는 저렴한 가격을 제공하고 오픈 소스 프로젝트에는 무료 라이센스를 제공합니다.

JSHint

JS 코드의 오류와 잠재적인 문제를 감지하는 정적 코드 분석 도구로, 개발자가 찾기 어려운 문제를 찾는 데 도움이 됩니다.

JSHint는 JavaScript로 작성된 프로그램을 검사하고 구문 오류, 암시적 유형 변환으로 인한 취약점, 유출된 변수 또는 기타 문제 등 일반적인 오류와 잠재적인 취약점을 보고합니다.

다음은 JSHint의 작동을 관찰하는 데 사용하는 예제 함수입니다.

어서 노트에 취약점을 처리하기 위한 이러한 아티팩트를 적어 두세요!

이 기사는 https://blog.csdn.net/lin123_00/article/details/106628193

에서 복제되었습니다. 더 많은 관련 지식을 보려면 PHP 중국어 웹사이트를 방문하세요!

위 내용은 버그를 빠르게 찾는 7가지 프런트엔드 디버깅 도구(디버깅에 필수)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!