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

크롬의 개발자 도구는 사이트 개발하고 테스트할 때 아주 유용합니다. 직접 원본 소스를 변경하지 않아도 개발자 도구 콘솔창에서 소스를 삽입한 후 실행이 가능합니다. 또한 기존에 만들어진 사이트를 분석할 때도 많이 이용합니다. 오늘은 개발자 도구 콘솔을 이용해서 자바스크립트의 특정 요소에 접근한 후 내부에 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 변수를 넘겨서 콘솔에 찍어 보시면 검색창의 요소값을 확인할 수 있습니다.