인터넷익스플로러가 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

댓글을 달아 주세요

익스프롤러가 버전 6에서 버전 7로 업데이트 되었을 때, 외관상 변한것이 하나 있었습니다.  주소창 옆에 붙어있는 검색창 이었죠.

스샷은 IE8


빨간 박스로 쳐놓은, 안에 google 이라고 써있는 창 입니다. 저기에 검색 키워드를 입력하면 google에 직접 접속하지 않아도 자동으로 접속하여 검색이 가능했죠.

IE6일 때에는 주소창으로 가서 -> 검색사이트 주소를 입력하고 -> 검색창에 검색어 입력 -> 결과확인 과 같은 단계를 거쳤습니다. 주소창으로 가는 단축키가 Alt + D 로 매우 편리했기 때문에 서핑중 마우스를 사용하는 불편함 없이 사용했죠.

검색창에 직접 검색어를 입력하게 되면 검색창으로 가서 (Ctlr + E) -> 검색어 입력 -> 결과 확인 의 단계를 거치게 되면서 단계를 하나 줄일 수 있습니다. 여기에서 검색사이트가 모두 로딩될 때 까지를 기다리지 않아도 되고, 몇몇 사이트에선 검색창에 포커스를 가져갈 필요가 없기 때문에 실제 검색결과가 나타나기 까지의 체감 속도는 훨씬 빨랐습니다.

하지만 저도 IE7이 처음 나오고 얼마간은 기존에 쓰던 방식으로 계속 검색을 했죠. 주소창에 google,com 이나 naver.com 등을 쳐서 검색창에 검색어를 입력하는 방식으로요.

큰 필요성을 느끼지 못했거든요. 단축키도 헷갈리고, 잘 안쓰게 되니까 까먹고, 게다가 검색엔진을 변경하려면 마우스 액션을 한번 취해야 했기 때문에 잘 안쓰게 되었던것 같습니다.

이러한 UI는 IE8이 나와도 동일하게 유지 되었습니다. 파이어폭스도 당시 동일한 UI였던 것으로 기억하구요.

그런데 구글에서 출시한 크롬 이라는 브라우저 에서는 이러한 UI를 채택하지 않고, 정말 심플하게 주소창 하나만 달랑 박아 놨습니다. IE6처럼 말이죠.

이게 무슨 시대역행적 UI인가 하고 사용했었는데, 알고보니 크롬에서는 주소창과 검색창을 통합했더군요. 주소를 치면 주소로 이동하고, 도메인 주소가 아니라고 판단되는 뭔가를 입력하면 구글검색으로 바로 이어집니다.

사실 입력창을 두개로 나눠놓은 것보다는 이러한 방식이 사용자들에겐 더욱 편리하게 다가옵니다. 두가지를 기억할 필요가 없기 때문이죠. 

여기에 문제는 모든 기본 검색이 google로 되고 있다는 점 입니다. 난 google 검색결과가 맘에 안든다 하는 유저가 분명히 있을거란 말이죠.

그래서 이러한 기본 검색엔진을 변경할 수 있게 해 놓았습니다. 


크롬에 보면 스패너 모양의 아이콘을 클릭하여 크롬 옵션창을 엽니다.


별거 없어보이는 옵션창이 열립니다. 여기 중간 하단에 기본 검색엔진 이라는 타이틀이 보이고, google이 기본으로 되어 있습니다. 여기서 설정을 누르면 검색엔진을 변경할 수 있습니다.


검색엔진을 새로 추가할 수도 있고, 변경, 삭제도 가능합니다. 그리고 이런 검색엔진들에 키워드를 입력할 수 있습니다. 

이 키워드는 검색에 매우 편리하게 사용할 수 있는 일종의 단축키입니다.

크롬 주소창에 그냥 일반 검색어만 입력할 경우 사용자가 기본검색엔진으로 설정한 곳에서만 검색이 됩니다. 그런데 키워드를 사용하면 여러분야에서 좀 더 쉽게 검색이 가능하죠.

주목해야 할 부분은 키워드에 써진 글자들 입니다. 저는 주로 검색하는 부분을 등록해 두었는데요, 책, 영상, 쇼핑, 스팸 등이 그것 입니다.


크롬 검색창이 입력을 기다리고 있습니다.


여기에 아까 등록해둔 키워드 중 하나인 스팸을 입력하면 빨간박스에 쳐진것 처럼 Tab을 누를 수 있다는 표시로 아이콘이 나타나고 있습니다.

하단에는 자동완성으로 스팸 - google 검색 missed-call.com 에서 <검색어 입력> 검색이 나타납니다.
여기서 다른건 신경쓸 필요 없이 Tab을 누르면 검색창이 바뀝니다.

  
Tab을 누르게 되면 주소 입력창이 바뀌고, 하단에 자동완성 되어 있던 부분의 순서가 바뀌었습니다. 이 상태에서 어떤 검색어를 입력하면 바로 missed_call.com 에서의 검색결과를 보여줍니다.


검색어를 입력하고 엔터를 치게 되면 검색결과를 보여줍니다.



매우 편리할것 같지 않은가요? 여러 검색엔진 키워드를 등록하여 쉽게 검색해보세요.
저작자 표시 비영리 변경 금지
신고
Posted by onionmen

댓글을 달아 주세요

  1. 2010.04.25 17:11  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of http://onionmen.kr BlogIcon onionmen 2010.04.25 22:48 신고  댓글주소  수정/삭제

      안녕하세요.

      missed call 유용하게 잘 사용하고 있습니다.
      IE, FF에서 사용할 수 있는 검색창 검색에서도 매우 잘 활용하고 있습니다.

      좋은 플랫폼 만들어주셔서 감사합니다. ^^

  2. rudovico 2010.10.25 19:23 신고  댓글주소  수정/삭제  댓글쓰기

    제가 네이버를 기본검색엔진으로 쓰고싶어서 그러는데, url에 http://search.naver.com/search.naver?sm=tab_hty&where=nexearch&query= 을 입력했는데도, 기타검색엔진으로는 되는데 기본검색엔진으로는 설정이안되네요. 혹시 어떻게해야하는지아시나요?ㅠㅠ

    • Favicon of http://onionmen.kr BlogIcon onionmen 2010.10.25 20:48 신고  댓글주소  수정/삭제

      안녕하세요. URL 등록하는 부분에 보시면 "기본 검색엔진으로" 라는 버튼이 있습니다. 네이버를 선택하시고, 기본 검색 엔진으로 버튼을 누르시면 되요.

      잘 안되시면 다시 물어보세요

  3. ㅇㅇ 2011.01.21 19:55 신고  댓글주소  수정/삭제  댓글쓰기

    구글크롬은 익스처럼 한번 주소 입력하면 주소목록이 쫙 나오게 할 수 없나요?

    • Favicon of http://onionmen.kr BlogIcon onionmen 2011.01.22 02:47 신고  댓글주소  수정/삭제

      흠, 익스와는 좀 다른 방식이지만 크롬이 주소 기억하는 방식은 더 똑똑합니다.

      익스와 비슷하게 보고 싶으시다면 한 글자만 누르시고 아래 화살표를 한번 눌러보세요

  4. 망가 2011.07.16 23:49 신고  댓글주소  수정/삭제  댓글쓰기

    이상하네요 제크롬에서는 검색창에 탭그림이 뜨지 않아요...구글옵션들어가는데도 님그림하고 달라요...검색엔진 추가,삭제 버튼도 안보이고...크롬이 기본브라우져로 설정된상태는 아니에요
    그래서 그런가요?.

    • Favicon of http://onionmen.kr BlogIcon onionmen 2011.07.18 16:40 신고  댓글주소  수정/삭제

      안녕하세요. 크롬이 계속 업데이트가 되면서 환경설정창이 바뀐 듯 합니다. 저건 예전에 8인가 9버전일 때 환경성정 창이라서 차이가 좀 있을 것 같아요.

      그래도 기본적인 기능설정은 동일 합니다.

      옵션 창 들어가서 제일 처음에 보이는 화면 중에 검색엔진 관리 라고 있습니다. (옵션 -> 기본설정 탭에 메뉴중 밑에서 두번째 메뉴)

      그 메뉴에서 수정해주시면 됩니다. ^^

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

정확하게 이야기 하자면 인터넷 익스플로러(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 신고  댓글주소  수정/삭제  댓글쓰기

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

이전버튼 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

최근에 올라온 글

Yesterday140
Today120
Total1,625,755

티스토리 툴바