Google Chrome은 인터넷 서핑에 사용될뿐만 아니라 개발자에게는 강력한 개발 원조 도구와 비슷합니다.
좋은 일을하고 싶다면 먼저 도구를 연마해야합니다. 다음으로 Chrome을 사용하는 몇 가지 방법을 알려 드리겠습니다.
독자가 Chrome에 JavaScript 브레이크 포인트를 추가하는 방법을 알고 있다면 계속 읽으십시오. 그렇지 않으면 직접 보충하십시오.
그러한 코드가있는 경우 :
코드 사본은 다음과 같습니다.
var a = 1;
기능 test () {
var a, b, c, d, e;
a = 2;
b = a -1;
B = 9;
C = 3;
d = 4;
e = (a + b * c) * (a -d);
반환 e;
}
시험();
코드 자체는 중요하지 않으며 중요한 것은 형식입니다.
e가 결국 필요한 결과이지만 결과가 잘못되었음을 알면 값을 e에 할당하는 선에서 중단 점을 설정합니다.
중단 점을 설정 한 후 마우스를 변수로 옮기고 잠시 머무르면 Chrome은 현재 변수의 값을 자극합니다.
그러나 표현은 상당히 복잡하며 단일 변수의 값을 보는 것은 쓸모가 없습니다. 모두 정상적으로 보이지만 계산 후 잘못되었습니다.
현재 (A + BC) 부분의 결과를 알고 싶을 것입니다. 걱정하지 말고 먼저 표현을 선택한 다음 마우스를 선택한 영역으로 옮기고 잠시 동안 유지하십시오.
Chrome은 답을 직접 알려줄 것입니다. 더 흥미로운 것은 여전히 뒤에 있습니다.
선택한 영역에서 직접 마우스 오른쪽 버튼을 클릭하면 메뉴가 나타납니다. 상위 두 가지 항목은 [감시에 추가] 및 [콘솔에서 평가]입니다. 특정 해당보기 참조 사진.
소위 시계는 모니터링으로 이해할 수 있습니다. 일부 표현식이 더 중요하며 전체 디버깅 프로세스 동안 표현식 값에 대한 실시간 모니터링이 필요할 수 있습니다. 현재 시계를 사용할 수 있습니다.
예를 들어, 중단 점을 "B = 9"라인으로 설정했습니다. 그리고 시계를 추가하십시오 : "a -b", 값은 1입니다. 그림과 같이 : 그림과 같이 :
다음 단계를 클릭하고 "b = 9;"를 실행합니다. 즉, B의 값이 변경되었음을 의미합니다. 현재 "A -B"와 IS -7의 값을보십시오.
이를 통해 실시간 모니터링의 효과를 달성하고 디버깅을보다 편리하고 빠르게 만듭니다.
다음으로 콘솔에서 무슨 일이 일어나고 있는지 봅시다.
물론 콘솔은 콘솔이며, 콘솔에서 직접 평가할 수 있습니다.
예를 들어 (A + BC)의 결과를 알고 싶다면 콘솔에 직접 복사하여 Enter를 누르면 결과가 나옵니다.
잠깐, 뭔가 잘못된 것 같습니다. 왜 콘솔이 A, B 및 C의 값을 알고 있습니까?
중단 점이없는 콘솔에서 JavaScript 코드를 실행하는 것이 전 세계적입니다. 즉, 현재로서는 가변 X가 콘솔에 정의 되며이 X의 범위는 전역입니다.
프로그램 중단의 경우 콘솔을 사용하는 경우 콘솔의 범위는 중단의 범위를 차별합니다. 즉, 중단 점이 설정된 곳 (또는 코드가 실행되는 곳)이 어디에 있든, 콘솔의 범위는 위치입니다.
이 예에서, 변수 A는 값이 1 인 글로벌 범위에서 정의된다; 로컬 변수 a는 함수 테스트 범위에서 값이 2의 값으로 정의됩니다. "a = 2;"에서 중단 점을 설정하고 콘솔에 입력하고 입력 한 후 정의되지 않은 인쇄.
현재 기능 테스트 내부에서 프로그램이 중단되고 기능 테스트에서 프로그램이 실행되므로 콘솔의 범위도 기능 테스트에 있습니다. 따라서 입력 A는 로컬 변수 A에 대한 액세스 및 로컬 변수 A가 현재 할당되지 않으므로 결과는 정의되지 않습니다.
이번에는 먼저 공유하겠습니다. 앞으로 강력한 사람을 만나면 계속 공유 할 것입니다. 독자에게 도움이되기를 바랍니다.