개발자 도구

슬라이드를 전환하려면 페이지 아래로와 페이지 위로를 누르십시오.

Opera는 웹 개발자에게 도움이 되는 몇 가지 도구를 제공합니다.

개발자 콘솔은 개발 또는 디버깅 중 웹 페이지를 분석 및/또는 대화식으로 수정하는 도구인 반면, 소스보기 프로그램은 웹 페이지의 소스 코드를 검사하고 신속하게 변경하는 보다 단순한 도구입니다.

개발자 콘솔

도구 > 고급설정 > 개발자 도구 메뉴 항목을 차례로 선택하면 Dev.Opera 웹 페이지가 열리는데, 이 페이지에는 몇 가지 JavaScript 어플리케이션에 대한 링크가 포함되어 있습니다. 개발자 콘솔은 이러한 어플리케이션 중 하나로 다른 어플리케이션과 마찬가지로 Opera 도구모음에 끌어다 놓을 수 있습니다. 개발자 콘솔을 열면 분석 대상 웹 페이지의 상단에 DOM, JS, CSS, HTTP 및 정보의 다섯 개 탭과 함께 작은 창이 나타납니다.

개발자 콘솔은 "문서"에서 축소된 노드 목록과 함께 DOM 탭에서 열립니다. 더하기 기호를 클릭하여 목록을 확장합니다. 노드를 클릭하면 웹 페이지가 잠깐 깜빡인 다음 해당 노드와 관련된 영역이 표시됩니다.

또는 웹 페이지 어느 곳에서나 클릭하면 강조된 페이지 영역과 관련된 노드와 함께 DOM 노드 목록이 열립니다. 관련 영역을 찾으려면 Shift 키를 누른 상태로 마우스를 이용해 페이지를 검색합니다.

다음은 DOM 탭의 핵심 기능입니다.

"검색"을 사용하면 표준 CSS 선택기로 모든 노드 클래스에 대한 DOM 트리를 검색할 수 있습니다. 예를 들어, p > a를 사용하여 부모-자식 관계를 표시하고, #menu를 사용하여 ID를 찾을 수 있습니다.
"스냅숏"은 전체 DOM 스냅숏을 제공합니다.

개발자 콘솔을 사용하여 웹 페이지를 대화식으로 수정할 수 있습니다. DOM 탭의 "제거" 버튼을 사용하여 노드를 제거할 수 있지만, 모든 CSS 속성은 적절한 스타일 시트에 대한 "규칙 보이기" 버튼을 누른 후 CSS 탭에서도 편집할 수 있습니다. 변경 결과는 즉시 표시되며 나중에 사용하기 위해 내보낼 수 있습니다.

개발자 콘솔에 대한 자세한 내용을 보려면 Dev.Opera를 참조하십시오.

소스보기 프로그램

Opera에는 웹 페이지를 분석하고 수정할 수 있는 보다 단순한 도구인 소스보기 프로그램이 포함되어 있습니다. 현재 웹 페이지의 소스 코드를 확인하려면 보기 > 소스로 이동하거나, Ctrl+F3을 누르거나, 키를 누른 상태로 마우스 오른쪽 단추로 페이지를 클릭하여 "소스"를 선택합니다.

소스보기 프로그램은 탭 표시줄의 새 탭에서 열리고 소스가 더 잘 보이도록 구문이 강조됩니다. 페이지를 편집하려면 다음의 두 개의 옵션을 사용할 수 있습니다.

캐시에 저장한 다음 "변경 적용"을 클릭하거나 Ctrl+R을 눌러 적용된 변경 사항을 즉시 확인합니다.
"저장"을 클릭하거나 Ctrl+S를 눌러 선택한 위치에 저장합니다.

로컬에 저장한 문서를 편집하는 경우, "변경 적용"을 사용하면 변경 사항이 영구적으로 저장된다는 점에 주의하십시오.

외부 프로그램을 사용하여 소스를 보고 편집하려면 해당 프로그램을 프로그램 환경설정에 지정할 수 있습니다.