자바스크립트 콘솔

Michael Zippo

코딩은 재미있지만 지루할 수도 있습니다.

코딩을 시작하면 무언가 잘못되었다는 것을 깨닫고 매우 좌절하는 날이 있습니다. 코드가 실행 중일 때는 훨씬 더 성가시지만 제대로 작동하지 않는 이유를 알 수 없습니다. 코드에 수정해야 할 부분이 있을 때.

자바스크립트 콘솔이 유용할 수 있습니다. 콘솔을 사용하면 코드에서 진행 중인 작업을 추적할 수 있습니다. 이렇게 하면 코드의 문제를 쉽게 이해할 수 있습니다.

이 가이드에서는 JavaScript 콘솔을 사용하는 방법을 알아보겠습니다. JavaScript 콘솔을 빠르게 마스터할 수 있도록 콘솔을 사용하는 샘플 응용 프로그램도 제공합니다.

JavaScript 콘솔

개발자, 콘솔을 만나보세요. 개발자로 활동하는 동안 콘솔에서 많은 시간을 보내게 될 것이므로 이 부분에 익숙해져야 합니다.

콘솔은 메시지를 볼 수 있는 곳입니다. 애플리케이션이 실행 중이고 웹페이지의 콘텐츠를 조작할 수 있는 곳입니다.

콘솔에 메시지를 기록하도록 코드에 지시할 수 있으며 메시지를 가리킬 때 표시됩니다. 콘솔을 사용하여 변수, 값을 수정하고 변수에 저장된 값을 검사할 수도 있습니다.

콘솔을 표시하려면 개발자 도구를 열어야 합니다. Chrome에서는 Windows에서 Ctrl + Shift + I을 사용하거나 Mac에서 Cmd + Alt + I을 사용하여 이 작업을 수행할 수 있습니다. Firefox에서는 Command + Option + K를 사용하여 개발자 도구를 열 수 있습니다.

변경하면 다음과 같은 창이 나타납니다. 개방

<도 클래스 = "WP 화상 블록"> TLj9KUG2pZw3HEqt1Kd SIV W S3Q7V6c ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk> 모든 현대 브라우저에는 고유한 수의 도구 콘솔이 있습니다. 상단 여백: 0em, 여백-하단: 0.5em ;

TLj9KUG2pZw3HEqt1Kd SIV W S3Q7V6c ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk> 모든 현대 브라우저에는 고유한 수의 도구 콘솔이 있습니다. 상단 여백: 0em, 여백-하단: 0.5em ;

<스타일 미디어 =" 모두 ">. u6ff3233254f965cfe7e30aab4cading: 0 ; 패딩: 0 ; 상단: 1em ! 중요한 ; 패딩 바닥: 1em ! 중요한 ; 너비: 100% ; 디스플레이: 블록 ; 글꼴 두께: 700 ; 배경색: #FFF ; 경계: 0 ! 중요한 ; border -left: 4px 솔리드 상속 ! 중요한 ; 텍스트 장식: 없음} .u6ff3233254f965cfe7e30aab4ca92b86: 활성, .u6ff3233254f965cfe7e30aab4ca92b86: 호버 {불투명도: 1 ; 전환: 불투명도 250ms ; 웹킷 전환: 250ms ; 불투명도 250ms ; 웹킷 30 72ms ; 전환: 불투명도 250ms .u6ff3233254f965cfe7e30aab4ca92b86 .ctaText} {글꼴 두께: 700 ; 색상: # 000 ; 텍스트 장식: 없음 ; 글꼴 크기: 16px} .u6ff3233254f30965cfe72 86 ; # 3Title9595 -decoration: underline> 중요}

콘솔 소개

콘솔에 메시지를 표시하는 것으로 시작하겠습니다. 웹페이지를 열지 않고도 이 작업을 수행할 수 있습니다. 브라우저 콘솔을 열고 실행할 JavaScript 지침을 작성하기만 하면 됩니다.

콘솔에서 사용할 세 가지 주요 방법이 있습니다.

console .log(): 콘솔에 메시지를 표시합니다.
console.warn(): 콘솔에 경고를 표시합니다.
console.error (): 콘솔에 오류를 표시합니다.

계속하기 전에 코드의 용도를 먼저 알지 않고 콘솔에 아무 것도 붙여넣으면 안 됩니다. 많은 최신 사이트에서 경고합니다. 콘솔을 사용하여 민감한 사용자 정보에 액세스하는 사기가 있기 때문입니다. < br>

그렇지만, 갑시다 ! 콘솔에 메시지를 표시하려면 다음 코드를 사용할 수 있습니다.

이 명령을 실행하자마자 다음이 반환됩니다.

또한 콘솔에서 오류와 경고를 볼 수 있으며 오류와 경고의 차이점과 기존의 log() 문은 오류와 경고가 각각 주황색과 빨간색으로 표시된다는 것입니다.

코드 반환: ITALY

GXz6eGAaJ96el M5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe PIwF4SarOiG4St KfpQwMepeoqJTBjs0T52cxigKuo1Kuo1RE / figureReq2 <coJh2GK2 </ coJsquo2 응용 프로그램 <coJuc5> </ figureRij64> coJuc5> </ figureRij64> coJuc5 콘솔 개체 동작을 표시 쿠키 선택의 모델에 응용 프로그램을 만들 수 있습니다.이 응용 프로그램 것이다 차 한 잔의 이미지가 클릭된 횟수를 보여주는 카운터를 표시합니다. 콘솔의 모든 클릭을 기록하여 발생 시점을 추적할 수 있습니다.</p><h3>프런트 엔드 development </h3> <p>첫 번째 단계는 애플리케이션의 프런트 엔드를 개발하는 것입니다.

이 코드는 웹 페이지에 있는 네 가지 요소를 보여줍니다. : 제목, 게임 설명, 차 한 잔의 이미지 및 사용자가 차 한 잔을 클릭한 횟수를 알려주는 메시지.

또한 코드에 몇 가지 스타일을 추가하여 보기 좋게 만듭니다. "styles.css"라는 파일을 만들고 이것을 붙여넣습니다. code:

이 스타일은 차 클릭 게임용 상자를 만들고 클릭을 설정합니다. 색상을 노란색으로 바꾸고 이미지에 둥근 모서리를 만듭니다. 이것이 현재 웹페이지의 모습입니다:

자바스크립트 콘솔

JavaScript 콘솔

콘솔 소개

JavaScript를 사용하여 기능 추가

결론