구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법

 

환경: Chrome

 

크롬의 개발자 도구는 사이트 개발하고 테스트할 때 아주 유용합니다. 직접 원본 소스를 변경하지 않아도 개발자 도구 콘솔창에서 소스를 삽입한 후 실행이 가능합니다. 또한 기존에 만들어진 사이트를 분석할 때도 많이 이용합니다. 오늘은 개발자 도구 콘솔을 이용해서 자바스크립트의 특정 요소에 접근한 후 내부에 html 소스를 콘솔로 출력해 보도록 하겠습니다.

 

먼저 콘솔창에 소스를 입력하기 전에 html 요소에 접근하는 함수에 대해서 알아 보겠습니다. 자바스크립트 내에서 요소(Element) 에 접근하고 싶을 때 getElementsById() getElementsByTagName() 을 사용하게 되는데 id 혹은 name 이에 따라 달리 사용해야 합니다. 그런데 document.querySelector() 을 사용하면 CSS Selector 요소를 통해서 가져올 수 있습니다.

 

element = document.querySelector(selectors);

 

인수로 들어갈 selectors 값은 어떤 셀렉터인지에 따라 다릅니다. class 이면 “.class” id 일때 “#id” 입니다. 그럼 아래 샘플 소스에서 class="carrot" 인 요소에 querySelector 함수를 사용해서 어떻게 접근할 수 있을 까요?

 

element = document.querySelector(p#first.carrot);

 

selectors 의 인수 값은 “p#first.carrot” 가 됩니다. 먼저 p 태그에 first 아이디를 가진 요소를 찾습니다. 그리고 내부에 있는 3개의 클래스 중 carrot 로 접근해서 개체를 반환하는 것입니다

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p id="first">
      <strong class="carrot">C</strong>ascading
      <strong class="spinach">S</strong>tyle
      <strong class="spinach">S</strong>heets
    </p>
    <p id="second">
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

위에서 간단한 소스로 querySelector() 함수 사용법에 대해 알아 보았습니다. 그럼 크롬의 개발자 도구에서 querySelector() 함수로 특정 요소값을 찾아 보도록 하겠습니다. 찾을 정보는 검색 입력창인 id=”searchBox” 입니다. 주로 블로그 내에 정보를 찾을 때 많이 이용하는 입력 박스입니다.

 

개발자 도구를 열기 위해 크롬 오른쪽 상단에 있는 목록 아이콘을 클릭합니다. 그리고 [도구 더보기] > [개발자 도구] 메뉴를 선택합니다.

구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법

 

그럼 크롬 하단에 개발자 도구 화면이 나타납니다. 화면에서 querySelector() 함수로 찾을 요소는 사이트를 검색하는 입력창입니다

구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법

 

개발자 도구의 Elements 창에서 마우스를 소스 위에 올려 화면의 검색창을 찾으시면 됩니다. 아래 그림과 같이 검색창은 <div id=”searchBox”> 가 감싸고 있습니다. 이것을 querySelector() 로 찾아서 내부에 소스를 출력할 것입니다

구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법

 

id searchBox 이므로 넘겨야할 인수는 “#searchBox” 가 됩니다. 그리고 txt 라는 변수에 조회한 값을 저장합니다. 이 한줄의 소스를 콘솔창에 입력하고 Enter 를 눌러 줍니다.

var txt = document.querySelector('#searchBox')

구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법

 

한줄 소스를 실행하셨다면 콘솔창에 로그를 찍어서 결과값을 봐야겠죠. console.log() 함수를 이용하시면 변수에 있는 내용을 개발자 도구 콘솔에 찍어 볼 수 있습니다. 리턴 받은 값을 저장한 txt 변수를 넘겨서 콘솔에 찍어 보시면 검색창의 요소값을 확인할 수 있습니다

구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군


티스토리 툴바