[Tool]Firefox 11의 새로운 개발자 도구의 Tilt 기능..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

얼마전 Firefox 11이 릴리즈되었습니다. Firefox 11에 개발자도구는 이제 Firebug가 꼭 필요하지 않을 정도로 강력해 졌습니다. 굳이 Firebug가 있는데 내장 개발자 도구를 이렇게 강력하게 할 필요가 있나 싶기도 하지만 크롬을 쓸 때 느끼는 것처럼 기본적으로 설치되어 있으면 좋기는 합니다.(특히 다른 사람의 PC에서 디버깅을 해줘야 할 때 유용합니다.)

파이어폭스 11의 메뉴에 가면 FIrebug외에 개발자 도구가 추가된 것을 볼 수 있습니다.(그동안 Firebug 위주로만 써왔기에 정확하진 않지만 개발자도구는 이전 버전부터 계속 추가되기 시작한 것으로 알고 있습니다.) 11버전부터는 CSS 코드를 라이브로 수정할 수 있는 스타일 에디터가 추가되었습니다. CSS를 보면서 바로 수정할 수 있고 수정된 내용을 곧바로 저장됩니다. 이외에서 애드온 싱크기능(이건 오랫동안 바라던 기능)도 추가되었지만 가장 인상깊은 기능은 작년에 슬쩍 공개되었던 Tilt 기능입니다.

메뉴의 개발자도구에서 Tilt를 클릭하거나 화면에서 우클릭을 한 뒤 요소검사를 하면 나오는 하단 바에서 3D를 클릭하면 위와 같이 웹페이지를 3D로 구조화해주는 화면을 볼 수 있습니다. 이는 WebGL 기반으로 구현되어 있으며 소스로 보는 것보다 한눈에 웹사이트의 구조를 파악할 수 있습니다. 당연히 3D이므로 여러가지 방향으로 돌려가면서 볼 수 있습니다.

위는 페이스북은 Tilt기능으로 확인한 모습입니다. 작년에 프리뷰에서 보고 놀랬었는데 금새 정식릴리즈에 추가되어 들어갔습니다. Tilt를 이용해서 개발이나 디버깅은 아직 안해보았지만 3D로 놔둔채로 각 요소를 클릭해서 마크업이나 CSS를 확인할 수 있기 때문에 구조를 파악하고 수정해 가는데 꽤 유용하리라 생각합니다. 잘 감이 안오시는 분은 아래 동영상을 보시면 더 쉽게 파악하실 수 있을 겁니다. [별도의 동영상을 갖고 오질 않아서 해당 부분은 삭제 했다.]

My Comment..
요새는 파이어폭스를 사용을 안한다.. 하지만, 과거 파이어버그가 나왔을 때 신기해서 한 때는 많이 사용했었는데 위와 같은 3D 로 볼 수 있는 기능이 있었다는 것은 금시초문이었기 때문에.. 신기해서 글을 갖고 왔다..

[JS]파이어폭스에서 button태그에 onclick이 안먹히는 문제..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

크로스브라우징에 대한 부분이다. 지금 멀 만들고 있는데 당장 급한 분위기는 아니고 혼자만들고 있고 해서 개인적인 욕심으로 XHTML을 지키고 브라우저 호환성을 좀 유지하면서 만들고 싶었다. 그래서 기본적인 기능 구현하면서 파이어폭스(Firefox)에서 테스트를 돌렸는데 특정버튼들이 먹히지 않는 문제점을 발견했다.

Html

<script type="text/javascript">
    function testMethod()
    {
        document.location.href="file.asp";
    }
</script>

<button onclick="testMethod();">눌러</button>

(평소처럼 복사해 온게 아니라 틀리지 않았나 몰라.. ㅡ..ㅡ)

어쨌든 로직은 필요없으니 보자면 저런 구조다. 버튼을 클릭하면 자바스크립트 메서드가 호출되는 상황.

IE에서는 아무런 문제가 없었다. 그런데 파이어폭스에서는 아무런 동작도 되지 않았다. 계속적인 테스트.....

일단 펑션자체는 잘 먹었다. <a>로 태스트했더니 location.href는 잘 동작했는데 <button>에서만 동작을 안해서 처음에는 onclick가 안되는 줄 알았는데 또 다른 <button>에서 onclick으로 호출된 펑션이 폼.submit의 형태를 띄고 있는 건 또 잘 작동이 됐다.

location.href가 안되는거냐... onclick이 안되는거냐... 엄청 고민했다.. 찾고 또 찾고....

역시 구글링... 구글링으로 찾은 외국사이트가 날 살렸다. 해결법과 이유까지 확실히....

파폭에서 <button>은 기본적으로 submit의 형태로 동작을 한다. 그래서 submit이 있는 경우는 제대로 동작하지만 submit이 없으니 동작이 무시되어 버린 것이다.

해결책은 return false;가 있으면 된다. 펑션안에 있어도 되고.... 호출할 때 onclick="testMethod();return false;"와 같이 써주거나 onclick="return testMethod();"로 써주면 정상적으로 작동한다.


덧) 이거 하는데 2시간도 더 걸렸다.. ㅡ..ㅡ 근데 평소 올블에서의 분위기로 느껴지던 웹표준과 크로스브라우징.... 막상 자료를 찾으니까 자료가 거의 없다.. ㅠ..ㅠ 아직 내가 체감하는것 만큼의 중요한 이슈가 아닌건가? ㅡ..ㅡ