자바스크립트 크롬 디버그

| | | | | | | | | | | | | | | | | | | | | | |

전문가에게도 코딩은 쉽지 않습니다. 이것이 아마도 개발자들이 코드에서 버그를 찾는 데 많은 시간을 보내는 이유일 것입니다. 때로는 버그가 분명하여 전체 프로그램이 한 번에 충돌합니다. 다른 경우에는 버그가 매우 미묘하여 항상 결함이 포함된 보기 좋은 결과를 생성합니다.

직관에 반하는 것처럼 들리겠지만 명백한 버그는 찾기 쉽기 때문에 더 좋습니다. 교활한 벌레는 몇 년 동안 일상적인 소프트웨어에 숨어 있을 수 있습니다.

이렇게 생각해 보세요. 독가스로 서서히 채워지는 건물에 있었다면 가스가 무취가 되기를 원했을 것입니다. , 무미, 무색 또는 밝은 자주색이며 가루 냄새가납니다. 대포?

디버깅은 개발 프로세스의 중요한 단계입니다. 이를 수행하는 데 사용할 수 있는 도구가 많이 있습니다. 오늘은 크롬에서 자바스크립트 디버깅에 대해 알아보겠습니다. Javascript는 지금까지 가장 널리 사용되는 언어 중 하나이며 웹 개발에 가장 널리 사용되는 언어입니다. 마찬가지로 Chrome은 가장 많이 사용되는 웹 브라우저 중 하나입니다.

수요가 많은 웹 개발자 Chrome을 사용한 JavaScript 디버깅에 익숙해지는 것이 좋습니다. 이 우아한 예제 웹페이지 >를 따르시기 바랍니다. 디버깅을 연습하기 위해 특별히 제작되었습니다.

소스 패널 사용

사진 1453576109701 Aef2d431a8a4
많은 거래에는 제어판과 동일한 기능이 있습니다. 웹 개발자와 동등한 사용법을 배워야 합니다.

Chrome에는 개발자가 HTML, CSS 및 Javascript.

좋아하는 웹사이트의 코드를 읽고 디버깅하는 방법을 배울 수 있는 좋은 방법입니다.

Take 둘러보기

2019년 및 최신 버전의 Chrome에서 개발자 도구에 액세스하는 것은 브라우저 상단 메뉴 화면에서 보기 -> 개발자 -> 도구 개발로 이동하는 것처럼 쉽습니다. 많은 유용한 탭이 있는 Chrome 개발자 패널이 열립니다.

"요소" 탭을 사용하면 웹 페이지를 구성하는 HTML 및 JavaScript를 탐색할 수 있습니다. "콘솔" 탭은 JavaScript를 수정할 수 있는 공간을 제공합니다. 이전 섹션에 링크된 예제 페이지의 콘솔을 열고 console.log(`hello`)를 입력합니다. 이 자바스크립트 명령은 브라우저에서 실행되어야 합니다.

`소스` 탭은 페이지 소스 파일의 실제 콘텐츠를 보여주고 중단점을 설정하고 호출 스택을 검사하는 방법을 제공합니다.

중단점 및 디버거 ;

중단점은 인쇄 지침과 함께 개발자가 디버깅을 위해 사용하는 기본 기술 중 하나입니다.

Chrome 콘솔에서 중단점 종료를 정의하는 것은 간단합니다. 숫자 éro를 클릭하세요. 관심 있는 줄에서 왔습니다. 중단점은 코드 실행이 자동으로 중지되는 위치입니다. 이를 통해 각 변수의 현재 값 및 발생한 모든 변환을 포함하여 지금까지 발생한 모든 것을 검사할 수 있습니다.

중단점은 코드를 작성하여 문제가 발생했는지 확인합니다.

디버거를 배치하여 수동으로 동일한 효과를 얻을 수 있습니다. 디버깅 프로세스를 시작하려는 코드에서.

여러 중단점을 설정하면 코드가 수행하는 모든 작업을 자세히 볼 수 있으므로 오류를 훨씬 쉽게 찾아낼 수 있습니다.

디버깅 기술을 마스터하는 데 이것이 꼭 필요한 것은 아니지만 좋은 장점이 됩니다. 가장 정확한 코드 수정은 코드로 원하는 작업에 대해 매우 참을성 있고 명확하게 생각하고 실제로 말한 내용과 비교하는 것입니다. . ;

위의 정보로 Chrome에서 JavaScript 디버깅을 실행하는 중입니다.