인터넷익스플로러가 7 버전 까지 나왔을 때, 파이어폭스는 한창 강세를 보이고 있었다. 파이어폭스의 점유율을 의식하여 부랴부랴 7 버전을 내 놓았으니 말이다.

언제부터인가 IE6를 버리고 파이어폭스를 쓰기 시작했는데, 그 때가 아마 본격적으로 웹개발을 시작하고 얼마 안돼서였을거다. 당시 파이어폭스의 확장기능에 한창 매료 되어서 헤어나올 수가 없었다. 그중 단연 최고는 파이어버그 라는 개발자도구 였다.

원하는 곳의 DOM 구조를 바로 파악할 수 있고, 파일을 변경할 필요 없이 실시간으로 수정하며 적용된 모습을 볼 수 있었다. CSS 수정, 적용이 바로바로 가능했고, 페이지 로딩속도 및 HTTP status 코드는 물론이고, 자바스크립트 디버깅까지 지원하여 이게 없으면 개발이 불가능할 정도였다.

파이어폭스가 버전업데이트가 되어서 파이어버그가 동작하지 않으면 파이어폭스 업데이트를 미룰 정도였다. (나말고도 많은 사람들이 그랬을거다) 1.4 버전인지 1.5 버전까지 사용하고, 요즘엔 잘 사용하지 않고 있어서 어떻게 발전 하였는지 잘 모르겠다. 

파이어폭스에서는 제대로 개발을 할 수 없는 환경으로 터전을 옮기고 나서 IE 에서 돌아가는 여러가지 개발자도구를 찾아서 사용해보았다. 파이어버그에 비하면 턱없이 부족한 툴 들이었지만, 어쩔 수 없이 불편함을 감수하고 사용했다.

그러다가 IE8 버전이 나오고, 새로이 추가된 개발자 도구 라는 것을 보고 커다란 발전에 기쁨의 눈물을 흘렸었다.

Dom 셀렉터, CSS 선택수정, 중단점을 삽입할 수 있는 자바스크립트 디버깅, 콘솔창 추가로 개발환경이 무척이나 편리해졌다. 이는 IE9으로 오면서 더욱 강력해 졌는데, 이에 대해서 소개를 해볼까 한다. (자바스크립트와 콘솔 위주로 감)


콘솔창

인터넷익스플로러를 실행하고 F12 를 누르면 아래와 같은 개발자 도구가 열린다.

2011:04:10 15:10:12


왼쪽 탭에는 HTML, CSS, 콘솔, 스크립트 등등이 있고, 이 선택에 따라서 오른쪽 탭 영역의 UI가 변경된다. 콘솔탭을 선택하면 빈 화면이 덩그러니 나타나는데, 맨 하단에 보면 뭔가를 입력할 수 있는 입력창이 존재한다.

2011:04:10 15:15:54


여긴 자바스크립트나 기타 DOM객체를 직접 입력하여 확인해 볼 수 있는 공간이다. 실제로 사이트가 전부 로드된 상태에서 콘솔창에 관련 객체 이름을 써 넣기만 하면 그에 따른 정보가 출력된다.

2011:04:10 15:18:16


테스트 페이지로 만든 곳의 this 객체 정보를 호출해봤다. 단지 this 라고만 입력했을 뿐인데, 현재 document의 this객체에 대한 정보가 나타난다.

테스트 페이지에 아래와 같은 HTML 태그를 추가했다.
2011:04:10 15:23:53
그리고 콘솔창에서 위 엘리먼트에 대한 객체 정보를 호출해보았다.


표준 HTML DOM method인 getElementById() 를 사용하여 객체를 호출하거나, 그냥 ID 값만을 입력하여 객체에 대한 정보를 확인할 수 있다.

이 콘솔창에서는 다른 콘솔창과 마찬가지로 페이지에 설정된 자바스크립트를 실행시킬 수 있는데, 방법은 매우 간단하다.

2011:04:10 15:36:01

 
위와 같은 자바스크립트 코드를 추가하고, 콘솔창에 함수 이름을 입력하면 바로 실행이 된다.

2011:04:10 15:37:11


여기 콘솔창에서 사용할 수 있는 여러가지 내장함수들이 존재 하는데, 이는 IE8은 물론이고 웹킷, 모질라계열에서도 비슷한 동작을 한다.

 window.console.log  console.log("로깅용 메시지")  로그 : 로깅용 메시지
 window.console.error  console.error("에러 메시지")  
 : 에러 메시지
 window.console.info  console.info("정보 메시지")  
 : 정보 메시지
 window.console.warn  console.warn("경고 메시지")  
 : 경고 메시지
 window.console.dir  console.dir(오브젝트)  오브젝트 내용이 출력
 window.console.assert  console.assert(식, "메시지")  식이 틀릴 경우 메시지가 출력
 window.console.clear  console.clear()  콘솔창의 내용을 모두 삭제함

콘솔창에서 사용할 수 있는 내장함수는 위와 같고, 각각 실행 하였을 때 나타나는 메시지 이다. 실제로 아래와 같은 코드를 작성하여 테스트를 해봤다.

2011:04:10 15:48:00


2011:04:10 15:49:43


결과창을 보면, 우리가 예상한 결과와 동일하게 출력된 모습을 볼 수 있다. console, 또는 window.console 이라고 입력하면 console에 포함된 메소드들이 출력되니 직접 입력해서 확인 해보자.

** 참고로 console.dir 은 IE9 에서 지원하는 신규메소드로 IE8에서 동작하지 않는다. console.dir(object); 로 실행 하며, 객체의 내용을 좀 더 상세하기 표현해 준다.

기존에 alert 과 document.write, iframe 등으로 디버깅을 하던 불편함은 콘솔창을 사용하면 말끔히 해결된다. 초반엔 익숙하지 않기 때문에 어색하겠지만 지속적으로 사용해보면 예전으로 다시 돌아가기 힘들어질 것이다. 

사용하지 않고 있던 사람들이라면 이번 기회에 한번 사용해보자. 이러한 콘솔창은 IE8 이상, 크롬, 사파리, 파이어폭스 에서 기본적으로 지원하고 있다.


2부. IE9으로 디버깅 하기 (2) - 자바스크립트 디버깅

신고
Posted by onionmen

댓글을 달아 주세요


마이크로소프트에서 IE 새버전인 IE9의 미리보기 3번째 버전을 공개하였습니다. 두달에 한번씩 새버전에 업데이트 되고 있는데, 벌써 3번째 프리뷰 버전입니다. 

업데이트 될 때마다 점점 성능이 좋아지고 있는데요. 이 상태로라면 정식버전이 정말 기대됩니다. MS는 제품을 출시할 때, 첫번째 제품은 말아먹고, 두번째 제품은 좀 괜찮고, 세번째 제품은 시장을 장악했죠. 그리고 운영체제와 브라우저는 한번 실패하면 한번 성공했죠.(일반적으로 실패라고 할만한 것은 아니지만)

개인적으로 IE8은 성공했고, IE7은 실패했다고 봅니다. 물론 IE6는 (이유야 어떻든) 성공했구요. 이런식이라면 IE9는 실패해야 하는데, 지금까지의 프리뷰를 보면 이번 IE는 실패할 것 같지 않네요.

  • 상호운용성 가능한 HTML 마크업
  • GPU를 사용한 렌더링
  • 그 외 성능향상

IE9에서 중점적으로 광고하고 있는 기능입니다. 요약하면 빠르면서도 표준을 준수하는 웹브라우저 인듯 한데요, 실제로 사용해보아도 상당한 체감성능의 향상을 느낄 수 있습니다. (이 부분은 직접 사용해 보셔아 느낄수 있겠네요)

ReMIX10 에서 발표된 내용과 난장세미나에서 발표된 내용을 토대로 간략하게 작성해보앗습니다.


  • 상호운용성
ACID 테스트가 프리뷰2 에서는 68점에 불과했는데(100점만점) 프리뷰3에서는 83점까지 상승.
DOM level2의 완벽한 지원, DOM level3의 지원
getElementsByClassName API를 지원 (기존까지 지원하지 않았다는 것이 놀랍네요.)


  • 속도
브라우저 속도 면에서는 파이어폭스보다 빠르고, 사파리와는 비슷하고, 크롬5 보다는 약간 느린 수준.
새로운 자바스크립트 엔진 챠크라를 사용하는데, 이 챠크라가 멀티코어 CPU를 사용하기 때문에 엔진의 성능이 대폭 향상시되었다고함.
자바스크립트 실행 및 각종 렌더링을 GPU의 도움을 받아서 수행함.
엔진의 코드 최적화를 통해 보다 높은 수준의 성능향상을 기대할 수 있다.


  • 향상된 개발자도구
IE8에 내장된 유용한 개발자 도구의 성능이 향상됨.
- 네트워크 모니터링 기능이 새로 추가되었습니다. 간단하게 사용할 때 유용할 듯 하네요. 회사에서는 httpwatch 를 사용하고 있는데, 이게 상용이라서 다른 기획자나 디자이너 컴퓨터에서 디버깅을 할 때는 fiddler 를 설치해서 썼습니다. 이제 IE9가 설치되어 있으면 따로 뭐 설치할 필요 없을 듯 하네요.


  • 멀티미디어
H.264 코덱 외에 webM 코덱 사용 (올레)
음성코덱으로 MP3, AAC 사용
SVG 사용가능


  • 그 외
CSS3 사용가능
알파채널을 지원하고, 플래시에서만 구현 가능했던 벡터그래픽의 처리를 SVG 를 지원함에 따라서 해결 가능하게 됨.


이 외에도 많은 기능들이 추가되었다. 좀 더 자세한 내용을 알고 싶으면 아래 링크 참조하세요.



신고
Posted by onionmen

댓글을 달아 주세요

개발자, 그러니까 정확하게 이야기 하자면 웹브라우져에서 보여지는 것들을 만드는 사람들을 살려달라고 하는 캠페인 배너를 달았습니다.

정확하게 이야기 하자면 인터넷 익스플로러(IE) 6버전 이하를 사용중인 사람에게 IE7 이상의 버전으로 업그레이드를 해달라고 부탁 하는 캠페인 입니다.


제 블로그의 방문객 중 절반을 훨씬 넘는 분들이 IE6를 사용하고 있습니다. 그럼에도 요즘은 스킨을 수정 할 때 IE6를 전혀 고려하지 않고 있습니다. 테스트 환경도 마땅찮고 IE6까지 고려하려면 손이 너무나도 많이 가기 때문이죠. 아 물론, 요즘 브라우저 통계를 보고는 이런 생각을 고쳐먹게 되었지만 말입니다.

사실 저희 회사에서도 개발자 중에 IE6를 사용하는 분들이 조금 있습니다. IE7 버전으로 업그레이드를 권하고는 있지만 그래도 강요할 수는 없는 노릇이고, 또 가끔 빠르게 테스트를 해야 할 때 유용하기 때문에 적극적으로 권고하고 있지는 않습니다.

어쨋든 IE6 버전에 가볍기는 합니다만, 보안도 그만큼 가볍습니다.

뭐 개발자를 살려달라고 자신의 시스템에 억지로 어떠한 소프트웨어를 설치하라는 말은 아니지만, IE6를 사용하다보면 본인이 원치않는 더욱 많은 소프트웨어가 본인도 모르게 설치될지 모르는 일이니 조심하세요. 라고 말하는것은 조금 협박같이 들리기 때문에 저는 그냥 저희좀 도와달라고 이렇게 말하겠습니다.

평소에 오십가닥씩 빠지던 머리카락이 요즘은 이백삼십가닥씩 빠지는 느낌입니다. 장가만 갈 수 있게 도와주세요.
신고

'Day by day' 카테고리의 다른 글

함께살기 with XNOTE  (7) 2009.01.18
올해의 컨셉.  (2) 2009.01.03
"개발자 좀 살려주세요." 배너를 달았습니다.  (2) 2008.12.04
무기력하지만, 기쁨충만한.  (2) 2008.10.29
반갑다. New Tistory.  (4) 2008.06.18
2008년 6월까지.  (2) 2008.06.12
Posted by onionmen

댓글을 달아 주세요

  1. 섹시녀 2008.12.07 13:19 신고  댓글주소  수정/삭제  댓글쓰기

    어머~
    저도 이거 깔아봐야겠어요~ 머리빠지면 안되잖아요~!!
    (안까먹으면~!!)

강냉님이 하신걸 보고 궁금해서(설마 VIVI가 나올까? 하는 마음에)

Final Fantasy Character Test

Which Final Fantasy Character Are You?
Final Fantasy 7


난 클라우드를 생각하며 질문에 응했는데;; 안타깝게도 세피로스가 나와버렸다.

그나저나 파판은 7이후로 보지 못했는데 어떻게 변했을꼬?
신고
Posted by onionmen

댓글을 달아 주세요

  1. 음침 2007.03.22 01:04 신고  댓글주소  수정/삭제  댓글쓰기

    티파가 나와부렀다;;

이전버튼 1 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2017.12
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday135
Today57
Total1,624,981

티스토리 툴바