우리가 가장 좋아하는 브라우저 콘솔 한 줄

다음은 브라우저 콘솔에서 전문가처럼 보이고 느끼기 위해 사용할 수 있는 몇 가지 한 줄짜리입니다 😁!

"$$ 청구서!" 🎶

얼마 전까지만 해도 특정 변경 전후에 얼마나 많은 요소가 DOM에 렌더링되고 있는지 알고 싶어 브라우저에서 제 자신을 발견했습니다. 몇 가지 독창적인 인터넷 검색 후 $$('*')를 사용하면 렌더링된 모든 요소의 배열이 출력된다는 사실을 알게 되었습니다!

// ran in the browser console on google.com
$$('*')

/** output
(320) [html, head, meta, meta, meta, meta, link, …]
*/

조금 더 깊이 파고들자 이것이 겉으로만 실행되고 있다는 것이 드러났습니다document.querySelectorAll.

// ran in the browser console on google.com
$$('path')

/** output
(16) [path, path, path, path, path, path, …]
*/

래빗 홀에서 끝까지 잠수하면서 $('//<xpath>')를 요소 경로로 대체할 수 있는 곳에서 <xpath>를 사용할 수 있다는 것을 발견했습니다. 이는 이전에 수행했던 작업과 유사하지만 특정 중첩 요소를 쿼리하는 추가 이점이 있습니다.

예를 들어 페이지에서 a 요소를 포함하는 div 요소 목록을 가져오려면...

// ran in the browser console on google.com
$x('//div[descendant::a]')

/** output
(41) [div.L3eUgb, div.o3j99.n1xJcf.Ne6nSd, …]
*/

디버거 중단점에서 변수 저장

참조here , 이는 디버그하는 동안 범위를 종료한 후에도 범위가 지정된 변수를 어딘가에 저장하는 멋진 방법입니다.

실시간 표현으로 값 보기

Live expressions 하나 이상의 표현식을 한 번 입력한 다음 값을 실시간으로 업데이트하여 콘솔 상단에 고정할 수 있습니다.

사용하려면 콘솔 도구 모음에서 라이브 표현식 아이콘을 클릭하여 새 라이브 표현식을 생성하십시오. 입력한 후에는 라이브 표현식 텍스트 상자 외부를 클릭하여 저장하십시오.

콘솔 물건은 어떻습니까?

Ben Marshall은 브라우저 콘솔 명령에 대한 훌륭한 tl;dr onhis blog post을 작성했으므로 바퀴를 다시 발명하지는 않겠지만 편의를 위해 여기에서 공유하겠습니다 :)

// Depending on the message, console.log may not be the best choice.
console.log('For general output of logging information.');
console.info('Informative logging of information.');
console.debug('Outputs a message to the console with the log level debug.');
console.warn('Outputs a warning message.');
console.error('Outputs an error message.');
console.assert(number % 2 === 0, {number, 'Log a message and stack trace to console if the first argument is false.'});
console.clear(); // Clears the console.
console.count(); // Log the number of times this line has been called with the given label.
console.dir(objectVar); // Displays an interactive list of the properties of the specified JavaScript object.
console.group(); // Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
console.groupEnd(); // See the command above.
console.memory; // The memory property can be used to check out the heap size status.
console.table([]); // Displays tabular data as a table.
console.time(); // Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
console.timeEnd(); // Stops the specified timer and logs the elapsed time in seconds since it started.
console.trace(); // Outputs a stack trace.

// You can also apply custom CSS styles.
console.log('%c Message with a background', 'color:white;font-size:2em;background:teal');

결론

이것들은 우리가 가장 좋아하는 것이지만 결코 이 목록이 포괄적인 것은 아닙니다. 의견에 가장 좋아하는 것을 알려주세요!

감사

이 기사에 기여해 주셔서 감사합니다! 더 많은 것을 위해 우리를 따르십시오 😁