Node.js 디버깅 시리즈 콘솔 명령줄 API 사용 method_javascript 기술

바이두를 먼저 열고 F12를 눌러주세요. 콘솔 항목이 아니라면 콘솔 항목을 클릭해 주세요. .
다음을 참조하세요:

좋습니다. 먼저 콘텐츠를 삭제해 보겠습니다. 마우스 오른쪽 버튼을 클릭하고 콘솔 지우기 메뉴를 선택하거나 clear()를 입력할 수 있습니다.
다음으로 document.getElementById('kw1');를 입력하고 Enter를 누르면 ID가 kw1인 요소 정보를 볼 수 있습니다.

매우 간단하지 않습니까? 다음 단계는 console.dir을 사용하여 요소 정보를 보는 것입니다.
console.dir(document.getElementById('kw1'));을 입력하고 Enter를 누르면 이상한 것이 나타납니다.

이 항목을 클릭하면 모든 속성 메서드가 확장되어 나열됩니다. 간단히 말하면 이 요소의 dom 속성 메서드입니다.
좋습니다. 이에 대해서는 자세히 설명하지 않겠습니다. 어쨌든 dir 메소드도 디버깅 도구 중 하나입니다.

이러한 질문은 사실 오늘의 콘텐츠를 예시하는 것입니다. 방금 우리는 콘솔에서 요소와 해당 속성 메서드를 보는 방법을 살펴보았습니다.
실제로 콘솔은 많은 명령줄 API를 제공합니다. 간단히 말하면 콘솔에서만 사용할 수 있는 기능입니다.
현재 콘솔 방법과 속성은 다음과 같습니다: (chrome 34)

코드 복사 코드는 다음과 같습니다.

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy" , "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

ps: 이러한 사항을 확인하는 방법에 대해서는 나중에 설명하겠습니다. 지금은 이해하지 못하실 것 같습니다.
"콘솔 개체 #3. 명령줄 API"를 참조하여 일부 사용법을 확인할 수도 있습니다.

우리가 일반적으로 사용하는 것은 실제로 $, $_, $0-$4, dir, key, value입니다. 관심이 있거나 더 자세히 알아보고 싶다면 직접 읽어보세요.

코드 복사 코드는 다음과 같습니다.

$ // 간단히 이해하면 document.querySelector 입니다.
$$ // 간단히 이해하면 document.querySelectorAll 입니다.
$_ // 이전 표현식인 콘솔 객체 #3의 값입니다. 명령줄 API에 지침이 있습니다.
$0-$4 //는 마지막 5개 요소 패널에서 선택된 DOM 요소입니다. 이에 대해서는 나중에 설명하겠습니다.
dir // 실제로는 console.dir
키 // 객체의 키 이름을 가져오고 키 이름 배열을 반환합니다.
값 ​​// 객체의 값을 가져오고 값 배열을 반환합니다.

글쎄요, 설명으로 보면 정말 이해하기 어렵지는 않지만, 이전에 해보지 않았다면 무슨 일이 일어날지 아무도 모릅니다.

젠장, 바이두는 실제로 jQuery 1.10.2를 탑재했다. 원래 바이두는 깨끗한 환경을 갖고 있었기 때문에 이런 얘기를 하는 게 더 적절했는데, 알고 보니 사기였다. .
이를 설명하기 위해 soso로 전환해 보겠습니다. . http://www.soso.com/을 열고 콘솔을 엽니다.
이제 $를 사용하여 id 쿼리(Baidu의 kw1 요소와 같은 검색 상자)가 있는 요소를 본 다음 요소의 속성 메서드를 봅니다.

이전과 동일한 기능이지만 이제 코드가 매우 간소화되었습니다. $, dir, $_ 세 가지 콘솔 속성이 사용되면 즉시 디버깅이 쉬워지나요?
요즘은 jQuery가 많이 쓰인다고 하시는 분들이 계시는데, 이를 확인하고 싶다면 어떻게 해야 할까요?
Baidu로 돌아가서 지금 바로 작업을 수행해 보겠습니다.

$('#kw1') 이 단계에서 jQuery 객체를 가져오기 때문에 이전 단계와 약간 다릅니다. 따라서 우리가 출력하는 것도 jQuery 속성 메서드입니다.
실제 요소의 속성 메소드를 보려면 [0]
을 추가하면 됩니다.
물론, jQuery 객체만 보고 싶다면 완전히 괜찮습니다. . 디버깅에 있어서는 물론 조정과 테스트를 동시에 수행해야 합니다. .
사실 아주 간단한 방법이 있는데, 왼쪽 상단에 있는 돋보기 아이콘을 클릭한 후 입력 상자를 선택하는 것입니다.

이런 식으로 $0을 직접 사용하여 $0-$4를 소개했습니다. 이것은 간단합니다.
나중에 사용할 키와 값에 대해 간략하게 이야기해 보겠습니다. . 그러나 일부 사람들은 여전히 ​​dir에서 직접 보는 것을 좋아합니다.

코드 복사 코드는 다음과 같습니다.

var obj = {이름: '니마', 나이:22, desc: '屌丝一'};

나는 당신이 똑똑하고 한눈에 그것을 이해할 수 있다고 믿습니다.

자, 오늘은 여기까지입니다. 물론 직접 시도해 봐야 합니다. 그렇지 않으면 이러한 지식을 실제로 배울 수 없습니다. .
읽기만 하면 우리 모두 대학 입시에서 상위권을 차지할 수 있겠죠?

마지막으로 작은 팁은 이전에 입력한 명령을 다시 입력할 필요가 없다는 점입니다. 화살표 키를 사용하여 위아래로 검색할 수 있습니다. 이 기능은 cmd와 비슷하며 매우 편리합니다. . .

수업 후 연습: (이제 F12를 직접 눌러 콘솔을 엽니다.)
1. 기사 하단에서 Recommendation이 호출하는 함수의 소스코드를 확인하세요. (물론 Recommend를 눌러도 됩니다. I'm not stop you. o(∩_∩)o )
2. 함수가 있는 파일 위치를 찾습니다. (클라이막스가 다가옵니다)
3. 기능을 무효화하도록 수정합니다. (실제로는 단순한 전역 수정 및 디버깅입니다.)

마지막으로, 뭔가 잘못되었거나, 이해가 안 되거나, 진행 상황을 따라갈 수 없는 경우 등이 있다면 스레드에 댓글을 남겨주세요.
또한, 컨텐츠 추가를 원하시거나 실제 프로젝트나 플러그인 디버깅을 원하시면 댓글을 남겨주셔도 됩니다. 물론 너무 귀찮은 프로젝트라면 글을 써서 소개할 수가 없고, 나는 기사가 아니다. . .