이 글은 Heather Arthur와 Robert Nyman [Editor]이 쓴 WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34의 한국어 번역본입니다.

Firefox 개발자 도구의 새로운 기능들이 이제 막 Aurora 채널에 반영됐습니다. 지금 당장 새로운 기능들을 써보고 싶다면 Aurora 버전을 써보세요. 이 새로운 기능들은 11월에 릴리즈되는 Firefox 34 버전에 포함될 것입니다. Firefox 새버전을 통해 새로운 도구들(저장소 검사기, 웹IDE), 새로운 프로파일러, 기존 도구들의 개선된 모습을 만날 수 있습니다.

웹IDE

웹IDE는 브라우저 안에서 앱을 개발할 때 쓰는 새로운 도구입니다. 이번 릴리즈부터 웹IDE가 기본 활성화되어 제공됩니다. 웹IDE를 이용하면 템플릿을 기반으로 새로운 Firefox OS 앱(그냥 웹앱일 뿐입니다)을 만들거나, 이미 만들어진 앱 코드를 열어 볼 수 있습니다. 그리고 거기에서 앱 파일을 수정할 수 있습니다. 웹IDE에서 한번만 클릭하면 앱을 시뮬레이터 위에서 실행시킬 수 있고 한번만 더 클릭하면 개발도구를 이용해서 디버깅할 수 있습니다. Firefox의 “웹 개발 도구” 메뉴에서 웹IDE 를 실행시키세요. (관련문서)

저장소 검사기(Storage Inspector)

웹 페이지가 쿠키, localStorage, sessionStorage, IndexedDB에 저장한 데이터를 볼 수 있는 새로운 패널이 추가됐습니다. 이 기능은 Girish Shama가 주로 개발했습니다. 개발자 도구 설정 > “기본 Firefox 개발자 도구” > “저장소(Storage)” 항목을 체크해서 저장소 패널을 활성화시키세요. . 현재는 이 패널이 읽기-전용 기능만 지원합니다. 다음 릴리즈 때는 데이터를 편집하는 기능도 계획하고 있습니다. (관련문서) (개발노트) (UserVoice 요청)

jQuery 이벤트

검사기(Inspector)에서 팝업되는 이벤트 리스너가 이제 jQuery를 지원합니다. 그러니까 팝업에서 jQuery.on() 코드로 부여한 이벤트 처리 함수를 볼 수 있습니다. 지금까지는 팝업을 통해 jQuery의 랩퍼(wrapper) 함수만 볼 수 있었습니다. 이 글을 보면 보다 자세한 정보와 다른 프레임워크를 지원하는 방법도 알 수 있습니다. (개발노트)

Iframe 스위처(switcher)

새로운 프레임 선택 메뉴를 이용해서 디버깅할 프레임 창을 변경해보세요. 프레임을 변경하면 해당 iframe을 디버깅하기 위한 검사기, 콘솔, 디버거 등 모든 도구들이 전환됩니다. 프레임 선택 버튼을 추가하려면 개발자 도구 설정 > “사용 가능한 도구상자 버튼” > “iframe 선택하기” 항목을 체크하세요. (관련문서) (개발노트)(UserVoice 요청)

새로운 프로파일러

개선된 JavaScript 프로파일러가 새롭게 변경된 “퍼포먼스(Performance)” 탭에 보여집니다 (종전까지 “프로파일러” 탭이었습니다). 프레임레이트(frame rate) 타임라인과 거기에 표시되는 “네트워크”와 “그래픽” 같은 카테고리들이 새로 프로파일러에 추가됐습니다. (관련문서) (개발노트)

console.table()

콘솔에 테이블 형태의 로그를 출력하고 싶다면, JavaScript 코드 어디에서든 console.table() 명령을 호출하세요. 모든 객체, 배열, Map, Set을 로그로 출력할 수 있습니다. 테이블의 헤더를 클릭하면 테이블 컬럼이 소팅됩니다. (관련문서) (개발노트)

셀렉터 미리보기

검사기(Inspector)와 스타일 편집기(Style Editor)에서 마우스를 움직이면(hovering) 셀렉터 조건과 일치는 페이지 위의 모든 노드(node)들이 하이라이트됩니다. (개발노트)

기타

• 콘솔 위치 기억 – (ESC를 눌러서) 별도의 창으로 열던 콘솔을 이제 도구 메뉴를 이용해서도 별도의 창으로 열 수 있습니다. 이제 도구 메뉴에서 콘솔을 열면 콘솔이 닫혔던 상태 그대로 다시 열립니다. (개발노트)
• 웹 오디오 – AudioParam 연결 – 웹 오디오 편집기가 이제 AudioNodes에서 AudioParams으로 가는 연결을 표시합니다. (개발노트)

이번 릴리즈에 포함된 모든 신규 기능과 수정 코드를 만들어낸 41명의 공헌자 분들께 특별한 감사를 전합니다.

이 블로그 기사에 댓글을 남기거나, 트위터 @FirefoxDevTools 계정으로 의견을 보내거나, 개발자 도구 피드백 채널에 새로운 의견을 제안해주세요. 프로젝트에 기여하고 싶다면 참여하는 법을 확인하세요.