IETester : IE 버전 별로 테스트하는 도구

IE 디버거인 IE debugger DebugBar를 만든 Jean-Fabrice RABAUTE씨가 IETester라는 솔루션을 공개했습니다. (from Ajaxian)

아직 버전이 0.2.2라서 아래의 문제점들을 가지고 있지만 IE 각 버전 별 테스트를 하나의 브라우져(또는 프로그램)안에서 실행할 수 있게 해주는 강력한 장점(Multiple IE도 지원이 되기는 합니다만... 예상치 못한 에러가 발생하여 종료되는 경우가 많이 있기는 합니다;;)을 가지고 있습니다.

• 화면을 리사이징했을 때 화면이 사라지는 문제
  
• 브라우져의 앞/뒤로 페이지 이동할 때 오동작하는 문제
  
• 포커스가 적절히 동작하지 않는 문제
  
• 자바 애플릿이 잘 동작하지 않는 문제
  
• 플래시가 IE6에서 잘 동작하지 않는 문제

등을 가지고 있습니다.

테스트 시 상당히 유용하게 쓸 수 있는 도구인 것 같습니다. 아쉽게도 한글버전은 제공되지 않습니다.
각 버전은 탭 타이틀의 좌측에 파란색으로 써진 숫자가 버전을 의미합니다. 5.5, 6, 7, 8 beta1을 지원합니다.

Options > Internet Explorer Options를 누르면 IE의 옵션들을 설정하는 것도 가능합니다.

출처: IETester, Testing IE Versions Just Got a Little Easier via Ajaxian

Flash와 Proxy의 관계..

요즘 자주하는 실수인데요...
웹 개발을 할 때, Proxy를 통해서 개발 서버에 접속을 할 때가 있습니다. 저의 경우 Firefox를 주로 사용하기 때문에 Firefox의 SwitchProxy를 사용하는데요. 이렇게 접속한 후 Flash를 테스트해보면 정상적으로 동작하지 않는 경우가 있습니다.

그 이유는 바로 Flash가 IE의 Proxy 설정에 따라 동작하기 때문입니다. (가야님 고마워요~)
뭐이런게 다있어~ 하고 싶지만.. 어쩌겠습니까!!

혹 안되시면 Proxy 설정 꼭 확인해보세요. 안그러면 무안당해요 ㅠㅠ

IE6, https에서 Security Warning이 발생하는 경우

https를 사용하는 경우 "This page contains both secure and nosecure items. Do you want to display the nosecure items? " 또는 "이 페이지는 보안된 항목과 보안되지 않은 항목을 모두 포함하고 있습니다. 보안되지 않은 항목을 표시하겠습니까?" 라는 메시지가 나오는 경우...

1. HTTPS 안에 있는 파일들에서 다른 리소스를 접근할 때
1. https를 사용해야하는데 http를 사용하거나
2. https의 위치 외의 곳에 있는 파일에 접근하는 경우 등
   
2. HTTPS 안의 소스에서 iframe을 가지고 있을 때(src에 절대 경로 사용시 https사용해야 함)
1. iframe에 src가 없는 경우
   
2. iframe에 src가 있으나 src의 파일이 없는 경우
   

출처:

• PRB: Security Warning Message Occurs When You Browse to a Page That Contains an IFRAME Through SSL in Microsoft

P.S. 관련 참고자료 나미님이 알려주신 skc101님의 "이 페이지는 보안된 항목과 보안되지 않은 항목을 모두 포함하고 있습니다."

fileSize

IE에만 해당하는 얘기지만 파일을 업로드하기 전에 document나 image의 파일 사이즈를 알려주는 속성이 있습니다. fileSize가 그 속성인데요.

document.fileSize   // 해당하는 html 페이지의 size를 리턴합니다.
document.images[i].fileSize   // document.images를 통해서 접근하는 image의 fileSize를 알 수 있습니다.

quirksmode에서는 document.fileSize + document.images[0..length].fileSize를 합한 값을 페이지의 총 크기로 계산하더군요. (혹시나 싶어서 덧붙이지만, images[0..length].fileSize가 값을 가지고 오는 것은 아니구요. -쉬운 표기를 위해서- images의 루프를 돌면서 각 image의 fileSize를 가지고 와야합니다.)

출처: quirksmode의 File size

prototype.js+script.aculo.us 사용할 때 IE에서 stack overflow at line 0 에러가 발생한다면?

Firefox에서 Prototype.js를 1.5.1.1로 업데이트를 하고 Script.aculo.us를 사용하여 작업을 어느 정도 완료하고 IE에서 테스트를 하였습니다. 이 순간 팝업창이 뜨면서 Stack Overflow~ 가 발생하더군요.

-_-;; 이런 무시무시한 에러를 브라우져 상에서 본적이 없었기에.. 어제 퇴근 직전에 좌절모드로 들어갔습니다..
아침에 출근해서 검색해보니.. prototype 1.5.1버전을 사용하려면 script.aculo.us 1.7 beta3을 사용해야 한다고 합니다.. 그렇지 않은 경우에 stack overflow 에러가 발생할 수 있다고 합니다.

(개인적인 추정으로는 rendering관련 메소드가 문제가 아닌가 생각합니다만 - diff에서 많이 바뀌었기 때문 -_-;;)

개발자의 자세로는 원인을 규명하는게 바람직하지만... 바쁜관계로.. -_-;;;

짤방 이미지 출처 : 마음의 소리..

IE에서 Prototype.js라이브를 사용하여 Ajax로 통신할 때 느리다면..

prototype.js라이브러리를 사용하여 Ajax로 데이터를 전송하는데 IE에서 시간이 너무 걸리는 문제가 발생하였습니다. Firefox에서는 2초를 걸리던게, IE에서는 무려 89초가 걸리더군요.

위대한 alert()를 사용하여 시간을 측정해보았는데, 다음의 코드에서 걸리더군요.

if (typeof this.options.parameters == 'string')
    this.options.parameters = this.options.parameters.toQueryParams();

추적을해보고 이리저리 시험을 해본 결과 Ajax.Request를 사용할 때 parameter로 준 값이 문제가 되었습니다.
parameter의 값을 string타입으로 encodeURIComponent를 사용하여 encoding하고 넘겨준 경우

1. this.options.parameters.toQueryParams()를 거치면서 decoding 후,
   
2. Hash로 바꾸게 됩니다.

동일한 코드를 Firefox 및 IE에서 타지만, IE에서만 유독 decoding시에 많은 시간이 소모되더군요.
해당부분의 경우 Hash로 넘겨주게 되면(encoding안 한 상태에서) 88초 정도의 시간을 줄일 수 있었습니다.

P.S. 이문제를 해결하기 위해서 시간을 출력하는 코드를 찾아봤는데 Date 클래스의 parse()가 유용하더군요.

Date.parse(new Date().toString());

출력되는 값은 milliseconds단위로 출력되게 됩니다.

P.S.2 이자리를 빌어, 도움을 주신 J모 과장님과 L모 대리님께 감사를, 저 때문에 고생하신 개발팀원 여러분께 사과를 (__) ....

P.S.3 Ajax의 parameters로는 URL-encoded string과 Hash-compatible object를 사용할 수 있습니다.

IE에서 디폴트 폰트는?

이번에 회사에서 UTF-8변경 작업을 하다보니 '폰트가 변경되었어요'라는 문의가 들어왔습니다. 확인해보니 (다른분이 하셨답니다.) css를 따로 적용하지 않은 곳이라서 인코딩에 영향을 받는게 아닌가 하는 얘기가 나와서 몇가지 실험을 해봤습니다.

textarea를 html 페이지 상에 삽입한 다음에 content-type을 안준경우와 euc-kr과 utf-8로 설정을 한 경우 세가지를 놓고서 실험을 해봤습니다.

head태그에는 아무것도 적용하지 않은 경우 디폴트로 'Courier New'가 설정되었습니다.
{저의 경우에는 ie에서 디폴트로 UTF-8로 받도록 설정을 하였습니다. }

당연히~ UTF-8로 Content-type을 설정한 경우에도 Courier New가 나오겠죠.마지막으로 euc-kr로 설정한 경우입니다. 이 때는 인코딩이 한글로 설정되고 '굴림체'로 설정이 됩니다. 별 차이가 없는 듯 하지만... 어떤 분에게는 중요한 차이일 수 있습니다.

ABC
ABC

P.S. 영어모양이 눈에 띄게(?) 차이가 나죠.. ^^