재미와 이익을위한 명령 줄 API

브라우저 개발자 도구 명령 라인 API : 개발 및 디버깅 효율성을 향상시키는 강력한 도구 이 기사는 브라우저 개발자 도구의 강력한 명령 줄 API를 탐색합니다.이 도구는 개발 및 디버깅 경험을 크게 향상시키기 위해 다양한 별칭, 편리한 기능 및 바로 가기를 제공합니다.

코어 포인트 :

명령 줄 API를 사용하면 개발자가 JavaScript 콘솔에서 웹 페이지와 상호 작용할 수 있습니다. API는 JavaScript 콘솔 액세스로 제한되어 있으며 페이지 스크립트에는 사용할 수 없지만 브라우저 창에서 직접 코드 스 니펫을 실험하는 것이 편리합니다. API는 ( (객체의 모든 속성을 나열),

및 (중단 점을 설정하고 기능 호출을 모니터링).

제한 사항 (예 : 기본 메소드 또는 사용자 정의 이벤트에 적용되지 않음)에도 불구하고 명령 줄 API는 개발자에게 강력한 도구이며 효율성을 크게 높이고 워크 플로를 단순화합니다.
• 명령 줄 API에는 JavaScript 콘솔에서 웹 페이지와 직접 상호 작용할 수있는 일련의 별칭, 편리한 기능 및 바로 가기가 포함되어 있습니다. 이 기사는 개발 및 디버깅 경험을 향상시키는 데 실용적인 도구와 응용 프로그램을 소개합니다.
당신은 다양한 방법으로 브라우저의 JavaScript 콘솔에 액세스 할 수 있습니다. 일반적으로
• 키를 누르고 "콘솔"탭을 클릭하십시오. $ 우리가 더 깊이 들어가기 전에 퀴즈를 받자 : 브라우저에서 CSS 레이아웃의 개요를 시각화하는 방법을 알고 있습니까? document.querySelector dir 답변 : debug 108 바이트의 코드 만 필요합니다. monitor
이 간결한 코드의 제작자 인 Addy Osmani로서 이것은 "트위터 크기의 디버거"라고 말했다. 지금 시도해 볼 수 있습니다. 해당 코드 라인을 복사하여 좋아하는 개발자 도구 (Chrome 's DevTools, Firefox의 Firebug, Opera's Dragonfly, Safari의 웹 검사관 및 IE의 F12 도구 등의 JavaScript 콘솔에 붙여 넣기 만하면됩니다) (IE는 시리즈 및 IE의 F12 도구까지도). <.> 객체).

색상 16 진수 값의 생성은 인상적이지만, 나는 당신이 특별한 것들에 더 많은 관심을 기울이고 싶습니다. 이것은 에 대한 별칭이며 명령 줄 API의 많은 영리한 기능 중 하나입니다. API가 제공 할 수있는 다른 기능을 살펴 보겠습니다.

명령 줄 API는 JavaScript 콘솔에서만 사용할 수 있습니다. 페이지의 API에서 스크립트를 제공 할 수 없습니다. 그러나 이점은이 기사의 나머지 부분에 대한 모든 코드 스 니펫을 브라우저 창에서 직접 시도 할 수있는 기회를 제공한다는 것입니다. JavaScript 콘솔을 열고 실험하기 만하면됩니다. F12

Dom Exploration

jQuery 라이브러리에 익숙하다면

가하는 일을 추측했을 것입니다. 에 대한 별칭으로 주어진 CSS 선택기와 일치하는 첫 번째 DOM 요소에 대한 참조를 반환합니다.

유명한 쿠키 리모콘 게임에서 사용하는 방법을 보자. 이 단조롭고 이상하게 중독성있는 게임을 한 적이 없다면 : 기본적으로 큰 쿠키를 클릭하여 더 많은 구운 제품을 생산하고 다양한 베이킹 장비를 구입하십시오. 그러면이 장치는 더 많은 쿠키를 만들 것입니다.

이제 콘솔이 쿠키를 클릭하고 손을 떼고 휴식을 취할 수 있다면 좋지 않습니까? 약간의 JavaScript와 새로운 친구

를 사용하면 간단한 코드 라인으로 구현할 수 있습니다.

이것은 흥미롭지 만, 어떤 경우에는 명령 줄 API의 DOM 선택 함수에도 실제 값이 있습니다. 이 기사의 소개에서 $의 힘에 대해 배웠습니다. 에 대한 별칭으로 주어진 CSS 선택기와 일치하는 모든 DOM 요소가 포함 된 배열을 반환합니다.

예를 들어 우리는이 기능을 사용하여 웹 사이트의 모든 이미지 소스를 추출 할 수 있습니다.

<code class="language-javascript">[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1</code>

$$ document.querySelectorAll

특정 요소를 찾고 있고 두 번 확인하려면 를 사용하십시오. 예를 들어,

는 개발자 도구의 요소 탭의 요소로 직접 이동합니다. (JavaScript 함수를 전달하면

<code class="language-javascript">setInterval(function() { $("#bigCookie").click(); }, 10);</code>

도 작동합니다. 소스 패널로 이동합니다.)

객체 추적

JavaScript의 프로토 타입 상속을 이해하려고 할 때 콘솔에 약간의 조수가 있습니다. 이 메소드가 객체에서 호출되면 예를 들어 및 를 포함하여 객체의 모든 속성 목록을 표시합니다. 이것은 편리한 많은 장면 중 하나 일뿐입니다. 모든 객체의 속성을 편리하게 보았습니다. 객체의 직접 속성에만 관심이있는 경우 (즉, 프로토 타입 체인에서 상속되지 않은 속성) 및 를 사용하여 이름과 관련 값을 포함하는 배열을 얻을 수 있습니다. 각각. 시도해보십시오 :

객체는 JavaScript에서 가장 기본적이고 유비쿼터스 데이터 구조이므로 이러한 기능을 사용하여 객체 상태를 추적합니다.

콘솔 디버깅 inspect 내 웹 사이트 나 응용 프로그램에 문제가있을 때마다 가장 먼저하는 일은 콘솔에 오류 메시지를 확인하는 것입니다. 콘솔에서 많은 개발 시간을 보냈습니다. 그렇다면 및 와 같은 함수에 대해 흥분해야합니다. 명령 줄 API가 제공하는 강력한 디버깅 도구의 두 가지 예일뿐입니다. (불행히도 Safari의 웹 검사관은 두 기능을 모두 지원하지 않습니다.) inspect(document.body) body inspect 이것은 함수의 첫 번째 줄에서 중단 점을 설정하고 함수가 호출 될 때마다 디버거가 열립니다. 거의 항상 콘솔에서 작업 해 왔기 때문에 소스 코드를 탐색하고 특히 압축 코드를 처리 할 때 수동으로 중단 점을 설정하는 것보다 훨씬 빠릅니다. 이 동작을 끄려면

를 동일한 함수로 호출하십시오. YourLibrary.someFunction 디버거를 호출하고 싶지 않지만 특정 함수를 호출 할 때마다 알림을 받고 사용할 매개 변수는 친구입니다. undebug 콘솔의 다음 코드 :

예를 들어 일단 전화하면

를 호출하면 Chrome은 다음과 같은 것을 알립니다. monitor

<code class="language-javascript">[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1</code>

단순히 모니터링을 중지하기 위해 동일한 기능으로

를 호출하십시오. FireBug의 는 페이지 코드의 기능과 함께 작동합니다. square 명령 줄 API는 또한 이벤트 디버깅을 지원합니다.

square(5); function square called with arguments: 5

더 나아가 unmonitor를 사용하여 지정된 이벤트가 실제로 트리거되었는지에 대한 콘솔에서 피드백을 얻을 수도 있습니다. 콘솔에서 다음을 계속 입력하십시오 monitor

브라우저 창 크기 조정 후 추가 검사를 위해 이벤트 객체와 함께 콘솔에서 피드백을 받게됩니다. Firebug는 현재 뷰포트에서 어떤 DOM 요소가 없거나 오버플레이션되는지 알려주는 멋진 추가 기능을 추가합니다. 이는 응답 형 레이아웃을 디버깅하는 데 매우 도움이됩니다.

여러 이벤트를 지정하고 이벤트 유형 목록에서 선택할 수도 있습니다. getEventListeners

전체 목록은 Google 개발자의 명령 줄 API 참조를 참조하십시오. 그 당시 이벤트 모니터링을 비활성화하기 위해

를 사용할 수 있다는 사실에 놀라지 않을 수 있습니다. getEventListeners(document); Chrome 사용자에게 추가 이점

조만간 콘솔의 디버깅 기능은 다음을 포함하여 일부 단점을 드러냅니다. 및

는 기본 방법 에 적용되지 않습니다 사용자 정의 이벤트에 적용 할 수없는

객체 속성에 액세스 할 때의 중단과 같은 누락 된 기능 monitorEvents

운 좋게도 Amjad Masad는 우수한 Chrome Extension Debug Utils에서 이러한 문제를 해결했습니다 (Github에서 소스 코드를 찾을 수 있음).

monitorEvents(window, "resize"); 명령 줄 API를 사용하는 방법은 무엇입니까?

명령 줄 API는 웹 페이지 및 응용 프로그램의 임시 평가를위한 일련의 유용하고 편리한 기능을 제공합니다. 특히 디버깅 워크 플로에서 전체 악몽을 빠르게 대체하고 내가 가장 좋아하는 도구 중 하나가되었습니다.

JavaScript 콘솔은 이제 모든 주요 브라우저에서 액세스 할 수있는 강력한 도구입니다. 당신은 그것을 사용하고 있습니까? 그렇다면 가장 좋아하는 팁과 팁은 무엇입니까? console.log

(FAQ 부품은 피사체와의 상관 관계가 약하고 너무 길기 때문에 생략됩니다.)

위 내용은 재미와 이익을위한 명령 줄 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!