FireFox 부가기능

현재 쓰고 있는 부가 기능은 Firebug, Html validator, QuickJava, Wave Toolbar, web Developer, YSlow 입니다.

Firebug 와 Html validator는 이미 많이 쓰고 있기 때문에, 설명하지 않겠습니다.

QuickJava

JS = JavaScript
J = Java
F = Flash
SL = SliverLight 
I = image
CSS = Cascading Style Sheet (토글)

위 와 같은 의미를 담고 있으며, CSS의 경우 한번의 토글로 페이지의 CSS를 껏다 켰다 하는 기능을 쓸수 있습니다.
나머지 JS,J,F,SL,I 등은 클릭하면 빨간색으로 변하는데, 이후 새로고침을 해주면, 그페이지 에서 해당기능을 끈상태로 페이지가 로드 됩니다.

예를 들어 CSS를 끈다면, 아래 그림과 같이 나오게 됩니다.
클릭한번으로 문서의 구조를 파악할수 있고, 논리적인 마크업을 하는데 도움을 줄수 있습니다.
다른기능들도, 쉽게 기능들을 꺼보고 테스트 해볼수 있어 좋은 것 같습니다.

WAVE Toolbar (http://wave.webaim.org/toolbar)

 
1. Erros, Features, and Alerts 
문서의 구조와, 오류, 경고 등을 보여줌으로써, 웹표준 웹접근성에 필요한 부가기능 입니다.
누르게 되면 빨강,노랑,초록색 으로 구분이 되는데, 그중 빨강색은 오류, 노랑색은 경고, 초록색은 통과 라고 보시면 편하실것 같습니다. 마우스를 위에 올리면 설명도 볼수 있습니다. 

2. Structure/Order
문서의 구조와, 마크업의 순서를 확인 할 수 있습니다.

3. Text-only
말그대로 텍스트로 보여줍니다. 조금 특이한 것은 이미지를 IMAGE:"네이트" 와 같은식으로 보여주고 이미지에 링크가 있을 경우, 
[LINKED IMAGE MISSING ALT: "http://image.nate.com/img/cms/content_pool/2011/07/%EC%A7%80%EC%8B%9D.gif" - link to http://ask.nate.com/] 와 같이 보여줍니다.

 

 

 4. Outline
페이지의 헤딩구조를 보여줍니다.

 
5. Reset Page : 페이지를 원래 상태로 되돌려 줍니다.


YSlow (웹페이지 성능분석)

Yslow부가기능을 깔면 해당 페이지의 로딩 속도를 알수 있습니다.

자세한 내용이 있네요 : http://trend21c.tistory.com/291