이 글은 Paul Roget의 Firefox Developer Tools: Episode 27 – Edit as HTML, Codemirror & more의 한국어 번역본입니다.

Firefox 27이 Aurora 배포 채널에 포함되었습니다. 여기서 Firefox 개발자 도구의 새로운 기능을 소개하려고 합니다.

JS 디버거: DOM 이벤트 Break

이제 수동으로 breakpoint를 지정할 필요없이 자동으로 여러 DOM 이벤트에 break를 걸 수 있습니다. 디버 창의 가장 오른쪽 상단(search 박스 바로 오른쪽)에 있는 “Expand Panes” 버튼을 눌러보면 이벤트 탭이 나타날 것입니다. 목록에 있는 이벤트 이름을 누르면 자동으로 다음번에 이벤트가 호출될 때 break가 걸립니다. 이벤트 탭에는 현재 페이지의 소스코드에 잡혀있는 리스너 함수들만 보여집니다. “Mouse”나 “Keyboard”같은 큰 분류를 클릭하면, 해당 분류에 관련된 모든 이벤트들이 선택됩니다.

Inspector 개선

웹 개발자 분들로부터 많은 피드백을 듣고나서 Inspector의 많은 점들을 개선시켰습니다:

Edit as HTML

이제 Inspector에서 엘리먼트를 오른쪽 클릭해서 에디터를 열어 해당 엘리먼트의 outerHTML을 편집할 수 있습니다.

기본 컬러 포맷 선택하기

Option 창에서 기본 컬러 포맷을 설정할 수 있습니다:

컬러 스와치(color swatch) 미리보기

Rules 창에서 컬러 스와치 미리보기가 가능합니다:

배경 이미지 URL에서 이미지 미리보기

많은 요청이 들어왔던 기능으로 배경 이미지 URL에서 이미지 미리보기가 가능합니다:

추가 개선사항으로,Inspector 상에서 변형된 DOM 엘리먼트들에 대해 강조 표시가 됩니다

조만간 열릴 tooltips에서 더 많은 것들을 확인하세요. 그리고 언제든지 원하는 개선사항들이 있다면 마음껏 올려주세요!

Codemirror

Codemirror는 웹 사이트 상에서 사용되는 유명한 HTML5 기반의 코드 에디터 컴포넌트입니다. Codemirror는 커스터마이징이 가능하며 테마 변경도 가능합니다. 이제 Firefox 개발자 도구는 다양한 부분에 Codemirror를 사용하고 있습니다: Style 에디터, 디버거, Inspector (Edit as HTML)와 Scratchpad.

Option 창에서 사용자는 사용하고싶은 테마(dark 혹은 light)를 고를 수 있습니다.

웹콘솔: Reflow 로그 기록하기

“reflow” 로그 기록을 위해, 콘솔 텝에 있는 “CSS” 메뉴에서 “Log”에 체크합니다. 이제 “reflow”가 발생하는 매순간 이 “reflow”가 발생하는 JS 함수의 이름이 로그에 찍힙니다.(JS에 의해 발생된 것이라면).

이상, 이번에 알려드릴 새로운 기능들이였습니다. 새로운 개선사항들이 맘에 드시길 바랍니다!