[Safari] 디버깅할 때 onload가 호출되지 않는다면 태그를 확인해보세요.

Safari에서만 유독 onload가 호출되지 않아서 이것 저것 테스트를 했었는데 알고보니 </div> 태그가 하나 더 들어가 있더군요. (엄끼님 고생 많으셨습니다. (__)) Firefox나 IE에서는 태그 에러에 대한 예외 처리가 되어 있는데 Safarid에서는 onload 자체가 호출이 안되는군요.

오늘의 교훈
- Firefox나 IE에서는 잘 되던데 Safari나 Opera에서 onload가 호출되지 않으면 태그를 확인해보세요.

추가:

1. <div />와 같이 잘못된 태그가 들어간 경우 Safari에서는 아예 보여지지 않습니다.
<2. iframe src="about:blank"></iframe> about:blank에 ;가 잘못 들어간 경우도 처리가 안되네요.

Safari버그 - element의 attributes 속성

Safari의 버그라기 보다는 다른 브라우져와 다른 점이 더 가깝겠네요.
특정한 element에 사용자가 정의한 attribute를 집어넣고 DOM으로 가지고 오려고 가정을 해보구요.

예를 들자면, 다음과 같이 되겠네요. (bookid가 사용자 정의 id가 됩니다.)

<img  alt="..." src="..." bookid="..." />

이 태그를 JavaScript에 접근하려고 할 때, 사용할 수 있는 방법 중 하나가 attributes 속성입니다.
일반적인 브라우져로는 attributes를 사용하여서 img 태그의 alt, src 또는 bookid를 접근할 수 있습니다.

var bookid = imgTag.attributes['bookid'].nodeValue;

attributes는 NamedNodeMap 인터페이스를 구현하고 있기 때문에 attributes['bookid']를 통하여 (Attribute) Node에 접근하고 이 Node의 nodeValue값을 통해서 값을 사용할 수 있습니다.

그런데, Safari 2(PowerPC)에서 테스트를 하다보니 동작을 하지 않아서 확인해보니 Safari 2에서는 사용자가 정의한 속성에 대해서는 element.attributes를 통하여 접근을 허용하지 않더군요. getAttribute()는 허용을 합니다.

※ Safari 3은 테스트를 못해봤습니다.

Safari버그 - 화면에 보이지 않는 Textarea에 값을 설정하는 경우..

• Safari 버전: 2.0.3
  
• 플랫폼: OS X 10.4

팝업을 띄워서 Textarea에서 값을 받아 설정하는 프로그램(텍스트 + html)을 짜서 Safari에서 테스트를 하는데 안되더군요.
처음에는 코드를 잘못짰나 싶어서 다시 보았는데 Safari의 버그더군요.

Element.show(dialog);
form.dialog_form.textarea.value = "..."

와 같은 코드가 원래 사용한 코드였습니다. 실제로는 좀 더 많은 코드가 사용되기는 합니다만.. 다이얼로그가 화면에 출력되기 전에는 form.value의 값이 동작하지는 않더군요.

그러나, 다이얼로그가 뜬 다음에 주소창에 javascript:form.dialog_form.textarea.value = "..."를 설정하는 경우는 정상적으로 값이 설정이 되었습니다. 구글에서 검색해보니 관련한 버그에 대한 내용이 좀 나오더군요.

Element.show(dialog);
form.dialog_form.textarea.innerHTML = "<span style="color:red;">메모</span>입니다."

저의 경우 이를 해결하기 위해서 innerHTML을 사용해봤습니다만, 동작을 하지 않더군요. 텍스트를 저장하는 것은 가능하였습니다만, html을 입력하는 경우에는 동작을 하지 않더군요. (<span>~</span>은 잘리고 입니다만 나오더군요.)

Element.show(dialog);
form.dialog_form.parentNode.innerHTML = "<textarea><span style="color:red;">메모</span>입니다.</textarea>"

해결책으로 삼은 것은 textarea의 parentNode의 html을 바꿔버리는 것으로 해결은 했습니다만...


이런 버그가 있더군요 =.= ;;

관련 자료: Brian Hartsock's Blog - Safari Textarea bug

Safari에서 디버깅하기

이전에 발생하였던 Safari의 버그를 무시무시한 alert으로 잡은 후에 (일단 급한 불은 꺼야겠죠.) Safari에서 디버깅은 어떻게하나 검색을 해보았습니다. 답은 있더군요. (무식이 죄죠.. ^^;;)

먼저 터미널을 연다음에 "defaults write com.apple.Safari IncludeDebugMenu 1"를 터미널에 입력하고 엔터를 친 후, Safari를 다시 띄웁니다.

Safari를 다시 띄우면, Debug항목이 새로 추가된 것을 보실 수가 있습니다.

이 Debug항목을 누른 다음에 Show JavaScript Console을 클릭하시면 JavaScript Error Log를 아주 쉽게 보실 수가 있습니다. 이 외에도 DOM Tree등 여러 기능들을 제공하고 있으니 참고하시면 좋을 것 같습니다.

출처 :

Apple Developer Center - How do I debug JavaScript in Safari

P.S  How do I debug JavaScript in Safari에는 window.console을 이용하여서 JavaScript에러 이외에도 원하는 로그를 출력할 수 있는 방법이 소개되어 있으니 참고해보시는 것도 좋을 것 같습니다.

[JavaScript] Safari에서만 나는 에러

오늘 디버깅 작업을하고 있었는데, 특이한 문제가 Safari에서 발생했습니다.

<script type="text/javascript"src="prototype.js"></script>
<script type="text/javascript" type="text/javascript">
    var Sample = {
        testFunction: function testFunction(){
            alert("testFunction");
        }
    }

    function load(){
        Sample.testFunction();
    }
    Event.observe(window, "load", load);
</script>

이전에 php 페이지에서 사용되었던 testFunction 메소드를 Sample의 mtehod로 넣는 과정에서 function의 위치는 적절히 변경하였지만, function뒤의 testFunction을 삭제하지 않아서 발생한 버그입니다.

이러한 버그가 특이하게도 Firefox와 IE에서는 정상 동작을 하는게 문제였습니다.
제가 사용하는 JSEclipse에서도 에러표시가 나지는 않더군요. 그러나, Safari에서는 에러가 나더군요.

그것도, 위와 같은 내용이 js파일에 포함되어 있는 경우 해당하는 js파일 자체를 레퍼런스할 수 없다고 나와버리더군요. 그래서 메소드 하나하나를 alert으로 추적해야하는 암울한 작업을 수행해야 했습니다.

Safari 테스트를 하실 때, js파일이 정상적으로 script태그로 썼는데도 불구하고 레퍼런스할 수 없다고 나오신다면 위의 케이스를 참고하셔서 소스 파일을 확인해보시는게 좋을 것 같습니다. ^^



P.S.1  저같은 경우에는 JavaScript로 개발을 할 때, Firefox는 Firebug와 Web Developer를 사용하고, IE에서는 Developer Toolbar를 사용하고 있습니다. Webkit에서는 Drosera를 사용하고 있구요.

P.S.2  이외에도 몇가지 문제가 발생했었는데요. id가 중복되는 경우 Firefox와 IE에서 에러는 발생하지 않는데요. Safari에서는 id 중복이 발생하는 경우 DOM hierarchy에 대한 에러 메시지를 출력합니다.