처음에는 : 사실, 나는 어렵지 않기 때문에 이전 에이 글을 쓸 것인지에 대해 생각하고 있었지만 왜 그렇게 많은 사람들이 묻는가? 또한 Console.log 및 기타 사항이 있다는 것을 알고 있지만 출력 정보에 대한 경고 대신 긴 문자열을 사용하는 이유를 모릅니다. 그들의 눈에는 경고로 충분합니다. 좋아, 나는 조금 불평했다고 인정하지만,이 시리즈에서 디버깅에 대한 기본 지식 만 소개 할 계획이며, 심층적 인 것이 JS 지식과 결합되어 있기 때문에 너무 깊이 포함되지 않을 것입니다. 같은 수준의 JS에 도달하지 않은 경우 버그를 디버깅하는 방법, 플러그인을 크랙하는 등을 가르쳐 주더라도 내가하고있는 일을 모릅니다. 제 목적은 콘솔을 알려주고 디버깅을 시작하는 것입니다. 당신은 길을 직접 걸어야합니다.
물론, 떠 다니거나 불평하십시오. .
JS 디버그 시리즈 디렉토리 :
실제로, 웹 개발 사람들은 프론트 엔드이든 백엔드이든이를 알고 있지만 많은 사람들이 HTML 시청 및 CSS 수정에만 집중하고 콘솔을 전혀 사용하지 않았습니다.
아마도 초보자 중 일부는이 일이 있다는 것을 모를 수도 있습니다. .
온라인에 대한 정보가 많이 있지만 디버깅에 대해 이야기하지 않고 사용 방법 만 소개합니다. .
Chrome Firefox (8 개 이상의 버전)이든 360 개의 빠른 브라우저 Sogou 브라우저 등이든 F12를 눌러 콘솔을 엽니 다.
우리의 기사는 Chrome을 예제로 사용하여 설명하지만 Chrome을 좋아하기 때문이 아닙니다. . 누구나 자신의 선호도가 있습니다. .
추신 : 과거의 FF는 모두 Firebug 였지만 이제는 기본입니다.
이제 F12를 클릭하여 콘솔을 열고 콘솔 항목을 클릭합니다.
내 아바타와 몇 줄의 텍스트를 볼 수 있지만 아래에는 여전히 몇 줄이 있습니다. 우리는 당분간 그것을 무시하고 나중에 설명 할 것입니다.
실제로 F12의 경우 가장 정확한 이름은 개발자 도구이며 콘솔은 콘솔입니다.
추신 : 기본 튜토리얼로서 콘솔 및 소스의 디버깅 만 소개합니다. 다른 기능을 직접 이해하십시오. .
Clear Console 메뉴를 마우스 오른쪽 버튼으로 클릭하거나 Clear ()을 입력하고 Enter를 눌러 콘솔 내용을 지우십시오.
Console.log를 사용하여 정보를 출력하는 첫 번째 단계를 수행하겠습니다.
console.log ( "hehe ..") 및 console.log ( "hehe ..", "haha ..")를 입력하고 Enter를 눌러 콘솔에서 출력 결과를 확인하십시오.
사실, 그것은 단지 정보를 출력하는 것입니다. 매우 간단합니다. Alert 및 Document.write 대신 디버그 대신 사용하면 작업이 매우 쉬워집니다.
예를 들어, 루프 코드를 디버깅하지만 배열에는 수십 또는 수백 개의 요소가 있습니다. 당신이 경고한다면, 당신은 미쳐 질 것입니다.
Document.Write도 나쁘지는 않지만 객체 출력의 경우 [개체 객체]와 같은 것만 볼 수 있습니다.
이것은 많은 새로운 친구들이 겪는 진정한 문제입니다.
Alert Document.write.write를 출력하여 콘솔을 사용하는 경우 콘솔 에서이 객체를 확장하여 특정 정보를 볼 수 있습니다.
예를 들어:
var arr = [{name : "nima", age : 22}, {이름 : "nima", age : 20}];[Object Object]를 표시하지 않고 객체 정보를 직접 볼 수 있습니다.
당신은 갑자기 콘솔. 로그가 폭발했다고 생각합니까?
사실, 이것은 그의 빙산의 일각 일뿐입니다. 나는 그의 장점 중 일부를 보여주기 위해 최선을 다할 것입니다.
지금 방금 단계를 계속하십시오. 이제 우리는 직접 ARR을 입력 한 다음 Enter를 누릅니다.
더 구속되지 않습니까? 이제 객체를 직접 클릭 하여이 배열의 객체를 확장하여 루프 출력을 저장 할 수 있습니다.
이것은 콘솔의 매력이며, 이것은 가장 기본적인 기능입니다.
먼저 사용할 수있는 콘솔 객체 아래에 어떤 메소드가 있는지 이해해 봅시다.
콘솔을 입력하고 Enter를 눌러 객체를 확장하십시오.
어둡고 밝은 색상을 볼 수 있습니다. 어두운 색상은 직접 호출 할 수있는 방법입니다. 밝은 색상은 기본 속성 또는 메소드를 나타내며 디스플레이에 대해 걱정할 필요가 없습니다. 기회가 있으면 나중에 이야기하겠습니다.
사실, 유일한 일반적인 것은 로그 디어입니다. 다른 사람들은 거의 사용되지 않으며 고급 디버깅에만 사용됩니다.
선호도에 따라 그룹 및 테이블과 같은 보조 속성을 사용할 수 있습니다. 나는 그것을 많이 사용하는 것을 좋아하지 않습니다.
단계별로 살펴 보겠습니다. 어쨌든, 로그 디어부터 시작하겠습니다. 대부분의 디버깅은 그들에 달려 있습니다.
PS : 실제로 공식 문서를 제공했지만 Google은 최근에 열 수 없었으므로 Baidu에서 각 방법의 기능을 확인할 수 있습니다.
중국어 버전을 찾았는데 나쁘지 않습니다. 먼저 "콘솔 객체"를 읽으십시오.
몇 번의 수업 후 연습을하겠습니다. (먼저 Baidu를 열고 콘솔을 엽니 다)
1 콘솔에서 ID KW1로 요소 정보보기
2 그런 다음 Console.dir 메소드를 사용하여 KW1 요소의 정보를보십시오.