DOM 탐험하기

당신의 것들을 사랑해라

두가지 종류의 객체와 함수가 있습니다 - 표준 DOM에 속해있는 것과, 당신의 JavaScript 코드의 것. Firebug는 차이점을 알려줍니다, 그리고 목록을 진하게 표시하여 상단에 당신의 스크립트로 생성된 객체와 함수를 보여줍니다.

더욱 잘 구별하기 위해서, 다른 종류의 객체들을 완전히 숨길수 있는 옵션 메뉴를 사용할 수 있다.

정보를 주는 객체 요약

다양한 종류의 객체가 있습니다, 그리고 Firebug는 가능한 많은 정보를 제공하면서 그것들을 시각적으로 구별해주기 위해 최고의 노력을 합니다. 객체는 그들의 내용의 간결한 요약을 포함합니다. 그래서 그것을 클릭하지 않고도 무슨일이 일어날지 알 수 있습니다. 객체는 HTML 엘리먼트, 숫자, 문자, 함수, 배열, 객체, 그리고 null값을 쉽게 구별할 수 있도록 색상이 입혀져 있습니다.

원하는 대로 수정

단순히 DOM을 보기만 한다면 별로 즐겁지 않습니다, 때론 그것을 변경하고 싶습니다. 트리에서 어떤 줄에서든 공백에 더블클릭을 하면 작은 에디터가 나타나며 그것으로 변수의 값을 변경할 수 있습니다.

잊지마세요, DOM 에디터는 JavaScript 커맨드라인의 축소형입니다. 이것은 당신이 원하는 그 어떤 JavaScript 표현도 쓸수 있다는 것을 의미합니다. 엔터키를 누르면 값이 실행되고 결과는 변수에 할당되어집니다.

자동완성

자동완성 기능을 사용한 DOM의 수정은 더욱 쉽습니다. tab키를 사용하여 객체 속성의 이름을 완전히 나타낼수 있습니다. 사용가능한 값들의 세트를 계속해서 이동합니다, 그리고 shift-tab을 사용하면 이전값으로 이동할수 있습니다.

자동완성기능은 다양한 곳에서 작동합니다. 타이핑하기 전에 tab키를 누르면 전역 변수의 값들을 순환해서 이동합니다. "document.b" 이렇게 타이핑을 한 후에 tab키를 누르면 "b"로 시작하는 모든 속성을 순환해서 이동합니다. "document.getElementsByTagName('a')[0]." 과같은 표현식에서도 tab키를 누르면 문서의 첫번째 링크에 대한 모든 속성값을 볼 수 있습니다.

리로딩시 복구

많은 클릭을 하였지만, 당신이 찾는 DOM객체가 결국 사라진 것을 보았습니다. 에디터에서 몇 줄을 작성하고 페이지를 리로딩 해야할 때 이 특정 객체에 고정되어 보고 싶습니다. 걱정하지 말세요, Firebug는 리로딩된 후에 다시 그 객체로 찾아갈 필요가 없습니다. 페이지가 리로딩되어도 객체의 전체경로와 스크롤바의 위치를 복원합니다.

경로 따라가기

탐색기의 좌측영역을 클릭하면, Firebug는 해당 창에서 객체를 확장하지만, 전체창에서 객체를 보고 싶을때는, 오른쪽에 있는 영역의 객체를 클릭하면 됩니다.

객체를 클릭할때마다, Firebug는 툴바에 그 경로를 적습니다. 이 경로는 그 객체가 위치한곳까지 접근할수 있는 경로를 알려줍니다. 그 부분중에 특정 부분을 클릭해서 곧바로 그곳으로 이동할 수 있습니다.

JavaScript 코드 탐색기

DOM 탐색기는 디버그 하기 위해서 찾고자 하는 JavaScript 함수를 찾을때에도 아주 좋은 방법입니다. DOM 탐색기에서 함수에 클릭을 하면, Firebug는 Script탭으로 이동해 그 함수에 하이라이트표시를 합니다.