먼저 Baidu를 열면 F12를 눌러 열 수 있습니다. 콘솔 품목이 아닌 경우 콘솔 항목을 콘솔에서 작동 시키므로 콘솔 항목을 클릭하십시오. .
다음 내용을 참조하십시오.
자, 먼저 콘텐츠를 지우고 마우스 오른쪽 버튼을 클릭하고 Clear Console 메뉴를 선택하거나 Clear ()를 입력 할 수 있습니다.
다음으로, 우리는 document.getElementById ( 'kw1')를 입력합니다. 그런 다음 Enter를 눌러 ID KW1의 요소 정보를보십시오.
매우 간단하지 않습니까? 다음 단계는 Console.dir를 사용하여 요소 정보를 보는 것입니다.
console.dir을 입력합니다 (document.getElementById ( 'kw1')); 그리고 Enter를 누르면 이상한 것이 나옵니다.
이 것을 클릭하면 모든 속성 메소드를 확장하고 나열합니다. 간단히 말해서,이 요소의 DOM 속성 메소드입니다.
좋아, 나는 이것에 대해 자세히 설명하지 않을 것이다. 어쨌든 DIR 방법은 또한 디버깅 도구 중 하나입니다.
이러한 질문은 실제로 오늘날의 내용을 예표합니다. 방금 콘솔에서 요소와 속성 메소드를 보는 방법을 보았습니다.
실제로 콘솔은 많은 명령 줄 API를 제공합니다. 간단히 말해서, 콘솔 만 사용할 수있는 기능입니다.
현재 콘솔 방법 및 속성은 다음과 같습니다. (Chrome 34)
코드 사본은 다음과 같습니다.
[ "$$", "$ x", "dir", "dirxml", "keys", "value", "profile", "monitorevents", "monitorevents", "unmonitorevents", "검사", "copy", "clear", "geteventlisteners", "undebug", "monitor", "$ 0" "," "", "", "", "", "", "", "", "", "", "", "", "$ 0" "$ 3", "$ 4", "$ _"]
추신 : 이런 것들을 보는 방법에 관해서는 나중에 그들에 대해 이야기하겠습니다. 나는 당신이 당분간 그들을 이해하지 못할까 두렵습니다.
또한 "콘솔 객체 #3. 명령 줄 API"를 참조하여 일부 사용법을 확인할 수 있습니다.
우리가 자주 사용하는 것은 $, $ _, $ 0- $ 4, dir, 키, 가치입니다. 관심이 있거나 심도있게 배우고 싶다면 자료를 직접 읽으십시오.
코드 사본은 다음과 같습니다.
$ // 단순히 문서를 이해합니다.
$$ // 단순히 문서를 이해합니다.
$ _ //는 이전 표현식의 값과 콘솔 객체 #3입니다. 명령 줄 API가 설명됩니다.
$ 0- $ 4 // // 마지막 5 가지 요소 패널에서 선택된 DOM 요소이며 나중에 논의 할 것입니다.
Dir // 실제로 Console.dir입니다
키 // 객체의 키 이름을 가져 가고 키 이름으로 구성된 배열을 반환합니다.
값 // 객체의 값을 제거하고 값 배열을 반환합니다.
좋아, 설명에서 이해하기가 어렵지는 않지만 이전에는 이루어지지 않았으며 아무도 무슨 일이 일어날 지 아무도 모른다.
젠장 바이두, 실제로 jQuery 1.10.2를로드했습니다. 원래 바이두의 환경은 깨끗하고 이것에 대해 이야기하는 것이 더 적절하지만 바보로 판명되었습니다. .
설명하기 위해 Soso로 변경합시다. . http://www.soso.com/을 열고 콘솔을 엽니 다.
이제 $를 사용하여 Baidu의 KW1 요소와 같은 ID 쿼리가있는 요소를보고 요소의 속성 메소드를 확인합니다.
이전과 같은 기능이지만 이제 코드는 매우 간단합니다. 3 개의 콘솔 속성과 $, $ _의 메소드를 사용하면 즉시 디버깅이 더 쉬워 집니까?
어떤 사람들은 요즘 jQuery가 일반적으로 사용된다고 말할 수도 있습니다. 이것을 확인하려면 어떻게해야합니까?
바이두로 돌아가서 지금 운영을하겠습니다.
$ ( '#kw1') 단계가 jQuery 객체를 가져 오기 때문에 지금과는 조금 다릅니다.
실제 요소의 속성 메소드를 보려면 [0]을 추가하십시오.
물론 jQuery 객체를보고 싶다면 아무런 문제가 없습니다. . 디버깅은 물론 조정하는 동안 시도해야합니다. .
실제로 왼쪽 상단의 돋보기 아이콘을 클릭하고 입력 상자를 선택하는 또 다른 매우 간단한 방법이 있습니다.
이런 식으로, 우리는 $ 0를 직접 사용하여 볼 수 있습니다. 우리는 지금 당장 $ 0- $ 4를 소개했습니다. 이것은 기능입니다. 간단합니다.
나중에 사용될 열쇠와 값에 대해 간단히 이야기 해 봅시다. . 그러나 어떤 사람들은 여전히 직접보고 싶어합니다.
코드 사본은 다음과 같습니다.
var obj = {이름 : 'nima', 나이 : 22, desc : 'Silk One'};
나는 당신이 그것을 한눈에 이해하고 그것을 한눈에 이해할 수 있다고 생각합니다.
좋아요, 오늘의 콘텐츠는 거의 모든 것입니다. 물론, 나는 그것을 직접 시도해야한다. 그렇지 않으면 나는 이러한 지식 요점을 실제로 배울 수 없을 것이다. .
우리가 그것을 읽을 수 있다면, 우리는 모두 대학 입학 시험에서 최고 득점자가 될 것입니다.
마지막으로, 이전에 입력 한 명령을 사용하는 것이 작은 트릭을 알려 드리겠습니다. 다시 들어갈 필요가 없습니다. 화살표 키 ↑ 및 ↓를 통해 위아래로 검색 할 수 있습니다. 이 기능은 CMD와 유사하며 매우 편리합니다. .
수업 후 연습 : (이제 F12를 눌러 콘솔을 엽니 다)
1. 기사 아래 에서이 함수에서 권장되는 기능 소스 코드를 확인하십시오 (물론 권장 사항을 클릭 할 수 있습니다.
2. 함수가있는 파일 위치에 위치합니다. (절정이오고 있습니다)
3. 기능을 무효화하도록 함수를 수정하십시오. (사실, 그것은 단순한 글로벌 수정 및 디버깅입니다.)
마지막으로, 말이 잘못되었거나 이해할 수 없거나 진행 상황이 유지 될 수없는 경우, 게시하고 불만을 제기하십시오.
또한 무언가를 추가하거나 실제 프로젝트 나 플러그인을 디버깅하려면 게시 할 수도 있습니다. 물론, 그것이 매우 귀찮은 프로젝트라면, 나는 그것을 소개하기 위해 기사를 작성할 수 없습니다. 나는 기사가 아닙니다. . .